美文网首页Android学习记录
Android Native 项目集成Flutter Modul

Android Native 项目集成Flutter Modul

作者: 旺仔_100 | 来源:发表于2020-10-11 17:32 被阅读0次

首先创建一个Android原生项目,然后可以选择直接创建一个Flutter Project (选择Flutter Module),也可以直接创建一个 New Module(选择Flutter Module)。前者是需要自己手动在Android项目中依赖的,后者则是直接依赖在当前Android项目中的。新手建议后者。

一、在首页直接显示Flutter页面,直接把MainActivity继承io.flutter.embedding.android.FlutterActivity,这个包下是最新的FlutterActivity。

package com.example.nativeandflutterdemo

import android.os.Bundle
import io.flutter.embedding.android.FlutterActivity

class MainActivity : FlutterActivity() {

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

二、首页是原生的Activity ,在里面点击按钮在跳转到Flutter界面。
startActivity(Intent(this@MainActivity,FlutterActivity::class.java))
或者startActivity(FlutterActivity.createDefaultIntent(this))
需要注意的是一定要在AndroidManifest里面注册FlutterActivity

<activity android:name="io.flutter.embedding.android.FlutterActivity"/>
 
package com.example.nativeandflutterdemo

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView
import io.flutter.embedding.android.FlutterActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        var tv = findViewById<TextView>(R.id.tv)
        tv.setOnClickListener {
//          startActivity(FlutterActivity.createDefaultIntent(this))
            startActivity(Intent(this@MainActivity,FlutterActivity::class.java))
        }
    }
}

三、当有多个flutter页面的时候,需要从原生跳转到特定flutter页面

  • 先创建两个flutter界面
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class OnePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('这是 One 页面'),
      ),
    );
  }
}
import 'package:flutter/cupertino.dart';

class TwoPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(child: Text("two Page"),);
  }

}
  • 在main.dart中的MaterialApp中添加routes,注册路由。
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or press Run > Flutter Hot Reload in a Flutter IDE). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      routes: {
        "onePage": (context){
          return OnePage();
        },
        "twoPage":(context){
          return TwoPage();
        }
      },
    );
  }
}
  • MainActivity的跳转也需要修改一下
startActivity(FlutterActivity.withNewEngine()
                .initialRoute("twoPage")
                .build(this))

到此为止,Native跳转到原生就结束了。不过发现跳转会有黑屏,因为FlutterActivity创建会启动FlutterEngine。所以尽量少创建FlutterActivity。然后可以对FlutterEngine进行缓存。

  • 在Android 项目的Application中创建引擎(FlutterEngine)
class MyApplication : Application() {
    lateinit var flutterEngine: FlutterEngine

    override fun onCreate() {
        super.onCreate()
        flutterEngine = FlutterEngine(this)
        flutterEngine.dartExecutor.executeDartEntrypoint(
            DartExecutor.DartEntrypoint.createDefault()
        )
        FlutterEngineCache
            .getInstance()
            .put("engine_id", flutterEngine)
    }
}
  • 使用的时候通过缓存来获取引擎
startActivity(
    FlutterActivity
        .withCachedEngine("engine_id")
        .build(this)
)

相关文章

网友评论

    本文标题:Android Native 项目集成Flutter Modul

    本文链接:https://www.haomeiwen.com/subject/bqqepktx.html