安卓和Flutter混合开发(原生调用flutter)

一,安卓和Flutter相关联

首先app内的gradle引入flutter库

implementation project(':flutter')

引入java8代码

compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

然后settings.gradle中加入以下代码 flutter_module 是下面将要创建的fluttermoudle的名字,以后会提到

setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutter_module/.android/include_flutter.groovy'
))

好 现在安卓代码的初始工作完成了,下面来创建fluttermodel
选择File->New->New Flutter Project 然后会出现以下情况,选择Flutter Module


16110198.png

Project name中的flutter_module还记得嘛 这里如果改成别的名字 上面也需要修改


1611020040(1).png

注意
Project location 这里的flutter moudle的路径一定要和咱们的安卓项目同级目录,就是下边这样

1611020696(1).png

好了 现在切换到android代码 中 点击Sync Now 现在已经安卓项目中已经成功引入新建的flutter_moule了 两者关联成功,就像下边这样子


1611056081(1).png

二,安卓和Fluttert通讯

首先,把下边的代码复制到app的清单文件中,FlutterActivity是flutter提供的一个用于原生加载flutterView的一个页面

<activity
            android:name="io.flutter.embedding.android.FlutterActivity"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:theme="@style/AppTheme"
            android:windowSoftInputMode="adjustResize" />

现在已经可以跳转了,先来个最简单的跳转,在自己的MainActivity放上这个代码

Button btn;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       
       btn = findViewById(R.id.btn);
       btn.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
              //最简单的跳转flutter页面,并不能指定跳转的页面,如果手机不好 还有可能会卡顿(卡不卡顿要在正式包才能测试出来,debug包永远会卡顿)
               startActivity(FlutterActivity.createDefaultIntent(MainActivity.this));

           }
       });
   }

看一下效果


fe69bc8a5771fc3d748aa00d03f20ce.jpg

点击按钮,跳转到下面的页面


da4aca45892ece163d02cc180ee483d.jpg

好吧,有人会说了,我如果想指定的flutter页面怎么办呢,卡顿的的问题怎么解决呢?往下看!!!

下面我们原生代码的意思是跳转到一个routerPage的flutter页面,并在跳转之前进行了预加载

//创建flutter发动机
                FlutterEngine flutterEngine = new FlutterEngine(MainActivity.this);
                //指定想要跳转的flutter页面 这里要和下图对应上 记住他
                flutterEngine.getNavigationChannel().setInitialRoute("routerPage");
                flutterEngine.getDartExecutor().executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault());

                //这里做一个缓存 可以在适当的地方执行他 比如MyApp里 或者未跳转flutterr之前 在flutter页面执行前预加载
                FlutterEngineCache flutterEngineCache = FlutterEngineCache.getInstance();
                //缓存可以缓存好多个 以不同的的id区分
                flutterEngineCache.put("default_engine_id", flutterEngine);
                
                //上面的代码一般在执行跳转操作之前调用 这样可以预加载页面 是的跳转的时候速度加快
                
                //跳转页面
                startActivity(FlutterActivity.withCachedEngine("default_engine_id").build(MainActivity.this));

emmm 当然 我们需要在flutter代码中做一些操作,最少要创建一个routerPage页面对吧

class MyRouterPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyRouterState();
  }
}

class MyRouterState extends State<MyRouterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我是routerPage'),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Text('routerPage'),
      ),
    );
  }
}

看,MyRouterPage 简单吧,然后关键的一步来了,创建一个函数

Widget getDefaultRouter() {
  String router = window.defaultRouteName;//还记得我们上边的routerPage嘛, 这个东西就是我们传进来的字符串,我们可以根据这个字符串来决定加载那个flutter页面
  if (router == 'routerPage') {
    return MyRouterPage();
  } else {
    return MyHomePage();
  }
}

然后我们用这个方法代替home


1611057963(1).png

完成了,我们现在点击按钮就可以跳转到MyRouterPage ,运行一下,看看效果


ae4a5ca28743930c11f27dec023ecfa.jpg

好!下班!周末再给写一篇原生和flutter的交互通信

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,165评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,720评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,849评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,245评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,596评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,747评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,977评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,708评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,448评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,657评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,141评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,493评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,153评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,890评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,799评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,685评论 2 272

推荐阅读更多精彩内容