Integrate Flutter module into iOS project
Tags: flutter
Published: 2022-03-25 15:54:18

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


## iOS Project
1) เปิด Xcode แล้วสร้างโปรเจ็ค iOS App
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ixizjm0fghtd0flitcn.png)

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

2) ปิด Xcode แล้วไปที่ Terminal ติดตั้ง cocoapods (สำหรับคนที่ยังไม่มี)
```
brew install cocoapods
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnjlpcd7ima6eavkawlw.png)

3) เข้าไปใน iOS App ไดเร็กทอรี่ แล้วรันคำสั่ง pod init จะได้ Podfile มา
```
cd IosApp
pod init
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bfhfpvwra9h90o2ap62.png)

4) แก้ไข Podfile เพิ่มโค้ดดังนี้
```
flutter_application_path = '../flutter_counter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2branfcvszv7rjo4eny0.png)

5) เพิ่มโค้ดเข้าไปใน target ดังนี้
```
install_all_flutter_pods(flutter_application_path)
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewookeat2mmckgtdxkqw.png)

6) เซฟไฟล์แล้วกลับไปที่ Terminal แล้วรันคำสั่ง
```
pod install
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhnrehufxh6nctyfxhpi.png)

7) ในไดเร็กทอรี่จะได้ไฟล์โปรเจ็คใหม่ นามสกุล *.xcworkspace ต่อจากนี้ให้เปิดโปรเจ็คด้วยตัวนี้แทน *.xcodeproj
```
open IosApp.xcworkspace
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fm1pobemmildicmccds6.png)

8) เปิดไฟล์ AppDelegate.swift แล้วเพิ่ม import
```swift
import Flutter
import FlutterPluginRegistrant
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuv4b3wwkmm6ri4z56u0.png)

9) เปลี่ยน inherit จาก UIResponder, UIApplicationDelegate เป็น FlutterAppDelegate แทน
```swift
class AppDelegate: FlutterAppDelegate
```

10) เพิ่มโค้ดสร้าง FlutterEngine
```swift
lazy var flutterEngine = FlutterEngine(name: "my flutter engine")
```

11) เพิ่ม override หน้าฟังชั่น application ตัวแรก แล้วลบตัวอื่นให้หมด
```swift
override func application
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrnh6wm7771tuifzm6vv.png)

12) เพิ่มโค้ดเข้าไปที่ฟังชั่น application
```swift
flutterEngine.run()
GeneratedPluginRegistrant.register(with: self.flutterEngine)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5jc7wz5uc1ccjq6opy5.png)


## Adding a Flutter screen to an iOS app
1) เปิด Main.storyboard สร้างปุ่มให้กับหน้า ViewController แล้วสร้าง Action ให้กับปุ่ม

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

2) เพิ่มโค้ดเข้าไปที่ Action เพื่อเรียก Flutter Module
```swift
import Flutter
```
```swift
let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine
let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
present(flutterViewController, animated: true, completion: nil)
```

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

3) รันโปรเจ็คทดสอบกดปุ่มเพื่อเรียก Flutter Module ขึ้นมาทำงาน

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


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