Reusable components with Flutter

Question

The problem

My idea is to create some simple components using Flutter so that they can be used in multiple native iOS and Android projects in our firm.

For example, consider a generic login view. This view can be coded once in Flutter and then can be included later on into projects that have both iOS and Android parts(native) . So such common components can be written once using Flutter instead of twice as native iOS and Android components.

What I have tried so far

I have followed the steps here https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps and it works, but it seems very restricted in functionality.

My questions are

1. How can I add multiple flutter projects like this, with each project representing a reusable component? Is that even the way to go?
2. Can I have smaller components- for example in iOS, UIViews instead of FlutterViewController without native hacking ?
3. How do I handle passing data between the native and Flutter part and also the navigation?

Solution

What do you mean by "it seems very restricted in functionality" ?

https://flutter.dev/docs/development/add-to-app lists these limitations:

• Running multiple Flutter instances or running in partial screen views may have undefined behavior.
• Using Flutter in background mode is still a WIP.
• Packing a Flutter library into another sharable library or packing multiple Flutter libraries into an application isn’t supported.

Your 1st question is answered by the 3rd limitation. If you were considering splitting your simple components up into a separate Flutter library each, then no. You would need to package all your components into a single Flutter library, then let the native app pick from the pool.

For your 2nd question, can you be more specific what you mean by "without native hacking" ? Is there a reason you don't/can't use FlutterViewController?

3rd question about passing data between native and Flutter will involve https://flutter.dev/docs/development/platform-integration/platform-channels

1. From Flutter to native, here's an Android example https://stackoverflow.com/a/49308193/6668797, passing the value "text":

   // flutter side, send the data
   final String result = await platform.invokeMethod('getBatteryLevel', {"text":text});
   
   // native side, retrieve it
   String text = call.argument("text");
   

2. From native to Flutter, you use result.success(batteryLevel); to send it back to final String result.