Flutter的安装与使用

Flutter安装

官网：https://flutter.io/get-started/install/

中文网：https://flutterchina.club/get-started/install/

一些具体细节（MAC）

1、获取Flutter SDK

(1) 在flutter官网下载页，下载最新可用的安装包

(2) 解压安装包到你想安装的目录，如：

cd ~/development
unzip ~/Downloads/flutter_macos_v0.9.4-beta.zip

从解压包的内容可以看到，提供了examples文件夹，可以学习一些Flutter的Demo

(3)为了方便后续开发，需要将安装解压包的bin路径添加环境变量PATH，例如在~/.bash_profile中加入

export PATH=$PATH:“你的flutter所在的文件夹路径”/flutter/bin

然后在命令行输入source .bash_profile生效

如果不能科学上网，那么在环境变量PATH中加入，让Flutter在安装过程中使用国内的镜像。

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

2、安装

运行以下命令查看是否需要其他依赖项，来完成安装

flutter doctor

我输出的结果是

[✓] Flutter (Channel beta, v0.9.4, on Mac OS X 10.12.4 16E195, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 8.1)
    ✗ Flutter requires a minimum Xcode version of 9.0.0.
      Download the latest version or update via the Mac App Store.
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[✓] Android Studio (version 3.2)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Community Edition (version 2017.2.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.16.1)
[✓] Connected devices (1 available)

从上面的信息可以看到

• Flutter的版本和信息
• Flutter运行所需的Android工具链，有些许可证没有接受，输入提示命令，点y确认
• Flutter运行所需的iOS工具链，不满足，现在主要用于Android，所以先不考虑
• AS、IDEA的Flutter插件没有安装，所以需要安装，因此需要配置AS或IDEA
• 有可用的连接设备

3、配置Android Studio的Flutter插件

• 打开插件选择项 Preferences > Plugins
• 选择Browse repositories，搜索Flutter插件并安装(同时自动按住Dart插件)

• 重启Android Studio后插件生效

这时候在命令行运行flutter doctor，可以看到AS已OK

[✓] Android Studio (version 3.2)

Flutter的初体验

1、创建新应用

（1）选择File>New Flutter Project

（2）选择Flutter Application作为project类型，然后点Next

（3）输入项目名称、Flutter SDK path（Flutter安装解压包得了路径），然后点击 Next

（4）点击 Finish，等待Android Studio安装SDK并创建项目。

在项目目录中，应用程序的代码位于lib/main.dart。

2、运行应用程序

这里有两种方式：

方式（1）：定义工具栏的Run图标

方式（2）：在Terminal输入命令flutter run

运行正常后，就可以在设备看到启动的应用程序

3、体验热重载

将Demo的文案修改一下，然后调用Save All（cmd+s），就可以立即在设备看到更新后的文案

或者点击工具栏的闪电⚡️按钮

遇到的问题

编译错误

在点击Run运行应用程序时，遇到gradle编译错误

FAILURE: Build failed with an exception.

Where: Build file 'PROJECTPATH/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

解决方法是:

在Flutter的安装解压包里，…/flutter/packages/flutter_tools/gradle，修改flutter.gradle文件：

在第一行添加google()

gradle版本改为“3.2.1”

更进一步

1、官网

Learn more

了解更多

2、玉刚说公众号系列文章

熟悉Dart语言

UI布局和控件

交互、手势和动画

文件、存储和网络

参考

https://flutter.io/get-started/install/

https://flutterchina.club/get-started/install/

Flutter 安装和初体验