@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.activity_main);
FlutterView flutterView = Flutter.createView(this, getLifecycle(), “initialRoute”);
setContentView(flutterView);
}
}
createFragment方式：
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
//container为activity_main布局中的占位符FrameLayout
transaction.replace(R.id.container, Flutter.createFragment(“initialRoute”));
transaction.commit();
}
}
这样就将Flutter默认的首页加载到应用上了。
从上面两部分代码中我们可以看到都有一个 “initialRoute” 参数，这个参数是用来告诉Dart代码在Flutter视图中显示哪个小部件。下面我们就来修改module中的main.dart代码来加载我们自己的页面。
我们设置两个route，分别展示route1Widget，和route2Widget，当没有匹配的时候展示提醒文字。
import ‘package:flutter/material.dart’;
import ‘dart:ui’;
void main() => runApp(MyApp(
//通过window.defaultRouteName获取从native传递过来的参数,需要导入dart:ui包
initParams: window.defaultRouteName,
));
class MyApp extends StatelessWidget {
final String initParams;
MyApp({Key key, this.initParams}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Flutter_Android混合开发’,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(initParams: initParams),
);
}
}
class HomePage extends StatefulWidget {
final String initParams;
const HomePage({Key key, this.initParams}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: _widgetRoute(widget.initParams),
),
);
}
}
///路由转发
Widget _widgetRoute(String route) {
switch (route) {
case “route1”:
return route1Widget();
case “route2”:
return route2Widget();
default:
return notFoundWidget();
}
}
Widget route1Widget() {
return Center(
child: Text(
“this is route1Widget”,
style: TextStyle(color: Colors.red, fontSize: 20),
),
);
}
Widget route2Widget() {
return Center(
child: Text(
“this is route2Widget”,
style: TextStyle(color: Colors.blue, fontSize: 20),
),
);
}
Widget notFoundWidget() {
return Center(
child: Text(
“未匹配到路由111”,
style: TextStyle(fontSize: 40),
),
);
}
我们现在将加载Flutter时的initialRoute参数替换为 “route1”，那页面将加载route1Widget，替换为 “route2”，将加载route2Widget。否则将展示notFoundWidget。当然我们可以直接传路由参数，但是因为这个参数本身是一个字符串，所以我们可以来搞事情。比如传递一个json串，那么是不是可以做很多事呢？这里我就不贴demo了，因为和上面的逻辑基本一样，大家可以去试试看。
===========================================================================
大家在写纯Flutter应用的时候，知道是有热重启/重新加载功能的，但是在做混合开发的过程中，你会发现热重启/重新加载功能失效了。那么如何在混合开发中开启热重启/重新加载功能呢？
-
首先接入我们的设备或者模拟器
-
将我们的App关闭，退出后台，在terminal中运行 flutter attach命令
$ flutter attach
Waiting for a connection from Flutter on Android SDK built for x86…
此时就在等待设备的连接。这里要注意的是，如果电脑连接了多台设备需要使用 -d 命令来指定一台设备，参数为设备的id。
flutter?attach?-d?‘你的设备id’
- 然后启动我们的应用会看到控制台输出：
Done.
Syncing files to device Android SDK built for x86… 1,393ms
🔥 To hot reload changes while running, press “r”. To hot restart (and rebuild state), press “R”.
An Observatory debugger and profiler on Android SDK built for x86 is available at: http://127.0.0.1:59354/zRsDBfpesrk=/
For a more detailed help message, press “h”. To detach, press “d”; to quit, press “q”.
这样就表示我们连接成功了。在输出的日志中也告诉了我们如何使用热重启/重新加载功能。
在Terminal中输入以下命令?：?
r : 热加载；
R : 热重启；
h : 获取帮助；
d : 断开连接；
q : 退出；
这里的的 d 和 q 的命令都有退出调试，区别在于 d 命令只是单纯的断开而 q 命令会将应用退到后台。
===========================================================================
同样在混合开发过程中我们如何调试dart代码呢？
-
关闭我们的应用
-
点击Android Studio工具栏上的Flutter Attach按钮(需要安装Flutter与Dart插件)
- 启动我们的应用
接下来就可以像调试普通Flutter项目一样来调试混合开发模式下的Dart代码了。
=====================================================================
最后
对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长。而不成体系的学习效果低效漫长且无助。时间久了，付出巨大的时间成本和努力，没有看到应有的效果，会气馁是再正常不过的。
所以学习一定要找到最适合自己的方式，有一个思路方法，不然不止浪费时间，更可能把未来发展都一起耽误了。
如果你是卡在缺少学习资源的瓶颈上，那么刚刚好我能帮到你。以上知识笔记全部免费分享，如有需要获取知识笔记的朋友，可以点击我的GitHub免费领取。