Integrating Flutter to Existing Native Apps- Flutter Fest @ GeekyAnts

Introduction

The talk explores how to migrate existing native apps to Flutter application without interrupting existing users, while maintaining the code quality.

Have you ever created animations in native Android or iOS? Have you tried the same using Flutter? Or have you tried integrating Flutter into native apps? When would you want to integrate Flutter into existing native apps? When we already have a product that has been built using native (probably android or iOS), and want to add properties too complex for our native toolkit, we use Flutter. Similarly, we could build whole features using Flutter for the simple reason of cost and time benefits along with a great developer experience. A feature called Add to App makes this possible by providing complete access to Flutter SDK. You can share all the logic between native and Flutter, there is no compromising with performance, all the debugging tools are available, and you have access to all pub.dev packages.

How Does It Work?

Flutter provides us with Flutter Activity on Android and Flutter View Controller on iOS. These help to host the Flutter engine on which you can run your Flutter code, or any Dart code. Let us dive deeper into the process:

• Creation: First, we create a module style Flutter project. You can either create a Flutter module project using Flutter create command and just select the type module. The same applies for Android Studio — you can select the project type as Module and you will get a project which is created from a module template. Make sure that your Flutter module sits at a sibling level to your other native projects, like your Android or iOS app.

• Integration:

• For Android: Now that you have your module with some code written, you need to integrate it. For this, there are two options in Android. The first option is building an AAR or android archive out of your Flutter module. This is a library format similar to a package, but for native android. To build an AAR, we use a command in Flutter called flutter build aar which will build the required files, and show the steps to be followed to implement this in your native project. The second option is source integration. This is a one-step process. You have to change two files, settings.gradle and build.gradle. Once this is done, when you run native project, it will build your Flutter module, integrate it into your android project, and run it. 

• For iOS: There are two options for iOS. The first method is the more popular one, Cocoapods. For Cocoapods, you have to modify Podfile- which means that there are four lines to modify. Then run pod install which will integrate the module to your project. The second method is to build frameworks. To build a framework out of your Flutter module, you have the command flutter build ios-framework which will output the required files. You then link it inside your Xcode and then embed it. The needed files will be compiled when you are trying to publish or run the project. 

• Invocation: How to invoke Flutter from native apps is the next question. On android, you can create a Flutter activity .withNewEngine then .build it and then .startActivity. On iOS, you can use FlutterViewController that is provided, which can host a Flutter engine and then you present the ViewController. 

These steps are very familiar to native developers.

Adding Flutter Tools

While developing, you will require Flutter tools like debugger, ID support, inspection. You can do this by using flutter attach. In VS code, it is called Attach to Dart Process. It will connect to the running app and let you use all the tools that you have with any Flutter app. 

Integrating Flutter to Native Apps- Overcoming Challenges

Here we discuss some challenges you may face while integrating Flutter to native apps, along with solutions to overcome them:

• Integrating multiple modules: Flutter Add to app does not support multiple modules. For example, if you are building two features — two teams are building separate features- and you want both features inside your native apps, you will be unable to do it by default. There is a simple workaround for this. You need to build one module and then integrate other Flutter modules inside your Pubsec.yaml, so that you can build only one common module and integrate it. 

• Flutter view takes some time to start: This issue is faced because Flutter engine needs some time to warm up (1-2 seconds). This is an issue users may not like. The solution is to use something called Flutter Engine Cache. You can use it whenever necessary- pull it form the cache and then run it. The result is a super fast launch.

• Reusing existing code: You may have written a lot of code, like getting RefreshToken, sendAnalytics, or getRemoteConfig, and so on. While building a feature in Flutter, you would want these codes in Flutter as well. Instead of writing it all down again, you could invoke Method Channels from Flutter and then you can handle them inside your native apps. Whenever a Method is invoked, it will check the parameters and process it- you can run your native code and send back the result (or not). 

• Other challenges:

• Adoption into CI/CD workflows: You will have to adopt this new process into your existing workflow.

• Manage versioning: For this,

           a) You can use Git tags, or

           b) Publish Artifacts

• Finding out issues:  If something happens during production, you need to find out what happened by integrating Firebase Crashlytics plugin in Flutter and Native module. You  can also use Method channels to send logs for important events and see what happened and at what time. 

Conclusion

This talk provides some context and a use case for individuals who have an app built in native and want to utilize the benefits of Flutter- maybe build a feature or a simple screen using Flutter- without having to start from scratch!

At GeekyAnts, we are ever-enthusiastic to constantly innovate and experiment in the Flutter space. Book an appointment with us today to find out how we can help you make your company digitally smart in more ways than one!