296 lines
9.5 KiB
Markdown
296 lines
9.5 KiB
Markdown
# 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<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:
|
|
|
|
```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.
|