flutter入门

[FrankKai]

听说flutter很赞，特地来入个门

• 安装
• 创建项目
• 安装apk并运行

[FrankKai]

安装

条件

macOS 64位，700MB磁盘空间（不含IDE/tools），支持bash, mkdir, rm, git, curl, unzip, which等命令。

SDK

下载SDK：https://storage.googleapis.com/flutter_infra/releases/beta/macos/flutter_macos_v0.10.2-beta.zip 解压SDK：unzip 添加临时bin：export PATH=$PATH:pwd/flutter/bin 添加永久bin：vim ~/.bash_profile; PATH=$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin

检查是否有未安装依赖

flutter doctor [-v]

对于一个web前端来说，android toolchain和ios toolchain都是缺少的，需要逐一安装配置，flutter促进了大前端潮流下移动端的统一。

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from:
      https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK
      components.
      (or visit https://flutter.io/setup/#android-setup for detailed
      instructions).
      If Android SDK has been installed to a custom location, set $ANDROID_HOME
      to that location.
      You may also want to add it to your PATH environment variable.

[!] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ 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 (not installed)
    • Android Studio not found; download from
      https://developer.android.com/studio/index.html
      (or visit https://flutter.io/setup/#android-setup for detailed
      instructions).

[!] IntelliJ IDEA Ultimate Edition (version 2018.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • For information about installing plugins, see
      https://flutter.io/intellij-setup/#installing-the-plugins

[!] Connected device
    ! No devices available

! Doctor found issues in 5 categories.

1.下载Android Studio。 2.配置Android licenses。

flutter doctor --android-licenses

正常情况下，会提醒有6个android SDK包没有获得license，逐一输入y即可。 3.下载xcode 通过app store安装的话，需要输入下面命令，让flutter doctor识别出来。

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

4.后面还要装一堆Xcode的package，根据提示安装即可。 5.安装android studio和idea的flutter插件和dart插件即可。

[FrankKai]

创建项目

创建flutter后，会生成一个包含android，ios，lib的包。 android基于gradle和java。 ios基于Object-C，文件名以.h结尾。 lib基于dart，包含main.dart这样的文件。 不是很懂这样的项目结构，但是flutter项目是否可以运行在android上，需要android studio连接到安卓设备。

如何安装安卓设备

1.手机开启开发者模式，并且允许usb debugging 2.连接电脑 3.检测是否有可用设备flutter devices

显示已经安装的设备：

OS105 • 2ed3a85a • android-arm64 • Android 7.1.1 (API 25)

当运行flutter出现下面提示时： Waiting for another flutter command to release the startup lock...

rm /Users/frank/Kit/flutter/bin/cache/lockfile

第一次使用Android Studio的话，可能需要在tools->android->SDK manager中，安装连接设备的SDK。 4.如何安装指定版本的Android SDK？ 点击左边的下载按钮即可，然后apply，之后需要手动重启idea，断开设备再重新连接。

Logcat中输出的是什么？ logcat 监视器既可以显示系统消息（例如何时发生了垃圾回收），也能显示您可以使用 Log 类添加到应用中的消息。 Error running 'main.dart':not implemented？ 暂时无解。 后知后觉：profile main.dart是对的，因为解析包失败所以报错。

5.使用AVD manager创建虚拟设备进行测试。

Test Drive中的demo没有跑起来，暂时未知原因，直接跳过，创建第一个自己的flutter app了。

GG，测试都通不过，后续肯定运行不了。可能是在安装相关依赖时出现了问题。

在天朝玩flutter，还是得走镜像：https://flutter.io/community/china。 一定要通过天朝模式安装flutter，不然很有可能报那个Error running 'main.dart':not implemented的错。 一定要通过天朝模式安装flutter!!! 一定要通过天朝模式安装flutter!!! 一定要通过天朝模式安装flutter!!!

因为在profile main.dart文件时，需要在线解析包，若包资源若采用官方不采用镜像，那么就会报错！

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

使用flutter命令运行项目：

flutter create myapp
cd myapp
flutter run -d [deviceId]

Launching lib/main.dart on OS105 in debug mode... Initializing gradle... 0.7s Resolving dependencies... 71.5s Gradle task 'assembleDebug'...
Gradle task 'assembleDebug'... Done 17.8s Built build/app/outputs/apk/debug/app-debug.apk. Installing build/app/outputs/apk/app.apk... 211.1s

安装APK并运行

在安装apk这一步，需要手动同意安装。 安装成功后，在手机上会有Flutter官方logo的一个应用。

为了不再踩天朝模式的坑，添加2个环境变量！

vim ~/.bash_profile
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

比起梯子，镜像更靠谱！

官方demo已跑通，接下来开始手动写第一个flutter app！