Cross-platform example

Build an exercise app with Flutter

A Material 3 catalog with responsive grids, local search, and native WebP rendering from the public RepDB snapshot.

View on GitHub Compare RepDB plans

Public repository · No API key required · Commercial in-app use with attribution

terminal

$ git clone https://github.com/sergei-argutin/repdb-example-flutter

$ flutter pub get

$ flutter run -d chrome

Integration walkthrough

How to load RepDB assets in a Flutter exercise app

Flutter registers the JSON and WebP directories in pubspec.yaml, loads the bundle once through rootBundle, and converts each record into a typed Exercise model. The catalog then searches the in-memory collection and adapts its grid to the available width.

1 Declare the exercise JSON and image directories under flutter.assets in pubspec.yaml.
2 Read exercises.json once with rootBundle before rendering the first catalog screen.
3 Decode records into typed Dart models and cache the resulting Bundle instance.
4 Search locally and render a responsive Material 3 grid with native WebP assets.

Key files in the repository

pubspec.yaml — JSON and WebP asset declarations
lib/data/bundle.dart — Local asset loading and cached bundle
lib/models/exercise.dart — Typed exercise model and search matching
lib/screens/catalog_screen.dart — Responsive Material 3 catalog

lib/data/bundle.dart Dart

final raw = await rootBundle.loadString(
  'assets/exercises.json',
);
final json = jsonDecode(raw) as Map<String, dynamic>;
final exercises = (json['exercises'] as List)
    .map((item) => Exercise.fromJson(
          item as Map<String, dynamic>,
        ))
    .toList();

What it demonstrates

A practical starting point, not a toy snippet

The Flutter app keeps both data and media in its asset bundle. The repository demonstrates the asset declarations and parsing needed to ship a self-contained exercise catalog.

Responsive exercise grid for mobile, tablet, and web
Local search with no backend or environment variables
Native WebP rendering from bundled assets
Material 3 light and dark themes

Sample vs full dataset

Prototype publicly. Ship with the complete library.

The repository deliberately uses a limited public snapshot. It shows the integration without publishing the full paid RepDB catalog.

Included in the public example

400 exercise records
Flat 512px WebP images
English, German, and Spanish content
One paid-animation preview

Available in paid RepDB plans

The complete, growing exercise catalog
Classic and flat images up to 1024px
Transparent assets and exercise animations on Standard
SQLite, TypeScript, embeddings, and integration templates on Standard

Clone the example Download a RepDB preview

Need another stack?

Browse the other examples or use the same local-data pattern in your own framework.

All developer examples Get the full dataset