Mylestech Admin 9c1bf0a285 Central skills catalog: 472 skills + WORKING_SET + AGENTS

2026-07-13 14:05:05 -04:00

9.5 KiB

Raw Permalink Blame History

FlutterFlow Code Export & Monorepo Integration

How to export generated code from FlutterFlow and integrate it into the ZIVVO Melos monorepo.

Export Steps

1. find "</>" icon or "Developer Menu" in top toolbar → click
2. read_page → verify developer panel opened
3. Options visible: View Code, Download Code, Custom Code, Custom Widgets

2. Download Full Project Code

1. find "Download Code" → click
2. FlutterFlow generates a complete Flutter project
3. Wait for code generation (can take 30-60 seconds)
4. read_page → check for progress indicator or "Download Ready"
5. Download ZIP file when ready
6. Extract to a temporary directory for processing

3. View Code for Single Widget/Page (Optional)

1. Select a widget on canvas
2. find "View Code" in developer menu → click
3. Generated Dart code shown in a code panel
4. Can copy individual widget code for manual integration

FlutterFlow Export Structure

A typical FlutterFlow export looks like:

flutterflow_export/
├── lib/
│   ├── main.dart
│   ├── app_state.dart
│   ├── flutter_flow/
│   │   ├── flutter_flow_theme.dart       # Theme/design system
│   │   ├── flutter_flow_widgets.dart     # Custom FF widgets
│   │   ├── flutter_flow_util.dart        # Utility functions
│   │   ├── flutter_flow_model.dart       # Base model class
│   │   ├── nav/
│   │   │   └── nav.dart                  # GoRouter navigation
│   │   └── internationalization.dart     # i18n
│   ├── pages/
│   │   ├── splash_screen/
│   │   │   ├── splash_screen_widget.dart
│   │   │   └── splash_screen_model.dart
│   │   ├── onboarding/
│   │   │   ├── onboarding_widget.dart
│   │   │   └── onboarding_model.dart
│   │   ├── phone_entry/
│   │   │   ├── phone_entry_widget.dart
│   │   │   └── phone_entry_model.dart
│   │   └── customer_home/
│   │       ├── customer_home_widget.dart
│   │       └── customer_home_model.dart
│   └── components/
│       ├── ride_card/
│       │   ├── ride_card_widget.dart
│       │   └── ride_card_model.dart
│       └── vehicle_option/
│           ├── vehicle_option_widget.dart
│           └── vehicle_option_model.dart
├── assets/
│   ├── fonts/
│   ├── images/
│   └── lottie_animations/
├── pubspec.yaml
└── analysis_options.yaml

Monorepo Integration Mapping

Map FlutterFlow exports to the ZIVVO Melos monorepo structure:

FlutterFlow Export                    ZIVVO Monorepo Target
─────────────────                     ─────────────────────
lib/flutter_flow/
  flutter_flow_theme.dart        →    packages/zivvo_design_system/lib/src/theme/
  flutter_flow_widgets.dart      →    packages/zivvo_design_system/lib/src/components/

lib/pages/
  splash_screen/                 →    packages/feature_auth/lib/src/screens/
  onboarding/                    →    packages/feature_auth/lib/src/screens/
  phone_entry/                   →    packages/feature_auth/lib/src/screens/
  otp_verification/              →    packages/feature_auth/lib/src/screens/
  customer_home/                 →    packages/zivvo_app/lib/screens/customer/
  destination_search/            →    packages/feature_rides/lib/src/screens/
  vehicle_selection/             →    packages/feature_rides/lib/src/screens/
  active_ride/                   →    packages/feature_rides/lib/src/screens/
  ride_complete/                 →    packages/feature_rides/lib/src/screens/
  driver_home/                   →    packages/feature_driver/lib/src/screens/
  ride_request/                  →    packages/feature_driver/lib/src/screens/
  dealer_dashboard/              →    packages/feature_dealer/lib/src/screens/
  vehicle_management/            →    packages/feature_dealer/lib/src/screens/
  admin_dashboard/               →    packages/feature_admin/lib/src/screens/
  kyc_review/                    →    packages/feature_admin/lib/src/screens/

lib/components/
  ride_card/                     →    packages/feature_rides/lib/src/widgets/
  vehicle_option/                →    packages/feature_rides/lib/src/widgets/
  stat_card/                     →    packages/zivvo_design_system/lib/src/components/

assets/
  fonts/                         →    packages/zivvo_design_system/assets/fonts/
  images/                        →    packages/zivvo_app/assets/images/

Code Cleanup Checklist

After copying exported code into the monorepo, perform these transformations:

1. Remove FlutterFlow Dependencies

Replace FlutterFlow-specific imports:

// BEFORE (FlutterFlow)
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_widgets.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/flutter_flow/flutter_flow_model.dart';

// AFTER (ZIVVO)
import 'package:zivvo_design_system/zivvo_design_system.dart';

2. Replace Theme References

// BEFORE (FlutterFlow)
FlutterFlowTheme.of(context).primary
FlutterFlowTheme.of(context).bodyMedium
FlutterFlowTheme.of(context).primaryBackground

// AFTER (ZIVVO)
ZivvoTheme.of(context).primary
Theme.of(context).textTheme.bodyMedium
ZivvoTheme.of(context).background

// BEFORE (FlutterFlow)
context.pushNamed('CustomerHome');
context.pop();

// AFTER (ZIVVO — GoRouter)
context.goNamed(RouteNames.customerHome);
context.pop();

4. Replace State Management with Riverpod

// BEFORE (FlutterFlow)
FFAppState().currentUserRole
setState(() { ... });

// AFTER (ZIVVO — Riverpod)
ref.watch(currentUserRoleProvider)
ref.read(someNotifierProvider.notifier).update(...)

5. Replace FlutterFlow Models with Freezed

// BEFORE (FlutterFlow)
class CustomerHomeModel extends FlutterFlowModel<CustomerHomeWidget> {
  // FlutterFlow model boilerplate
}

// AFTER (ZIVVO — Freezed)
@freezed
class CustomerHomeState with _$CustomerHomeState {
  const factory CustomerHomeState({
    required LatLng userLocation,
    required List<NearbyDriver> nearbyDrivers,
    @Default(false) bool isLoading,
  }) = _CustomerHomeState;
}

6. Extract Reusable Widgets

Move widgets that appear in multiple screens into the design system package:

// packages/zivvo_design_system/lib/src/components/
zivvo_button.dart          // Primary, Secondary, Ghost, Danger variants
zivvo_card.dart            // Default, Elevated variants
zivvo_input.dart           // Text field with ZIVVO styling
zivvo_avatar.dart          // Circular avatar with border options
zivvo_chip.dart            // Selection chips
zivvo_stat_card.dart       // Dashboard stat cards
zivvo_badge.dart           // Status badges

7. Add Offline Support

Wrap data-dependent widgets with PowerSync integration:

// Wrap list views with PowerSync query builders
PowerSyncBuilder(
  query: db.watch('SELECT * FROM rides WHERE status = ?', ['active']),
  builder: (context, snapshot) {
    // Use exported widget code here, replacing hardcoded data
  },
)

8. Add Internationalization

Replace hardcoded strings with ARB references:

// BEFORE
Text('Where to?')

// AFTER
Text(context.l10n.customerHomeWhereToHint)

Automation Script

After export, run this cleanup sequence:

# 1. Extract FlutterFlow export
unzip flutterflow-export.zip -d /tmp/ff-export

# 2. Copy assets
cp -r /tmp/ff-export/assets/fonts/ packages/zivvo_design_system/assets/fonts/
cp -r /tmp/ff-export/assets/images/ packages/zivvo_app/assets/images/

# 3. Copy screen files to appropriate packages
# (manual mapping per screen — see integration mapping above)

# 4. Run code generation after adding Freezed models
cd packages/zivvo_design_system && dart run build_runner build --delete-conflicting-outputs
cd packages/feature_auth && dart run build_runner build --delete-conflicting-outputs

# 5. Analyze for errors
melos run analyze

# 6. Format
melos run format

# 7. Run tests
melos run test

Iterative Workflow

For ongoing development, use this cycle:

Build/modify screens in FlutterFlow using browser automation
Export only changed pages (use "View Code" for individual widgets)
Copy widget code into appropriate monorepo package
Apply cleanup transformations (imports, theme, state, navigation)
Run build_runner to regenerate Freezed/Riverpod code
Run flutter analyze to catch issues
Run tests to verify functionality
Preview in emulator/device to verify rendering

Tips

Export early and often: Don't build the entire app in FlutterFlow before exporting. Build a few screens, export, integrate, verify, then continue.
Use FlutterFlow for layout, not logic: Build the visual structure in FlutterFlow. Add business logic, state management, and data binding after export in the monorepo.
Keep a mapping document: Track which FlutterFlow pages map to which monorepo files so you can re-export and merge changes later.
Version your exports: Save each FlutterFlow export ZIP with a date stamp so you can diff changes between exports.
Test on low-end devices: After integration, test on Tecno/Infinix-class devices to verify performance meets ZIVVO's requirements.

9.5 KiB

Raw Permalink Blame History

FlutterFlow Code Export & Monorepo Integration

Export Steps

1. Open Developer Menu

2. Download Full Project Code

3. View Code for Single Widget/Page (Optional)

FlutterFlow Export Structure

Monorepo Integration Mapping

Code Cleanup Checklist

1. Remove FlutterFlow Dependencies

2. Replace Theme References

3. Replace Navigation with GoRouter

4. Replace State Management with Riverpod

5. Replace FlutterFlow Models with Freezed

6. Extract Reusable Widgets

7. Add Offline Support

8. Add Internationalization

Automation Script

Iterative Workflow

Tips

9.5 KiB Raw Permalink Blame History

FlutterFlow Code Export & Monorepo Integration

Export Steps

1. Open Developer Menu

2. Download Full Project Code

3. View Code for Single Widget/Page (Optional)

FlutterFlow Export Structure

Monorepo Integration Mapping

Code Cleanup Checklist

1. Remove FlutterFlow Dependencies

2. Replace Theme References

3. Replace Navigation with GoRouter

4. Replace State Management with Riverpod

5. Replace FlutterFlow Models with Freezed

6. Extract Reusable Widgets

7. Add Offline Support

8. Add Internationalization

Automation Script

Iterative Workflow

Tips

9.5 KiB

Raw Permalink Blame History