[Android] 簡單將 Flutter 併入現有的 Android 專案步驟教學

簡單紀錄一下如何讓 Flutter 導入既有 Android 專案的教學，步驟十分簡短容易。

Flutter 是 Google 提供的跨平台方案，號稱做一個 App 可以套兩個平台：IOS 和 Android，
而且強調 App 仍然如同原生 UI 的操作體驗。身為持續開發原生 Android App 的程式設計師，當然不可能一下子就全部轉換成 Flutter，畢竟過往的經驗告訴我們，跨平台伴隨著許許多多的問題，故選擇混著開發也是不錯的選擇。

那麼就繼續往下閱讀吧！

開發環境

OS: Win 10
IDE: Android 3.3.2

Android Studio 安裝 Flutter

首先打開 Android Studio ，點選 File ，出現選單後點選 Setting。



接下來如圖標示數字順序執行 (點圖可放大)




1. 打開 Setting 後左邊測攔選擇 Plugins
2. 視窗下方選擇點選按鈕 Browse Repositories
3. 搜尋框找 flutter 點選
4. 按綠色按鈕 Install
5. 最後 OK 並重新開啟 Android Studio

這樣就安裝好 Flutter 了！



再來打開 Android Studio，左上點選 File >  New > New Flutter Project
選擇 Flutter Module 建立。

回到原生的 Android 專案，在 app 的 build.gradle，android {...} 加入以下程式碼。
sourceCompatibility 代表編譯 .java 的 jdk 的版本，targetCompatibility 確保 class 版本跟 jdk 一致。

compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }

然後在 dependencies 裡面加入

implementation project(':flutter')

接著到 setting.gradle 裡加入以下程式碼，路徑位置須調整成你的 Flutter module 的專案名稱，Sync 之後 Flutter module 就被加入了。

setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        '你的flutter module專案名稱/.android/include_flutter.groovy'
))

回到原生的 App 的 Activity 加入 Flutter view，這邊的範例 code 的 addContentView 必須是 AppCompatActivity 才能 call。getLifecycle() 也是。

val flutterView = Flutter.createView(this@MainActivity, lifecycle, "route1")
val frameLayout = FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
addContentView(flutterView, frameLayout)

在 Flutter module 的 main.dart 改寫成如下，兩邊都用 "route1" 對上要顯示的 view。

import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(chooseWidget(window.defaultRouteName));

Widget chooseWidget(String route) {
  switch (route) {
    case 'route1':
      return MyFlutterView();
    default:
      return Center(
        child: Text("Unknown Route"),
      );
  }
}

class MyFlutterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}
class HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Card(
        color: Colors.blue,
        child: Center(
          child: Text(
            "My Flutter View",
            style: TextStyle(color: Colors.white, fontSize: 25.0),
          ),
        ),
      ),
    );
  }
}

直接在原生的 App 執行 Run，就可以看到 Flutter view完美顯示在原生的 Android App了。

踩坑遇到錯誤

⇒ [Android] 既有原生專案導入 Flutter Module 兩大踩坑解決辦法

更多 Flutter 學習資源

⇒ Flutter X Dart 跨平台開發入門｜輕鬆打造原生應用App
⇒ Flutter 程式設計入門實戰 30 天

⇒ The Complete 2020 Flutter Development Bootcamp with Dart

Android Gradle 精進書籍

⇒ 巧用Gradle構建Android應用

感謝相關連結

https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps

相關 Android 教學一律會放在 Android 標籤分類，歡迎持續追蹤。

⇒ 點我看更多 Android 教學