Flutter环境搭建

2019-05-09 本文已影响0人 LUJQ

Flutter中文网: https://flutterchina.club/

Flutter似乎是越来越火了，笔者作为一个移动端开发者好像必须得学了
😂。这里我只是关于macOS环境的Flutter环境搭建做个简单的分享，如有错误欢迎大家指出。

系统要求

要安装并运行Flutter，您的开发环境必须满足以下最低要求:

操作系统: macOS (64-bit)
磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间）.
工具: Flutter 依赖下面这些命令行工具.
bash, mkdir, rm, git, curl, unzip, which

获取Flutter SDK

由于一些flutter命令需要联网获取数据，如果您是在国内访问，由于众所周知的原因，直接访问很可能不会成功。上面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google为国内开发者搭建的临时镜像

所以我们使用google为国内开发者搭建的临时镜像。依次执行下列命令：

 export PUB_HOSTED_URL=https://pub.flutter-io.cn
 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
 git clone -b dev https://github.com/flutter/flutter.git
 export PATH="$PWD/flutter/bin:$PATH"
 cd ./flutter
 flutter doctor

执行完上述命令没有问题的话大概就是这样的：

屏幕快照 2019-05-09 上午10.40.23.png
上图问题提示显示：
（1）Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
按照提示，运行命令行：flutter doctor --android-licenses

屏幕快照 2019-05-24 下午1.11.41.png
然后一直输入y,就行。
（2）libimobiledevice and ideviceinstaller are not installed. To install with Brew,run:
意思是提示你安装brew,下面会讲到。

iOS 设置

安装 Xcode

安装Xcode 7.2或更高版本
配置Xcode命令行工具以使用新安装的Xcode版本

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

对于大多数情况，当您想要使用最新版本的Xcode时，这是正确的路径。如果您需要使用不同的版本，请指定相应路径。

确保Xcode许可协议是通过打开一次Xcode或通过命令

sudo xcodebuild -license

安装到iOS设备

要将您的Flutter应用安装到iOS真机设备，您需要一些额外的工具和一个Apple帐户，您还需要在Xcode中进行设置。

1. 安装 homebrew （如果已经安装了brew,跳过此步骤）.
  执行如下命令：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

运行这些命令来安装用于将Flutter应用安装到iOS设备的工具

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

如果这些命令中的任何一个失败并出现错误，请运行brew doctor并按照说明解决问题.

如果上述执行都没有问题的话，iOS设置算是完成了，下面来建第一个Flutter项目。
在你想要创建项目的路径下执行

flutter create flutterapp

flutterapp 为项目名，可自己更改。
然后项目创建完成，如下：

屏幕快照 2019-05-09 上午10.58.57.png

屏幕快照 2019-05-09 上午11.00.03.png

Android设置

下载并安装 Android Studio.
安装Flutter和Dart插件

屏幕快照 2019-05-09 上午11.04.32.png
屏幕快照 2019-05-09 上午11.05.13.png
屏幕快照 2019-05-09 上午11.05.29.png

现在呢我们就用Android Studio来创建我们的第一个flutter项目。
打开Android Studio，会发现多了一个 Start a new Flutter project

屏幕快照 2019-05-24 下午1.22.23.png

屏幕快照 2019-05-24 下午1.27.15.png

屏幕快照 2019-05-24 下午1.29.44.png
这里需要注意下上图:Flutter SDK path,是你Flutter SDK所在路径，不能选错了。Project name 全部小写

屏幕快照 2019-05-24 下午1.34.08.png

设置Android模拟器

要准备在Android模拟器上运行并测试您的Flutter应用，请按照以下步骤操作：

启动 Android Studio>Tools>AVD Manager 并选择 Create Virtual Device.
选择一个设备并选择 Next。

模拟器选好后，这里运行项目会遇到一个坑。
AS控制台会出现：

Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
* Error running Gradle:
ProcessException: Process "/Users/rabbit/develop/android/flutter_app/android/gradlew" exited abnormally:
Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/rabbit/develop/android/flutter_app/android/app/build.gradle' line: 25

* What went wrong:
A problem occurred evaluating project ':app'.
> Could not resolve all files for configuration 'classpath'.
   > Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2).
     Searched in the following locations:
         https://jcenter.bintray.com/com/android/tools/lint/lint-gradle-api/26.1.2/lint-gradle-api-26.1.2.jar

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 0s
  Command: /Users/rabbit/develop/android/flutter_app/android/gradlew app:properties

Finished with error: Please review your Gradle project setup in the android/ folder.

解决办法：

第一步：flutter>packages>flutter_tools>gradle>flutter_gradle

屏幕快照 2019-05-24 下午1.46.13.png
打开文件，修改成如下：

buildscript {
    repositories {
        //google()
        //jcenter()
        maven{
            url 'https://maven.aliyun.com/repository/google'
        }
        maven{
            url 'https://maven.aliyun.com/repository/jcenter'
        }
        maven{
            url 'http://maven.aliyun.com/nexus/content/groups/public'
        }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}

第二步：项目路径>android>build.gradle

屏幕快照 2019-05-24 下午1.46.13.png

打开文件，修改成如下：

buildscript {
    repositories {
        //google()
        //jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}

allprojects {
    repositories {
        //google()
        //jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
}

OK，这里环境就算是搭建完成了。

屏幕快照 2019-05-24 下午1.54.40.png

这是笔者关于Flutter环境搭建的简单分享，如有问题和错误，欢迎大家指出讨论。