在现有Android项目中集成Flutter

操作步骤

  1. 在Android项目的同级目录执行命令创建flutter module
flutter create -t module <module_name>
  1. 接着到flutter module的.android目录下,执行gradle命令(用来生成aar文件),如果隐藏文件无法显示的话使用下面的命令。
defaults write com.apple.finder AppleShowAllFiles -bool true
cd <module_name/.android>
./gradlew assembleDebug
  1. 在已存在的android项目的settings.gradle文件中添加下面的代码。
setBinding(new Binding([gradle:this]))
evaluate(new File(
    settingDir.parentFile,
    "<module_name>/.android/include_flutter.groovy"
))

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


image.png
  1. 在已存在的android项目中的app/build.gradle文件中的dependencies部分添加下面这行代码
implementation project(':flutter')
image.png
  1. 在已存在项目中的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)
  1. 接着,在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),
      ),
    );
  }
}
  1. 最后运行最初的Android项目就能看到FlutterView已经被添加到了Android项目中。

补充

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

推荐阅读更多精彩内容