【Flutter】Flutter安装和配置超详细(mac)

1. 下载Flutter

  • 打开网页https://flutter.dev/首页->Get started->macOs,下载flutter镜像文件。下载完成后解压,我的解压目录是/Users/yds/Library/Android/flutter
  • app store下载xcode,下载安装完成后,打开xcode,同意其协议。

2. 配置环境

可以去flutter中文网查看配置方法。

  • 在控制台输入vm .bahs_profile编辑文件,按i进入编辑模式,将下面内容配置到.bash_profile文件中
    export ANDROID_HOME=“/Users/用户名/Documents/android_sdk” //android sdk目录,替换为你自己的即可
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=/Users/yds/Library/Android/flutter/bin:$PATH
  • 输入完成后,按ESC键,然后在控制台输入:wq 退出并保存编辑,并刷新配置
source .bash_profile
  • 在控制台输入
flutter doctor

红叉叉表示需要配置到东西

  • cmdline-tools component is missing
    打开android studio,preference->android sdk
    【Flutter】Flutter安装和配置超详细(mac)_第1张图片
    勾选上图所示选项,并应用。下载完成后,再次在控制台输入flutter doctor
    【Flutter】Flutter安装和配置超详细(mac)_第2张图片
  • Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
    这个就比较简单了,直接在控制台输入以下内容,然后一路选y就行了
flutter doctor --android-licenses
  • CocoaPods not installed.
    在控制台输入以下内容,然后输入锁屏密码
sudo gem install cocoapods

【Flutter】Flutter安装和配置超详细(mac)_第3张图片

  • HTTP host https://maven.google.com/ is not reachable. Reason: An error occurred while checking the HTTP host: Operation timed out

打开如下目录文件

/Users/yds/Library/Android/flutter/packages/flutter_tools/gradle/flutter.gradle

里面内容如下:
【Flutter】Flutter安装和配置超详细(mac)_第4张图片

修改repositories里面的内容为:

maven { url 'https://maven.aliyun.com/repository/public' }
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'https://maven.aliyun.com/repository/central' }

【Flutter】Flutter安装和配置超详细(mac)_第5张图片

配置完成后,再次运行flutter doctor
【Flutter】Flutter安装和配置超详细(mac)_第6张图片

  • 打开Android Studio,下载flutter插件
    【Flutter】Flutter安装和配置超详细(mac)_第7张图片

安装完成后重启使之生效。
【Flutter】Flutter安装和配置超详细(mac)_第8张图片
可以看到,flutter安装时会顺便安装dart

3. Flutter和原生混合开发

3.1 集成flutter

在已经有原生工程的情况下,我们需要在同级目录创建 Flutter 模块,构建 iOS Android 各自的Flutter依赖库。我们只需要在原生项目的同级目录下,执行 Flutter 命令创建名为 flutter_library 的模块即可.

  • 打开原生项目所在目录,新建termimal窗口
    【Flutter】Flutter安装和配置超详细(mac)_第9张图片
    【Flutter】Flutter安装和配置超详细(mac)_第10张图片
  • 输入命令
flutter create -t module flutter_module

【Flutter】Flutter安装和配置超详细(mac)_第11张图片
创建完成后,在android studio下会出现以下目录结构
【Flutter】Flutter安装和配置超详细(mac)_第12张图片

3.2 Android原生集成(非aar方式)

  • 在android根目录setting.gradle里配置
setBinding(new Binding([gradle:this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutter_module/.android/include_flutter.groovy'
))

【Flutter】Flutter安装和配置超详细(mac)_第13张图片
app模块下的build.gradle里面添加flutter依赖
如果Binding飘红,则先删除上述代码,sync一下后再加入代码。

3.3 Android原生集成(aar方式)

  • 新建Flutter项目
    【Flutter】Flutter安装和配置超详细(mac)_第14张图片
    【Flutter】Flutter安装和配置超详细(mac)_第15张图片
    【Flutter】Flutter安装和配置超详细(mac)_第16张图片
    创建完成后目录结构如下所示
    【Flutter】Flutter安装和配置超详细(mac)_第17张图片
  • 调试写好的dart文件
    在项目级目录上点击右键->Flutter->Open Android module in Android Studio

    打开后Android模块的目录结构如下所示:
    【Flutter】Flutter安装和配置超详细(mac)_第18张图片
    【Flutter】Flutter安装和配置超详细(mac)_第19张图片
    直接点击run,它就会加载flutter项目下lib包里的入口页。就可以直接进行调试了。
  • 打包aar
    打开Flutter项目,然后选择Build->Flutter->Build AAR
    【Flutter】Flutter安装和配置超详细(mac)_第20张图片
    【Flutter】Flutter安装和配置超详细(mac)_第21张图片
    【Flutter】Flutter安装和配置超详细(mac)_第22张图片
  • 引入Android项目中
    打开你的安卓工程,将aar copy到libs目录下
    【Flutter】Flutter安装和配置超详细(mac)_第23张图片

你可能感兴趣的:(flutter,android)