How to Integrate Flutter Screens into Your Android App (Part 2)
In Part 1, we delved into integrating Flutter modules into your iOS app. Now, in Part 2, let’s proceed further in your Flutter app development endeavor. We’ll now implement a simple demo Android application featuring screens designed in Flutter. Our objective is to seamlessly embed the Flutter module into our Android app as an Android Archive (AAR).
Integrating Flutter Screens into Your Android App
If you haven’t yet created a Flutter module, ensure to follow the initial steps outlined in our Part 1 series. This sets the foundation for the integration process we’re about to discuss.
In this guide, our focus will be on the core integration - incorporating a Flutter module into your Android project. Let’s dive in.
Step 1: Generate Android Archive from the Flutter Module
The Flutter documentation outlines different methods to add the Flutter module as a dependency in Gradle. We’ll concentrate on Option 1, termed “Android Archive“.
Before generating the Android Archive, ensure you have defined an entry point function to be invoked by the native app.
Add the following entry point function in your main.dart file located under mi_flutter_module/lib folder:
dart
void loadFromNative() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(const MyApp());
}
To generate the Android Archive (AAR), execute the following command in your mi_flutter_module directory:
bash
Copy code
flutter build aar
Step 2: Configuring and Integrating Android Archive (AAR) in Android Project
Create an Android application ensuring the Build Configuration language is Kotlin DSL (build.gradle.kts).
Create a lib folder in your Android project directory. Then, copy and paste your AAR directory inside it.
Ensure the AAR library's folder structure is lib/build/host/.. for the host app to locate these files.
Configure the repositories for the host app to find the AAR files. Add the following code to the app-level build.gradle (<host>/app/build.gradle):
groovy
Copy code
repositories {
google()
mavenCentral()
maven {
setUrl("../lib/build/host/outputs/repo")
}
maven {
setUrl("$storageUrl/download.flutter.io")
}
}
dependencies {
debugImplementation ("com.mobisoft.mi_flutter_module:flutter_debug:1.0")
profileImplementation ("com.mobisoft.mi_flutter_module:flutter_profile:1.0")
releaseImplementation ("com.mobisoft.mi_flutter_module:flutter_release:1.0")
}
Update the settings.gradle.kts file dependencyResolutionManagement to resolve compilation issues.
If all steps are correctly executed, you should be able to build the project successfully.
Step 3: Open the Flutter View
To initiate a Flutter screen from an existing Android interface, we’ll utilize the FlutterEngine.
Create an instance of the Flutter Engine in the MainActivity class.
Add a button to open the Flutter module when clicked.
kotlin
Copy code
const val FLUTTER_ENGINE_NAME = "mi_flutter_engine"
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val flutterEngine = FlutterEngine(this)
flutterEngine.dartExecutor.executeDartEntrypoint(
DartExecutor.DartEntrypoint.createDefault()
)
FlutterEngineCache.getInstance().put(FLUTTER_ENGINE_NAME, flutterEngine)
setContent {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
LaunchFlutterModuleButton()
}
}
}
}
@Composable
fun LaunchFlutterModuleButton() {
val context = LocalContext.current
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
ElevatedButton(onClick = {
context.startActivity(
FlutterActivity.withCachedEngine(FLUTTER_ENGINE_NAME).build(context)
)
}) {
Text(text = "MI Flutter Module")
}
}
}
Conclusion
You’ve successfully integrated Flutter screens into your native Android application. The process allows for seamless interaction between Flutter and Android components, enhancing the user experience.
Ready to embark on this transformative journey? Reach out to us for expert assistance in your app development endeavors. Our team of skilled Flutter developers and designers stands ready to guide you through this journey and bring your unique app idea to life.
No comments:
Post a Comment