在现有Android项目中集成Flutter

操作步骤

1. 在Android项目的同级目录执行命令创建flutter module

flutter create -t module <module_name>

2. 接着到flutter module的.android目录下，执行gradle命令(用来生成aar文件)，如果隐藏文件无法显示的话使用下面的命令。

defaults write com.apple.finder AppleShowAllFiles -bool true
cd <module_name/.android>
./gradlew assembleDebug

3. 在已存在的android项目的settings.gradle文件中添加下面的代码。

setBinding(new Binding([gradle:this]))
evaluate(new File(
    settingDir.parentFile,
    "<module_name>/.android/include_flutter.groovy"
))

在这步操作完之后sync项目之后会看到项目中多了一个flutter的module。

image.png

4. 在已存在的android项目中的app/build.gradle文件中的dependencies部分添加下面这行代码

implementation project(':flutter')

image.png

5. 在已存在项目中的Activity中添加FlutterView

//route1是在flutter代码中定义，用来确定显示哪个flutter view
var flutterView = Flutter.createView(this, lifecycle, "route1")
var frameLayout = FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
            addContentView(flutterView, frameLayout)
addContentView(flutterView, frameLayout)

6. 接着，在Android Studio中打开最开始创建的Flutter Module，然后在lib/main.dart项目中编写如下代码：

import 'package:flutter/material.dart';
import 'dart:ui';
import 'widget/study_feed_back.dart';

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

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

class StudyFeedbackView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Card(
        color: Colors.white,
        shape: RoundedRectangleBorder(),
        child: Center(
          child: Text("My Flutter View"),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          print("哈哈");
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

8. 最后运行最初的Android项目就能看到FlutterView已经被添加到了Android项目中。

补充

1. 如果要在使用Flutter热更新，直接在flutter module项目的目录下执行命令flutter attach，然后再更新flutter代码时，只有在命令行输入R，就可以实现热更新了，而不用重新运行项目