【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 doctor
  
• 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

• 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

里面内容如下：

修改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 doctor

• 打开Android Studio，下载flutter插件
  

安装完成后重启使之生效。

可以看到，flutter安装时会顺便安装dart

3. Flutter和原生混合开发

3.1 集成flutter

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

• 打开原生项目所在目录，新建termimal窗口
  
  
• 输入命令

flutter create -t module flutter_module

创建完成后，在android studio下会出现以下目录结构

3.2 Android原生集成（非aar方式）

• 在android根目录setting.gradle里配置

setBinding(new Binding([gradle:this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutter_module/.android/include_flutter.groovy'
))

在app模块下的build.gradle里面添加flutter依赖
如果Binding飘红，则先删除上述代码，sync一下后再加入代码。

3.3 Android原生集成（aar方式）

• 新建Flutter项目
  
  
  
  创建完成后目录结构如下所示
  
• 调试写好的dart文件
  在项目级目录上点击右键->Flutter->Open Android module in Android Studio
  
  打开后Android模块的目录结构如下所示：
  
  
  直接点击run，它就会加载flutter项目下lib包里的入口页。就可以直接进行调试了。
• 打包aar
  打开Flutter项目，然后选择Build->Flutter->Build AAR
  
  
  
• 引入Android项目中
  打开你的安卓工程，将aar copy到libs目录下