# FlutterFlow Code Export & Monorepo Integration How to export generated code from FlutterFlow and integrate it into the ZIVVO Melos monorepo. ## Export Steps ### 1. Open Developer Menu ``` 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: ```dart // 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 ```dart // 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 ``` ### 3. Replace Navigation with GoRouter ```dart // BEFORE (FlutterFlow) context.pushNamed('CustomerHome'); context.pop(); // AFTER (ZIVVO — GoRouter) context.goNamed(RouteNames.customerHome); context.pop(); ``` ### 4. Replace State Management with Riverpod ```dart // BEFORE (FlutterFlow) FFAppState().currentUserRole setState(() { ... }); // AFTER (ZIVVO — Riverpod) ref.watch(currentUserRoleProvider) ref.read(someNotifierProvider.notifier).update(...) ``` ### 5. Replace FlutterFlow Models with Freezed ```dart // BEFORE (FlutterFlow) class CustomerHomeModel extends FlutterFlowModel { // FlutterFlow model boilerplate } // AFTER (ZIVVO — Freezed) @freezed class CustomerHomeState with _$CustomerHomeState { const factory CustomerHomeState({ required LatLng userLocation, required List nearbyDrivers, @Default(false) bool isLoading, }) = _CustomerHomeState; } ``` ### 6. Extract Reusable Widgets Move widgets that appear in multiple screens into the design system package: ```dart // 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: ```dart // 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: ```dart // BEFORE Text('Where to?') // AFTER Text(context.l10n.customerHomeWhereToHint) ``` --- ## Automation Script After export, run this cleanup sequence: ```bash # 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: 1. **Build/modify screens in FlutterFlow** using browser automation 2. **Export only changed pages** (use "View Code" for individual widgets) 3. **Copy widget code** into appropriate monorepo package 4. **Apply cleanup transformations** (imports, theme, state, navigation) 5. **Run `build_runner`** to regenerate Freezed/Riverpod code 6. **Run `flutter analyze`** to catch issues 7. **Run tests** to verify functionality 8. **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.