Integrate Flutter module into Android project
Tags: flutter
Published: 2022-03-25 11:20:35

ขั้นตอนวิธีนำเอา Flutter ที่สร้างเป็น Module เพื่อเป็นส่วนหนึ่งใน Android Project ให้ทำงานร่วมกันเป็น Mini App
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8xori6rb9te185suijd.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sufjwht2q8ventqfylex.png)
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
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ne2dly6sl32482g662hh.png)

2) เข้าไปใน flutter_counter แล้วบิ้วแบบ aar (Android Archive) เปิดหน้าจอนี้ไว้ เพื่อจะก๊อปปี้โค้ด
```
cd flutter_counter
flutter build aar
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kbifpu54yqm9u877v1k.png)

## Android Project
1) สร้าง Android Project แบบ Basic Activity
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jeud5n1n9hq4ivm6tyo.png)

2) ก๊อปปี้โค้ดที่ได้มาจากการ build ของ flutter 
```
String storageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?:
      "https://storage.googleapis.com"
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0tqjtv9528fm8xvt1cv.png)

3) นำโค้ดไปวางไว้ที่ settings.gradle
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rw347aqv5k50p3b3dixk.png)

4) ก๊อปปี้โค้ดที่ได้มาจากการ build ของ flutter
```
maven {
    url '/Users/bond/codebangkok/flutter_counter/build/host/outputs/repo'
}
maven {
    url "$storageUrl/download.flutter.io"
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5vg0m4qv0tz84jtm8rw.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pawr1w67vwfxh6bxu5ub.png)

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'
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gv2dmsayf9tifuy5vnc.png)

7) นำโค้ดไปวางไว้ที่ build.gradle (Module) ใน dependencies
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0p2q58kyrxg7qtyq9b8t.png)

8) ก๊อปปี้โค้ดที่ได้มาจากการ build ของ flutter
```
profile {
    initWith debug
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0l4rn4poqefc3947d3t.png)

9) นำโค้ดไปวางไว้ที่ build.gradle (Module) ใน buildTypes กดเซฟ แล้วกดปุ่ม Sync Now
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwt7wdse8gtldy8pwo4f.png)

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"/>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mb9gj8ri54tk0ug3c5zx.png)

## Test Open Flutter Module
ทดลองเปิด flutter module ด้วยการกดปุ่ม
1) เปิดไฟล์ FirstFragment ไปทำกันที่อีเว้น onClick โดยไป comment code เดิมออกแล้วใสโค้ดเรียก Flutter Module ดังนี้
```
startActivity(FlutterActivity
        .withNewEngine()
        .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.transparent)
        .build(getContext()));
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eu0b97m5bblnspuk7sc2.png)

2) รันโปรเจ็ค Android เพื่อทดสอบการทำงาน กดปุ่ม Next เพื่อเปิด Flutter Module
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5vs3fi0vpusp19q990z.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vahcgv0blhk8z53oo1k0.png)

####ติดตามผลงานได้ที่
* **Page:** [https://fb.com/CodeBangkok​](https://fb.com/CodeBangkok​)
* **Group:** [https://fb.com/groups/msdevth​](https://fb.com/groups/msdevth​)
* **Blog:** [https://dev.to/codebangkok](https://dev.to/codebangkok)
* **YouTube:** [https://youtube.com/CodeBangkok](https://youtube.com/CodeBangkok)