Flutter视频系列图解Android原生集成FlutterModule

2.2 AndroidStudio 工具方式

用 AndroidStudio 尝试&＃xff0c;同样简单便利&＃xff1b;File -> New -> New Flutter Project -> Flutter Module&＃xff1b;

3. Android Project 中添加依赖

3.1 手动引入

1. 在 setting.gradle 中加入 Flutter 的引入&＃xff1b;

include ‘:app’
//加入下面配置
setBinding(new Binding([gradle: this]))
evaluate(new File(
settingsDir.parentFile,
‘my_flutter/.android/include_flutter.groovy’
))

2. 在 app/build.project 中添加 Flutter 依赖&＃xff1b;

implementation project(’:flutter’)

3.2 AndroidStudio 工具引入

可采用 Flie -> Sync Project with Grdle Files 时&＃xff0c;可通过 Import Flutter Module 方式引入&＃xff1b;此时若报 The Gradle files could not be updated automatically 则需要手动 3.1 操作&＃xff1b;

4. 原生与 Flutter 交互

Android 引用 Flutter 通常是两种&＃xff0c;一种是新建一个 View 用来展示 Flutter 页面&＃xff0c;另一种是 Fragment&＃xff1b;其本质还是将 Flutter View 作为 Android View 的子 View 展示&＃xff1b;

新建一个无标题栏的 FlutterActivity 和一个 FlutterFragment&＃xff0c;在 MainActivity 添加一个按钮跳转到 FlutterActivity 展示 FlutterFragment&＃xff1b;

public class FlutterActivity extends AppCompatActivity {
&＃64;
Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flutter);

getSupportFragmentManager().beginTransaction()
.replace(R.id.container, new FlutterFragment())
.commit();
}
}

public class FlutterFragment extends Fragment {
&＃64;Nullable
&＃64;Override
public View onCreateView(&＃64;NonNull LayoutInflater inflater,
&＃64;Nullable ViewGroup container,
&＃64;Nullable Bundle savedInstanceState) {
View rootView &＃61; inflater.inflate(R.layout.fragment_main, container, false);
getActivity().getSupportFragmentManager()
.beginTransaction()
.add(R.id.container, Flutter.createFragment("/"))
.addToBackStack(“flFlutter.createFragmentutter”)
.commit();

return rootView;
}
}

通过 Flutter.createFragment("/") 设置跳转路由&＃xff1b;

5. 签名打包

直接运行 debuge 模式一切正常&＃xff0c;只是在跳转 Flutter 时不如直接跳转原生流畅&＃xff0c;后期优化&＃xff1b;而打包成 release 包与 Android 原生相同&＃xff0c;无需特别处理 Flutter Module&＃xff1b;

注意事项

转原生流畅&＃xff0c;后期优化&＃xff1b;而打包成 release 包与 Android 原生相同&＃xff0c;无需特别处理 Flutter Module&＃xff1b;

注意事项