123ArticleOnline Logo
Welcome to 123ArticleOnline.com!
ALL >> Technology,-Gadget-and-Science >> View Article

How To Add Screens Designed In Flutter Into Your Android App (part 2)

Profile Picture
By Author: Prashant Telangi
Total Articles: 18
Comment this article
Facebook ShareTwitter ShareGoogle+ ShareTwitter Share

In Part 1, we introduced the integration of Flutter modules in your iOS app. Now, in part 2, we’re ready to take the next step in your Flutter app development journey. We will implement a simple demo Android application that will feature a few screens designed in Flutter. Our goal is to seamlessly embed the Flutter module into our Android app as an Android Archive (AAR).

how to add screens designed in flutter into your android app
If you haven’t already created a Flutter module, it’s crucial to follow the initial two steps outlined in our Part 1 series. This will provide the foundation for the integration we’re about to discuss.

In this blog post, we will be focusing on the heart of the matter – Integrating a Flutter module into your Android project. So let’s get started.

Step 1: Generate Android Archive from the Flutter Module
The Flutter documentation explains that there are a couple of ways to add the Flutter module as a dependency of your existing app in Gradle. However, we’ll be focusing on Option 1 mentioned there, which is called “Android Archive“.

Before generating ...
... the Android Archive, we need to make sure that we have defined an entry point function to be invoked by the native app.

In our main.dart file located under mi_flutter_module/lib folder, add the following entry point function. This function will be called from the Android app.

@pragma("vm:entry-point")
void loadFromNative() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(const MyApp());
}
Code language: JavaScript (javascript)
To generate the Android Archive (AAR), run the following command in your mi_flutter_module directory. This command will generate 3 frameworks for Debug, Profile, and Release.

flutter build aar
Step 2: Configuring and Integrating Android Archive (AAR) in Android Project
Create an Android application and make sure the Build Configuration language is Kotlin DSL (build.gradle.kts)
Create an Android application and make sure the Build Configuration language is Kotlin DS
Create a lib folder in your Android project directory. After that copy and paste your AAR directory inside it.
Create a lib folder
Note: Please make sure the folder structure of the AAR library should be lib/build/host/.. for the host app to find these files.

Ensure you have the repositories configured for the host app to find the AAR files and add the following code to app level build.gradle (/app/build.gradle)
repositories{
val storageUrl = System.getenv("FLUTTER_STORAGE_BASE_URL") ?: "https://storage.googleapis.com"
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")
}
Code language: JavaScript (javascript)
Update the settings.gradle.kts file dependencyResolutionManagement to fix the compile issue.
dependencyResolutionManagement {
repositories {
google()
mavenCentral()
maven { url = uri("jitpack.io") }
}
}
Code language: JavaScript (javascript)
If all the steps for generating the AAR and configuring the gradle and settings files are correct, 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 use the FlutterEngine.

Create an instance of the Flutter Engine in the MainActivity class.
package com.example.fluttermodulenativeapp
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.embedding.engine.FlutterEngineCache
import io.flutter.embedding.engine.dart.DartExecutor


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)


...
}
}


val flutterEngine = FlutterEngine(this)

This line creates a new instance of a Flutter Engine named flutterEngine. A Flutter Engine is responsible for running Flutter code within an Android application.

flutterEngine.dartExecutor.executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault())
Code language: CSS (css)
This line of code sets up the Flutter Engine to execute the default Dart entry point. It starts running the Flutter code within the engine effectively.

FlutterEngineCache.getInstance().put(FLUTTER_ENGINE_NAME, flutterEngine)
Code language: CSS (css)
This line stores the flutterEngine instance in the FlutterEngineCache with the name defined by FLUTTER_ENGINE_NAME. It is used for caching and managing Flutter engines within the application.

Add the below-mentioned activity tag in your AndroidManifest.xml file:

Code language: HTML, XML (xml)
The element we have provided is configuring an Android activity named FlutterActivity from the Flutter framework. It specifies how this activity should handle certain configuration changes, enables hardware acceleration for improved graphics performance, and sets the soft input mode to adjust the window size when the soft keyboard is displayed. These settings are commonly employed when integrating Flutter-based UI components into an Android app.

Update your MainActivity class and add a button to open the Flutter module when it’s clicked.
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 {
// A surface container using the 'background' color from the theme
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")
}
}
}
Note: Please ensure that you modify the compileSdk version to 34 in the app level build.gradle file.

When the ElevatedButton is clicked, it triggers the creation and launch of a FlutterActivity using a cached Flutter engine named FLUTTER_ENGINE_NAME created within our MainActivity class. This allows the app to run Flutter code within the context of this activity.

Quite straightforward, wouldn’t you agree?

We’re all set! You can now run the application and Voila!


We have now successfully integrated the Flutter screens into your Native Android application.

But wait, how can you come back to your native application? To achieve this, we need to update your Flutter Module to close the FlutterActivity.

Step 4: Create a Helper Class called CloseFlutterModuleHelper in Your Flutter Module
class CloseFlutterModuleHelper {
// Create a static constant MethodChannel instance with a specific channel name.
static const methodChannel = MethodChannel('com.mobisoft.FlutterNativeModuleApp');
// Private constructor to prevent direct instantiation of the class.
CloseFlutterModuleHelper._privateConstructor();


// A static method to close a Flutter screen using platform-specific code.
static Future closeFlutterScreen() async {


try {
if (Platform.isAndroid) {
// Close the FlutterActivity started from Android application
SystemNavigator.pop();
} else {
// Invoke a method named 'dismissFlutterModule' on the MethodChannel of iOS.
await methodChannel.invokeListMethod('dismissFlutterModule');
}



} on PlatformException catch (e) {
// If an exception occurs during method invocation, print the error.
debugPrint(e.toString());
}
}
}
Code language: JavaScript (javascript)
Here’s what the above code does:

We have created a CloseFlutterModuleHelper class. Its purpose is to close the Flutter screen.
MethodChannel instance named methodChannel is created. This channel is used for communication between Dart code and platform-specific code. The channel name ‘com.mobisoft.FlutterNativeModuleApp‘ identifies the channel and should match the channel set up on the platform side.
The closeFlutterScreen method is defined as a static method. It is responsible for initiating the process to close a Flutter screen using platform-specific code. Inside the closeFlutterScreen method, there’s a try block. Within this block, the methodChannel is used to invoke a method named ‘dismissFlutterModule’. If the platform is Android, it uses SystemNavigator.pop() to close the current screen. This is an Android-specific way of closing the current screen or activity. If the platform is not Android (implying it’s another platform like iOS), the code within the other block is executed.
Step 5: Generate the AAR file again following Step 1 and update it in your Android Project.
After implementing the modifications described in Step 4, please remember to regenerate the Android Archive file (AAR). Afterward, integrate this updated AAR into your Android project. Once this is done, you should be able to successfully close the Flutter module when the user clicks on the close button.

Summing It Up
I hope you enjoyed this tutorial on How to add screens designed in Flutter into Your Android App. To download the code for this app, please click here.

Parts 1 and 2 of this tutorial series aim to provide you with valuable insights and guidance for crafting exceptional apps. The combination of Flutter and Android enables you to build visually appealing and highly functional applications. Please feel free to contact me if you have any questions or feedback.

If you need expert assistance in your app development initiatives or want to bring your unique app idea to life, our Flutter app development services are at your disposal. Our team of skilled Flutter developers and designers are knowledgeable in the latest trends and technologies, including Flutter layered architecture, Dart language, and language-specific functionalities. We are ready to collaborate with you and guide you through this transformative journey.

More About the Author

Mobisoft Infotech: A global leader in digital innovation and technology adoption. Specializing in Mobile, Cloud, DevOps, Web, IoT, AI, UI/UX, Testing, RPA, and digital transformation services. Over a decade of experience, serving clients in 30+ countries.

Total Views: 49Word Count: 1811See All articles From Author

Add Comment

Technology, Gadget and Science Articles

1. Comprehensive Fire Safety Solutions In Uae: Trusted Expertise By Global Alarms
Author: Global Alarms Safety & Security Equipment LLC

2. The Future Of Customer Browsing: A Guide To Co-browsing Solutions
Author: Jesvira

3. The Role Of Virtual Reality Consulting In Accelerating Digital Transformation
Author: omie84

4. Netflix Clone Script For Custom Video Streaming Platforms By Netflix Clone Script:
Author: Zybertron

5. Create A Capable Food Delivery App With The Top Development Organization
Author: Elite_m_commerce

6. How To Buy Textnow Accounts Safely And Securely: A Comprehensive Guide
Author: Bulk Account Buy

7. Improve Customer Communication Through A Dedicated Virtual Call Answering Service!
Author: Eliza Garran

8. Turning Raw Data Into Actionable Insights With The Art Of Visualization
Author: Digiprima

9. Mastering Sharepoint Migration
Author: Xanthe Clay

10. An Rise Digital Engagement By Developing Progressive Web Apps
Author: Elite_m_commerce

11. How To Build An Astrology App Like Astrotalk
Author: Deorwine Infotech

12. Maximise Your Online Presence With Odoo Website Builder
Author: Alex Forsyth

13. Track Market Trends With Zapkey Real Estate Data Scraping
Author: Devil Brown

14. Native Vs Hybrid Apps: Making The Right Choice For Your Mobile App Development
Author: calistabennet

15. Only 41 Percent Of Businesses Have Programs In Place To Hire More Women In Tech, According To Isaca Research
Author: Madhulina

Login To Account
Login Email:
Password:
Forgot Password?
New User?
Sign Up Newsletter
Email Address: