Add-to-App Integration Patterns for Flutter

When You Can’t Go All-In

Not every project can start with Flutter. Maybe you have a mature native app with millions of users, or your team is still evaluating Flutter. Add-to-App lets you embed Flutter modules incrementally.

How It Works

Flutter compiles to a reusable module that native platforms can host:

• Android — FlutterActivity or FlutterFragment
• iOS — FlutterViewController
• Web — iframe or web component
• Desktop — Flutter window or widget

Integration Patterns

1. Single Screen

Add one Flutter screen to a native navigation stack:

// Android
class FlutterProfileActivity : FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        flutterEngine.dartExecutor.executeDartEntrypoint(
            DartEntrypoint.createDefault()
        )
    }
}

2. Multi-Screen Module

Create a self-contained Flutter module with its own navigation:

// lib/main.dart (in the Flutter module)
void main() => runApp(ProfileModule());

class ProfileModule extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ProfileScreen(),
      onGenerateRoute: (settings) => generateRoute(settings),
    );
  }
}

3. Hybrid Navigation

Share navigation state between native and Flutter using platform channels:

// Flutter side
const channel = MethodChannel('navigation');
channel.invokeMethod('pushNative', {'route': 'settings'});

4. Shared State

Use platform channels or shared databases to synchronize state across native and Flutter boundaries.

Best Practices

1. Start with a single screen — prove the pattern before scaling
2. Minimize platform channel calls — they’re synchronous and slow
3. Use shared preferences or databases for cross-boundary state
4. Test both sides independently — Flutter module and native host
5. Plan for hot restart — Add-to-App has different reload behavior

Limitations

• No hot reload in some configurations
• Increased app size — Flutter engine adds ~5-10 MB
• Version coordination — Flutter SDK upgrades affect both sides
• Plugin compatibility — not all plugins work in Add-to-App mode

Conclusion

Add-to-App is the bridge between native and Flutter. Use it to incrementally adopt Flutter, validate the technology, and migrate at your own pace without rewriting your entire app.