flutter混合开发 Android端

最近因公司需引入flutter到项目，进入大前端开发，本人就慢慢开始学习flutter混合开发，在项目中慢慢嵌入flutter，我原先是Android开发，所以先从Android端入手。

image.png

下面一步步讲解在原有的Android项目中嵌入flutter：

• 第一步：Android Studio 中新建flutter module （File -> New -> New Module -> Flutter Module -> Next -> Next -> Finish）

  
  
  image.png
  
  
  image.png

• 第二步：flutter module的pubspec.yaml文件中添加第三方都依赖，如下方我的代码演示：

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

  #https://pub.flutter-io.cn/packages/webview_flutter
  webview_flutter: ^2.0.10

  #https://github.com/Sky24n/fluintl
  fluintl: ^2.0.0

  #https://github.com/Sky24n/flustars
  flustars: ^2.0.1

  # https://github.com/flutter/plugins/tree/master/packages/url_launcher
  url_launcher: ^6.0.9

  # flutter_boost暂未兼容空安全，暂不引入
  # https://github.com/alibaba/flutter_boost
#  flutter_boost:
#    git:
#      url: 'https://github.com/alibaba/flutter_boost.git'
#      ref: 'v3.0-preview.9'

• 第三步：修改main.dart，添加路由进入不同页面：

void main(){
  runApp(MyApp(window.defaultRouteName));
}
class MyApp extends StatelessWidget {

  //获取方法通道
  static const platform = MethodChannel('com.mjb.kefang/navigation');

  late String mRouteName;

  MyApp(this.mRouteName);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: _MainEntrance(mRouteName),
    );
  }

  Widget _MainEntrance(String defaultRouteName) {
    print(defaultRouteName);
    String route,paramsJson;
    int index = defaultRouteName.indexOf('?');
    if(index == -1){
      route = defaultRouteName;
      paramsJson = '{}';
    }else{
      route = defaultRouteName.substring(0,index);
      paramsJson = defaultRouteName.substring(index + 1);
    }
    Map params = json.decode(paramsJson);
    switch (route){
      case 'flutter_web':
        //进入自定义的webview页面 
        return WebScaffold(
          title: params['title'],
          titleId: params['titleId'],
          url: params['url'],
        );
      case 'flutter_main':
      default:
        return MyHomePage(title: 'Flutter Demo Home Page');
    }
  }
}

• 第四步：在原Android项目中新建FlutterUIActivity 继承FlutterActivity(写完Activity记得在清单文件注册) ：

public class FlutterUIActivity extends FlutterActivity {

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        FlutterView flutterView = new FlutterView(this);
        //FlutterActivity 中能获取FlutterEngine
        FlutterEngine flutterEngine = getFlutterEngine();
        //进入百度的网址
        //flutterEngine.getNavigationChannel().setInitialRoute("flutter_web?{'title':'百度一下'，'url':'https://www.baidu.com'}");
        //进入flutter主页
        flutterEngine.getNavigationChannel().setInitialRoute("flutter_main");
        flutterEngine.getDartExecutor().executeDartEntrypoint(
                DartExecutor.DartEntrypoint.createDefault()
        );
        // 关键代码，将Flutter页面显示到FlutterView中
        flutterView.attachToFlutterEngine(flutterEngine);
        //用FlutterView替代Activity的ContentView
        setContentView(flutterView);
    }

• 第五步：在Android主项目的setting.gradle文件中添加如下的代码,这一步是引用flutter工程（flutter_module是你的flutter模块名）：

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

• 第六步： 在app的build.gradle下添加如下代码：

    debugImplementation project(':flutter')
    profileImplementation project(':flutter')
    releaseImplementation project(':flutter')

或者：

    implementation project(':flutter')

然后就可以开始编译项目了，如果遇到flutter编译不过的问题，可以重启Android studio试试
IOS将后续完善

image.png