credit — flutter.dev

OneApp DevCraft: Unlocking the Power of Hybrid Apps | Part — 3

Ready to unlock the power of Flutter in your native Android app? This blog dives deep into seamless integration using .aar files. In this step-by-step guide, we’ll take you through a world of hybrid app possibilities using the versatility of Flutter while maintaining native app structure and avoiding ProGuard woes.

Step 1: Create a Flutter Module

The first step is to create a Flutter module that can be easily exported as an .aar file. Here’s how you can do it:

# Create a new Flutter module
flutter create my_flutter_module
# Change the directory to your Flutter module
cd my_flutter_module

Step 2: Build the .aar File

To create a .aar file that encapsulates your Flutter module, use the following commands:

flutter build aar 

This will generate an .aar file in the `build/host/outputs/repo/` directory of your Flutter module. Copy this .aar file to a location where your native Android project can access it.

Step 3: Integrate .aar into Native Android

Now, let’s move to your native Android project and integrate the .aar file.

Step 4: Update the Android Project Gradle Files

In your native Android project’s `settings.gradle` file, include the Flutter module as a project. Open `settings.gradle` and add the following line:

include ':my_flutter_module' 
project(':my_flutter_module').projectDir = new File('../my_flutter_module') 

This tells your Android project to include the Flutter module as part of its build.

Step 5: Add .aar as a Dependency

In your Android app’s `build.gradle` file, add the .aar file as a dependency:

dependencies { 
implementation project(':my_flutter_module') 
} 

Step 6: Initialize Flutter in Your Android Code

Now, you need to initialize Flutter in your Android code. To do this, create a `FlutterEngine` and configure it in your native Android code:

import io.flutter.embedding.android.FlutterEngine;
…
FlutterEngine flutterEngine = new FlutterEngine(context);
// Configure your FlutterEngine, e.g., setting initial routes or adding plugins
flutterEngine.getNavigationChannel().setInitialRoute("your_initial_route");
// Add plugins
flutterEngine.getPlugins().add(new YourCustomPlugin());

Step 7: Create a FlutterView

You’ll need to create a `FlutterView` in your Android layout where the Flutter content will be displayed:

<io.flutter.embedding.android.FlutterView
android:id="@+id/flutter_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

Step 8: Attach FlutterEngine to FlutterView

In your Android Activity or Fragment, attach the `FlutterEngine` to the `FlutterView`:

import io.flutter.embedding.android.FlutterView;
…
FlutterView flutterView = findViewById(R.id.flutter_view);
flutterView.attachToFlutterEngine(flutterEngine);

Step 9: Build and Run Your Android App

Congratulations, you’ve now integrated Flutter into your Android app using .aar files! Build your app and witness the seamless integration.

While we’ve covered the basics, real-world projects often involve complexities based on app structure, safeguards, and more. Stay tuned for future blog posts where we’ll tackle those challenges.

This blog provides a solid starting point, and we’ve attached helpful notes below to guide your journey.

Reading:

Add a Flutter screen to an Android app

Learn how to add a single Flutter screen to your existing Android app.

docs.flutter.dev

https://developer.android.com/studio/projects/android-library.html#aar-contents
https://levelup.gitconnected.com/how-to-add-flutter-to-android-app-4d80d9820686