Flutter添加到現(xiàn)有項目

Flutter 添加到現(xiàn)有項目 (Android)

最近一直在看Flutter 的內容, 加上近期更新的Flutter1.12 有一些Flutter 的api 發(fā)生了改變, 所以 某些和android 交互的地方 就發(fā)生了變化
比如開始使用的新的插件api 舊的 PluginRegistry.Registrar 不會立即被棄用, 而使用了新的FlutterPlugin, FlutterActivity 的 從io.flutter.app.FlutterActivity 到 io.flutter.app.FlutterActivity

接下來 就是 添加到現(xiàn)有項目步驟 基于androdx

1. 創(chuàng)建一個原生的Android項目

直接通過AndroidStudio 創(chuàng)建一個androd 項目

2. 然后在AS 中 通過 new Project 選擇 FlutterModule 創(chuàng)建一個Flutter module 創(chuàng)建的時候記得 勾選androidx
3. 再 androd項目中 app 下 build.gradle 中添加
android{
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }
}  

然后 再setting.gradle 中添加


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

編譯
然后成功之后再android 項目中的 build.gradle 中添加

    implementation project(path: ':flutter')

編譯

調整Flutter 庫中關聯(lián)的.android 中的flutter 的庫 中的build.gradle 的 compileSdkVersion minsdkVersion 以及 targetSdkVersion和主項目保持一致 ,

我用的是 在acticity 中 添加FlutterFragement
首先 Activity 繼承 FragmentActivity

對了如果 Android 項目中是androdx 的話 需要再 Flutter項目中修改 pubspec.yaml
moudule 下的 androidX 是否為true;

接下來是我 Flutter 項目中的代碼 就是 官方生成的代碼 自己稍微改了下


import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const platform = const MethodChannel("com.battery.io/battery");

  String _battery = "獲取電池電量";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
             _battery
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _getBatteryLevel,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Future<Null> _getBatteryLevel() async {
    String battery = "獲取電池電量";

    try {
      int result = await platform.invokeMethod("getBatteryLevel");

      battery = "獲取到的電量 $result";
    } on PlatformException catch (e) {


      // 未獲取到電池電量
      battery = "未獲取到電池電量";


    }


    setState(() {
      _battery = battery;
    });
  }
}

其實 這篇文章主要就是記錄了 fragment 和flutter 的交互

此處寫了一個方法 通過Flutter 中的方法來調用 android 中的方法
我是通過 android 中添加一個Fragment 來加載Flutter 的界面

先上代碼
--> Activity


package com.storm.stormandflutterdemo

import android.app.Activity
import android.content.Intent
import android.os.Bundle
import androidx.fragment.app.FragmentActivity
import com.storm.stormandflutterdemo.Utils.LogUtils
import com.storm.stormandflutterdemo.flutterplugin.BatteryPlugin
import io.flutter.embedding.android.FlutterFragment
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.embedding.engine.FlutterEngineCache
import io.flutter.embedding.engine.dart.DartExecutor

class CustomActivity : FragmentActivity() {


    companion object {


        val TAG_FLUTTER_FRAGMENT = "flutter_fragment"

        val TAG = "CustomActivity"

        fun startSelf(activity: Activity) {

            var intent = Intent(activity, CustomActivity::class.java)
            activity.startActivity(intent)
        }
    }

    var flutterFragment: FlutterFragment? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_custom)
        startFlutter()
    }


    private fun startFlutter() {


        initPlugin()
        
        
        var fm = supportFragmentManager


        flutterFragment =
            fm.findFragmentByTag(MainActivity.TAG_FLUTTER_FRAGMENT) as FlutterFragment?


        if (flutterFragment == null) {


            var newFlutterFragment =  FlutterFragment.withCachedEngine("my_flutter").build<FlutterFragment>()


            flutterFragment = newFlutterFragment


            fm.beginTransaction()
                .add(R.id.fl_content, flutterFragment!!, MainActivity.TAG_FLUTTER_FRAGMENT).commit()



            LogUtils.d(TAG, "是否未null ? -->  ${null == flutterFragment}")



            flutterFragment!!.onAttach(this)

        }


    }


    private fun initPlugin() {



        var flutterEngine = FlutterEngine(this)

        flutterEngine.dartExecutor.executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault())

        FlutterEngineCache.getInstance()
            .put("my_flutter",flutterEngine)

        BatteryPlugin.registerWith(flutterEngine)


    }


    override fun onResume() {
        super.onResume()

    }
}

此處 有個問題 就是我當時再創(chuàng)建FlutterFragment 總是爆紅 開始的時候 發(fā)現(xiàn)導入的包不一樣
FlutterFragment 用的是 v4包
而我用的是androidx 的包 , 其實我可以改成v4包的 但是考慮到以后 api 29 以后 的 會維護androidX 而放棄androd v4 v7 各個版本的維護 所以自己就鉆牛角尖 , 索性都換成androdX 的去尋找方法
查過來查過去 FlutterFragment 的繼承的Fragment 始終是v4 包下的Fragment 即使我刪除了這個FlutterModule 重新創(chuàng)建的開始勾選了androidX 還是 v4包 , 在Android項目中 中 還是爆紅...
媽蛋 結果就是 我試著運行 竟然正常運行 ... enen . 這邊還爆紅 也Flutter 加載出來了 .........###Fuck說

另一方面就是 Flutter1.12 以后更換了api 因為我也是最近開始看 , 有的地方不是很懂 各位大神覺得有什么不對的地方 留言一起討論共同進步, 之前的如果要加載插件 , 就是在當前的activity 或者是fragement 中 注冊 傳入 PluginRegistry.Registrar 記得之前的 FlutterActivity 或者FlutterFragment 都實現(xiàn)了 這個接口, 所以直接傳入this 拿到activity 的引用 , 不過在1.12 之后 改成了新的 直接 傳入 FlutterEngine 來注冊交互的插件 ,
其實initPlugin 這個方法 放入 Application 中也可以 通過一個tag , 然后 創(chuàng)建 FlutterFragment 的時候通過tag 來創(chuàng)建 , 然后插件注冊

插件-->

package com.storm.stormandflutterdemo.flutterplugin

import androidx.annotation.Keep
import androidx.annotation.NonNull
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.embedding.engine.plugins.shim.ShimPluginRegistry
import io.flutter.plugin.common.MethodChannel
import java.lang.reflect.Method

/**
 *
 * @author storm_z
 * @date @{DATE}
 * @email zq329051@outlook.com
 *
 * @Describe
 */
@Keep
object BatteryPlugin {

    public const val CHANNEL  = "com.battery.io/battery"




    fun registerWith(@NonNull flutterEngine: FlutterEngine){

        val shimPluginRegistry = ShimPluginRegistry(flutterEngine)

        val registrar = shimPluginRegistry.registrarFor("com.battery.io")

        val context = registrar.activeContext()

        val channel = MethodChannel(registrar.messenger(), CHANNEL)

        var value = 0 ;
        channel.setMethodCallHandler { call, result ->



            when(call.method){

                "getBatteryLevel" -> {

                    value += 20
                    result.success(value)
                }
            }
        }


    }

}

.. 最后運行 成功了
這次 主要是想要吧Flutter 放入到android 的Fragment 中來嘗試 , 看了很多博客 和官方文檔 都是介紹怎么在Fragment 中使用但是交互方面 都是1.12 版本之前的 , 或者說在FlutterActivity 中 的 , 所以 自己在搗鼓出來之后就記錄一下 然后有什么問題 一起討論 共同進步 很少寫這個 以后慢慢規(guī)范 . 去嘗試FlutterView了 ......

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末涩哟,一起剝皮案震驚了整個濱河市索赏,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌贴彼,老刑警劉巖潜腻,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異器仗,居然都是意外死亡融涣,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門精钮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來威鹿,“玉大人,你說我怎么就攤上這事轨香『瞿悖” “怎么了?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵臂容,是天一觀的道長科雳。 經常有香客問我根蟹,道長,這世上最難降的妖魔是什么炸渡? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任娜亿,我火速辦了婚禮,結果婚禮上蚌堵,老公的妹妹穿的比我還像新娘。我一直安慰自己沛婴,他們只是感情好吼畏,可當我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著嘁灯,像睡著了一般泻蚊。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上丑婿,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天性雄,我揣著相機與錄音,去河邊找鬼羹奉。 笑死秒旋,一個胖子當著我的面吹牛,可吹牛的內容都是我干的诀拭。 我是一名探鬼主播迁筛,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼耕挨!你這毒婦竟也來了细卧?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤筒占,失蹤者是張志新(化名)和其女友劉穎贪庙,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體翰苫,經...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡止邮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了革骨。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片农尖。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖良哲,靈堂內的尸體忽然破棺而出盛卡,到底是詐尸還是另有隱情,我是刑警寧澤筑凫,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布滑沧,位于F島的核電站并村,受9級特大地震影響,放射性物質發(fā)生泄漏滓技。R本人自食惡果不足惜哩牍,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望令漂。 院中可真熱鬧膝昆,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至收叶,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間共苛,已是汗流浹背判没。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留隅茎,地道東北人澄峰。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像患膛,于是被迫代替她去往敵國和親摊阀。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內容