DEV Community

Cover image for Integrate Flutter module into Android project
codebangkok
codebangkok

Posted on • Edited on

Integrate Flutter module into Android project

ขั้นตอนวิธีนำเอา Flutter ที่สร้างเป็น Module เพื่อเป็นส่วนหนึ่งใน Android Project ให้ทำงานร่วมกันเป็น Mini App
Image description
Image description
Android Studio Bumblebee | 2021.1.1 Patch 2
Flutter 2.10.3 | Dart 2.16.1 | DevTools 2.9.2

Flutter Module

1) สร้างโปรเจ็ค Flutter เป็นชนิด Module

flutter create -t module flutter_counter
Enter fullscreen mode Exit fullscreen mode

Image description

2) เข้าไปใน flutter_counter แล้วบิ้วแบบ aar (Android Archive) เปิดหน้าจอนี้ไว้ เพื่อจะก๊อปปี้โค้ด

cd flutter_counter
flutter build aar
Enter fullscreen mode Exit fullscreen mode

Image description

Android Project

1) สร้าง Android Project แบบ Basic Activity
Image description

2) ก๊อปปี้โค้ดที่ได้มาจากการ build ของ flutter

String storageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?:
      "https://storage.googleapis.com"
Enter fullscreen mode Exit fullscreen mode

Image description

3) นำโค้ดไปวางไว้ที่ settings.gradle
Image description

4) ก๊อปปี้โค้ดที่ได้มาจากการ build ของ flutter

maven {
    url '/Users/bond/codebangkok/flutter_counter/build/host/outputs/repo'
}
maven {
    url "$storageUrl/download.flutter.io"
}
Enter fullscreen mode Exit fullscreen mode

Image description

5) นำโค้ดไปวางไว้ที่ settings.gradle ใน repositories กดเซฟ แล้วกดปุ่ม Sync Now

Image description

6) ก๊อปปี้โค้ดที่ได้มาจากการ build ของ flutter

debugImplementation 'com.example.flutter_counter:flutter_debug:1.0'
profileImplementation 'com.example.flutter_counter:flutter_profile:1.0'
releaseImplementation 'com.example.flutter_counter:flutter_release:1.0'
Enter fullscreen mode Exit fullscreen mode

Image description

7) นำโค้ดไปวางไว้ที่ build.gradle (Module) ใน dependencies
Image description

8) ก๊อปปี้โค้ดที่ได้มาจากการ build ของ flutter

profile {
    initWith debug
}
Enter fullscreen mode Exit fullscreen mode

Image description

9) นำโค้ดไปวางไว้ที่ build.gradle (Module) ใน buildTypes กดเซฟ แล้วกดปุ่ม Sync Now
Image description

10) เพิ่ม activity ที่ AndroidManifest.xml

<activity
    android:name="io.flutter.embedding.android.FlutterActivity"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize"/>
Enter fullscreen mode Exit fullscreen mode

Image description

Test Open Flutter Module

ทดลองเปิด flutter module ด้วยการกดปุ่ม
1) เปิดไฟล์ FirstFragment ไปทำกันที่อีเว้น onClick โดยไป comment code เดิมออกแล้วใสโค้ดเรียก Flutter Module ดังนี้

startActivity(FlutterActivity
        .withNewEngine()
        .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.transparent)
        .build(getContext()));
Enter fullscreen mode Exit fullscreen mode

Image description

2) รันโปรเจ็ค Android เพื่อทดสอบการทำงาน กดปุ่ม Next เพื่อเปิด Flutter Module
Image description

Image description

ติดตามผลงานได้ที่

Top comments (0)