• Flutter开发踩坑记录一:Flutter混合开发入门指南


    文章适合人群:有android app开发基础

    系列文章目录

    1.Flutter混合开发入门指南

    目录

    一、三端分离模式

    二、创建Flutter module的步骤

    1.AS创建

    2.命令行创建

    三、原生项目中引入flutter模块

    1.项目源码方式引入

    2.aar包引用

    三、其他注意事项:

    四、试试效果



    一、三端分离模式

     两种开发模式就不详细介绍了,三端分离模式为现在主流模式。使用三端分离模式Android端需要创建Flutter模块以module形式进行依赖,既可以在原有原生工程基础上进行拓展,也有利于项目管理。

    二、创建Flutter module的步骤

    两种创建方式(AS创建和命令行创建)

    两种方式没有区别,AS创建更方便些

    1.AS创建

    以当前最新版本AS为例(Android Studio Chipmunk)

    可能我的电脑性能差,创建过程有点卡,最后一步记得把 project type 换成 module

    2.命令行创建

    进入到原生android项目的同级目录,比如你的Android原生的项目路径是

    some/path/MyApp

    那就进入到 some/path 目录下面创建Flutter工程

    1. cd some/path/
    2. flutter create -t module --org com.example my_flutter

    上面命令中 module表示项目类型,org后参数就是组织名称,最后一个参数是flutter项目的名字


    三、原生项目中引入flutter模块

    也有两种方式,一种是把flutter模块打包成aar,已aar依赖的形式引入。第二种是项目源码方式引入(如果需要flutter和原生同时开发和调试,比较适合这种)

    1.项目源码方式引入

    找到原生主工程项目的setting.gradle文件,加入如下内容

    flutter_lib是我创建的项目名字

    1. // Include the host app project.
    2. setBinding(new Binding([gradle: this]))
    3. evaluate(new File(
    4. settingsDir.parentFile,
    5. 'flutter_lib/.android/include_flutter.groovy'
    6. ))
    7. include ':flutter_lib'
    8. project(':flutter_lib').projectDir = new File('../flutter_lib')

    这里我遇到了一个问题,Binding报红,AS提示导入包。这里先不要导入其他包。

    Binding是groovy-all.jar包中的类,由于我的项目依赖的gradle版本中缺少这个包导致报错,可以如下方式进行处理:

    C:\Users\username\.gradle\wrapper\dists\gradle-6.7-all\cuy9mc7upwgwgeb72wkcrupxe\gradle-6.7\lib

    下复制groovy-all-1.3-2.5.12.jar到

    C:\Users\username\.gradle\wrapper\dists\gradle-7.4.2-all\9uukhhbclvbegdvsww0j0cr3p\gradle-7.4.2\lib

    再重新打开项目

    之后,在主工程app项目下面的build.gradle文件中引入flutter module:

    1. dependencies {
    2. ...
    3. ...
    4. implementation project(':flutter')
    5. }

    注意!

    注意!

    这里引入的项目名字是 ':flutter' 而不是我们之前定义的flutter module的名字,千万别写错了!

    2.aar包引用

    1. cd some/path/my_flutter
    2. flutter build aar

    2.1 AS生成aar

    将创建的flutter module用AS在另一个窗口打开

    Build > Flutter > Build AAR

    三、其他注意事项:

    3.1 引入module成功之后,遇到依赖无法下载的情况,请在主工程的build.gradle中添加flutter用到的库的maven仓库:

    1. allprojects {
    2. repositories {
    3. google()
    4. mavenCentral()
    5. maven {
    6. allowInsecureProtocol true
    7. url "http://download.flutter.io"
    8. }
    9. }
    10. }

    3.2  flutter只支持三种cpu架构:

    1. android {
    2. //...
    3. defaultConfig {
    4. ndk {
    5. // Filter for architectures supported by Flutter.
    6. abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86_64'
    7. }
    8. }
    9. }

    3.3 flutter的android引擎使用了java 8 特性

    1. android {
    2. //...
    3. compileOptions {
    4. sourceCompatibility 1.8
    5. targetCompatibility 1.8
    6. }
    7. }

    四、试试效果

    在主工程的 AndroidManifest.xml 文件中加入如下activity:

    1. <activity
    2. android:name="io.flutter.embedding.android.FlutterActivity"
    3. android:theme="@style/LaunchTheme"
    4. android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    5. android:hardwareAccelerated="true"
    6. android:windowSoftInputMode="adjustResize"
    7. />

    尝试启动flutter页面:

    1. import android.os.Bundle
    2. import android.widget.Button
    3. import androidx.appcompat.app.AppCompatActivity
    4. import com.suning.xd.shopkeeper.R
    5. import io.flutter.embedding.android.FlutterActivity
    6. class MainActivity : AppCompatActivity() {
    7. override fun onCreate(savedInstanceState: Bundle?) {
    8. super.onCreate(savedInstanceState)
    9. setContentView(R.layout.activity_main)
    10. findViewById
    11. startActivity(
    12. FlutterActivity.createDefaultIntent(this)
    13. )
    14. }
    15. }
    16. }

    点击按钮跳转到以下页面,说明大功告成

  • 相关阅读:
    Linux命令:free命令
    直线导轨滑块的固定方式
    Java SE 22 新增特性
    QML(26)——多层qml界面传递信号
    最大数【贪心3】
    【postgresql 基础入门】数据表的查询基本知识,条件过滤、单列多列排序、按页浏览数据、数据去重,得到你想要的数据
    TCP/IP协议栈在内核态的好还是用户态的好
    《A DECODER-ONLY FOUNDATION MODEL FOR TIME-SERIES FORECASTING》阅读总结
    Web组态可视化编辑器 快速绘制组态
    A. Print a Pedestal (Codeforces logo?)
  • 原文地址:https://blog.csdn.net/u012218652/article/details/126499951