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

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

系列文章目录

1.Flutter混合开发入门指南

目录

一、三端分离模式

二、创建Flutter module的步骤

1.AS创建

2.命令行创建

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

1.项目源码方式引入

2.aar包引用

三、其他注意事项:

四、试试效果



一、三端分离模式

Flutter开发踩坑记录一:Flutter混合开发入门指南_第1张图片

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

二、创建Flutter module的步骤

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

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

1.AS创建

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

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

Flutter开发踩坑记录一:Flutter混合开发入门指南_第2张图片

Flutter开发踩坑记录一:Flutter混合开发入门指南_第3张图片

Flutter开发踩坑记录一:Flutter混合开发入门指南_第4张图片

2.命令行创建

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

some/path/MyApp

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

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

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


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

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

1.项目源码方式引入

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

flutter_lib是我创建的项目名字

// Include the host app project.
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutter_lib/.android/include_flutter.groovy'
))
include ':flutter_lib'
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:

dependencies {
    ...
    ...

    implementation project(':flutter')
}

注意!

注意!

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

2.aar包引用

cd some/path/my_flutter
flutter build aar

2.1 AS生成aar

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

Build > Flutter > Build AAR

Flutter开发踩坑记录一:Flutter混合开发入门指南_第5张图片

三、其他注意事项:

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

allprojects {
    repositories {
        google()
        mavenCentral()
        maven {
            allowInsecureProtocol true
            url "http://download.flutter.io"
        }
    }
}

3.2  flutter只支持三种cpu架构:

android {
  //...
  defaultConfig {
    ndk {
      // Filter for architectures supported by Flutter.
      abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86_64'
    }
  }
}

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

android {
  //...
  compileOptions {
    sourceCompatibility 1.8
    targetCompatibility 1.8
  }
}

四、试试效果

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


尝试启动flutter页面:

import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import com.suning.xd.shopkeeper.R
import io.flutter.embedding.android.FlutterActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        findViewById

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

Flutter开发踩坑记录一:Flutter混合开发入门指南_第6张图片

你可能感兴趣的:(Flutter踩坑记录,flutter,android)