Skip to main content

​
Overview

Location: lib/logic/unsplash_logic.dart The UnsplashLogic class provides access to pre-mapped Unsplash photo collections for each wonder. It acts as a facade for the UnsplashService and manages photo collection IDs.

​
Registration

GetIt.I.registerLazySingleton<UnsplashLogic>(() => UnsplashLogic());
Access via global accessor: 
UnsplashLogic get unsplashLogic => GetIt.I.get<UnsplashLogic>();

​
Properties

​
service
UnsplashService
Access to the underlying UnsplashService for making API calls.
UnsplashService get service => GetIt.I.get<UnsplashService>();

​
Methods

​
getCollectionPhotos()

Retrieves the list of photo IDs for a given Unsplash collection. 
List<String>? getCollectionPhotos(String collectionId)
Parameters:
  • collectionId: The Unsplash collection ID (e.g., "2072035" for Chichen Itza)
Returns:
  • List<String>?: List of Unsplash photo IDs, or null if collection not found
Example: 
// Get photos for a wonder's collection
final collectionId = wonderData.unsplashCollectionId;
final photoIds = unsplashLogic.getCollectionPhotos(collectionId);

if (photoIds != null) {
  print('Found ${photoIds.length} photos');
}

​
Photo Collections by Wonder

From lib/logic/data/unsplash_photo_data.dart, each wonder has a pre-mapped collection:
WonderCollection IDPhoto Count
Chichen Itza207203525 photos
Christ the Redeemer988193625 photos
Colosseum779826225 photos
Great Wall366801225 photos
Machu Picchu323739725 photos
Petra510940425 photos
Pyramids of Giza114682925 photos
Taj Mahal660555425 photos

​
UnsplashPhotoData Structure

The pre-mapped photo collections are defined in UnsplashPhotoData: 
class UnsplashPhotoData {
  static final Map<String, List<String>> photosByCollectionId = {
    '2072035': [
      // Chichen Itza photo IDs
      'photo-id-1',
      'photo-id-2',
      // ... 25 total
    ],
    // ... other collections
  };
}

​
Photo URL Construction

Photo URLs are constructed using Unsplash CDN patterns: 
// Small thumbnail (400px)
String smallUrl(String photoId) => 
  'https://images.unsplash.com/photo-$photoId?w=400';

// Medium size (800px)
String mediumUrl(String photoId) => 
  'https://images.unsplash.com/photo-$photoId?w=800';

// Large size (1600px)
String largeUrl(String photoId) => 
  'https://images.unsplash.com/photo-$photoId?w=1600';
The photo gallery uses a 5×5 grid to display 25 photos: 
class PhotoGalleryScreen extends StatefulWidget {
  final WonderData wonderData;
  
  @override
  Widget build(BuildContext context) {
    final collectionId = wonderData.unsplashCollectionId;
    final photoIds = unsplashLogic.getCollectionPhotos(collectionId);
    
    if (photoIds == null || photoIds.isEmpty) {
      return EmptyState();
    }
    
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 5,
        mainAxisSpacing: 0,
        crossAxisSpacing: 0,
      ),
      itemCount: photoIds.length,
      itemBuilder: (context, index) {
        final photoId = photoIds[index];
        return PhotoGridTile(photoId: photoId);
      },
    );
  }
}

​
Self-Hosted Fallback

For production reliability, Wonderous uses a self-hosted CDN as fallback: 
// Primary: Unsplash CDN
String primaryUrl = 'https://images.unsplash.com/photo-$photoId?w=800';

// Fallback: Self-hosted
String fallbackUrl = 'https://wonderous.app/photos/$photoId-800.jpg';

​
Integration with Collectibles

Certain photos in the gallery hide collectibles. When a user navigates to specific grid positions, collectibles are discovered: 
final photoIndex = gridX + (gridY * 5); // 0-24 for 5×5 grid
final collectible = wonderData.hiddenArtifacts[photoIndex];

if (collectible != null) {
  collectiblesLogic.setState(collectible, CollectibleState.discovered);
  // Show CollectibleFoundScreen
}

​
API Configuration

Unsplash API credentials are configured in:
  • Development: Uses Unsplash API directly with API key
  • Production: Uses self-hosted CDN for better performance and reliability
Environment detection: 
if (kDebugMode) {
  // Use Unsplash API with rate limits
} else {
  // Use self-hosted CDN
}

Build docs developers (and LLMs) love

Get started for freeTalk to us