环境设定

系统需求

• 作业系统：macOS
• 硬碟空间：至少2.8 GB
• 工具：git、Xcode

取得 Flutter SDK

a. 从这里下载你想要安装的SDK版本，这边我选择最新的 v2.2.3。

b. 我个人习惯将SDK放到家目录位置上，并直接以flutter当作目录的名称以方便识别。

unzip -q ~/Downloads/flutter_macos_2.2.3-stable.zip -d ~

c. 将 flutter SDＫ下工具(~/flutter/bin) 设定至 PATH 上

我自己是使用 zsh 搭配 oh-my-zsh 当作 termianl 的环境设定，因此接下来我需要到 ~/.zshrc 上添加相关的路径配置

# flutter
export PATH="$PATH:/Users/leo_chen/flutter/bin"

P.S. 完成上述设定後请记得需要重启terminal或是运行下面指令让当前terminal吃到PATH的设定

source ~/.zshrc

检测目前环境设定是否符合 flutter 运行的的需求

在完成上面 flutter SDK 的设定後，可透过下面指令查看是否有其他相依的设定尚未配置。

❯ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on Mac OS X 10.15.7 19H114 darwin-x64, locale zh-Hant-TW)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[!] Android Studio (version 2020.3)
    ✗ Unable to find bundled Java version.
[✓] VS Code (version 1.59.0)
[✓] Connected device (2 available)
    ! Error: iPhone is not connected. Xcode will continue when iPhone is connected. (code -13)

! Doctor found issues in 1 category.

若配置上有问题，会出现类似的提供讯息。

大致上相依赖的套件如下：

• Xcode

这个是 iOS 平台开发程序需要的整合开发环境，可至 App Store 搜寻 Xcode 安装或是到 Apple Developer 下载

• Android Studio

Android Studio 是 Android 平台开发程序需要的整合开发环境，Android Developer 载点。

Android Tools

这个在安装完 Android Studio 後，通常已预设安装好对应的 Android SDK，开启 Android Studio 进入偏好设定可以查看到 SDK 安装的目径以及已安装的Android SDK版本。

Android SDK 内部也有 bin 的目录，需要绑定到 PATH 的路径上，这边透过环境参数将PATH设定至 zshrc，虽然我们不会需要直接操作 Android SDK 的指令，大部份是透过 IDE 介面的执行功能，相关 Android SDK 的环境参数设定可以参考这边的说明。

# andriod
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH="$PATH:$ANDROID_SDK_ROOT/tools/bin"
export REPO_OS_OVERRIDE="macosx"

• VS Code

这是一款由微软开发的程序码编辑器(连结)，可提供许多不同的扩充功能，能够视需求打造成开发各种程序语言的IDE开发环境，我个人蛮推荐使用的。

• Chome

从 2.0 後，Flutter 可以输出成 Web App，因此 Google 自家的 Chrome 当然也是必备的开发工具之一。

安装 macOS 必备的套件工具

• brew

Homebrew 为 macOS上必装的套件管理工具

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装完成後可以透过brew指令安装所需套件。

举个列子来说，虽然安装完成 Xcode 後预设都有 git 可以使用，不过版本未必是最新的，持续更新相关指令至稳定版本是有必要的，操作方式如下：

brew install git

• CocoaPods

这个一款用来管理 Xocde 开发专案所需相依套件的工具，可以透过 brew 进行安装或是参考官网的安装说明。

排除问题

从 flutter doctor 检查的内容会发现会相关的错误或提供讯息，这时候我们可以按照输出的提示讯息至 google 搜寻相关的解决方法。

[!] Android Studio (version 2020.3)
    ✗ Unable to find bundled Java version.

查询相关的网页资讯後，在 Stack Overflow 上找到答案，原来我近期升级 Android Studio 至北极狐 2020.3.1 版本，对於Java的设定上有问题，有类似状况可以使用下面的指令操作排除。

cd /Applications/Android\ Studio.app/Contents/jre
ln -s ../jre jdk
ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk

Stack Overflow 是程序开发者经常使用讨论开发上议题的网站。

确认目前环境设定都完成，内容如下。

❯ flutter doctor -v
[✓] Flutter (Channel stable, 2.2.3, on Mac OS X 10.15.7 19H114 darwin-x64, locale zh-Hant-TW)
    • Flutter version 2.2.3 at /Users/leo_chen/flutter
    • Framework revision f4abaa0735 (7 周前), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/leo_chen/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_SDK_ROOT = /Users/leo_chen/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      ? https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      ? https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.59.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.25.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • Mac OS X 10.15.7 19H114 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 92.0.4515.159
    ! Error: iPhone is not connected. Xcode will continue when iPhone is connected. (code -13)

• No issues found!

设定个人偏好的编辑器

完成上述的 SDK 设定後，你可以选择任何一款你熟悉的IDE工具进行 flutter 应用程序的开发，也可以采用官方上推荐的 Android studio、VS Code、Emacs 选择一款你较喜欢的方式，上面这三项都有有配置好对应的插件工具，可以提升开发上的效率。

Flutter：Hello World

不免俗的，让我们来创建一个的 Hello World 应用程序吧。

可以直接用个人偏好的编辑器的操作介面创建一个专案，不过我这边练习用指令创建新的专案

# 创建 flutter workspace
mkdir flutter-example
cd flutter-example
# 使用 flutter 指令创建新的专案
flutter create myapp
cd myapp

接下来可以使用个人偏好的编辑器开启专案进行开发，目前初始化的目录结构大致如下

.
├── README.md
├── android
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── local.properties
│   ├── myapp_android.iml
│   └── settings.gradle
├── ios
│   ├── Flutter
│   ├── Runner
│   ├── Runner.xcodeproj
│   └── Runner.xcworkspace
├── lib
│   └── main.dart
├── macos
│   ├── Flutter
│   ├── Runner
│   ├── Runner.xcodeproj
│   └── Runner.xcworkspace
├── myapp.iml
├── pubspec.lock
├── pubspec.yaml
├── test
│   └── widget_test.dart
└── web
    ├── favicon.png
    ├── icons
    ├── index.html
    └── manifest.json

假如有不需要的平台环境可以将目录删除，後续有需要都可使用 flutter 指令加回来，主要避免在开发运行程序时老是会不小心点到其他平台的设定。

我们先找到 lib/main.dart 这个档案，这个是 flutter 应用程序执行时的主要入口，先将这只档案的内容替换成下面这段程序码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

使用指令确认好你要运行的平台环境，这边我使用 Xcode 建立了一个 iPhone 模拟器，透过flutter devices确认 Flutter SDK 探测到相关的设备。

❯ flutter devices
3 connected devices:

iPhone 11 (mobile) • 4A5E9CFB-F805-418F-AC34-DC969F6AFA19 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator)
macOS (desktop)    • macos                                • darwin-x64     • Mac OS X 10.15.7 19H114 darwin-x64
Chrome (web)       • chrome                               • web-javascript • Google Chrome 92.0.4515.159

接着就可以使用flutter run将应用程序进行编译且打包成App部署到测试的装置上，这一步建议使用IDE工具进行操作会比较方便些，我个人是使用 VScode, 操作可以参考官方上的说明。

❯ flutter run
Launching lib/main.dart on iPhone 11 in debug mode...
Running Xcode build...
 └─Compiling, linking and signing...                         3.1s
Xcode build done.                                           21.6s
Syncing files to device iPhone 11...                                76ms

Flutter run key commands.
r Hot reload. ???
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

? Running with sound null safety ?

An Observatory debugger and profiler on iPhone 11 is available at: http://127.0.0.1:51140/qBoPBwfh8do=/
Activating Dart DevTools...                                      1,909ms
The Flutter DevTools debugger and profiler on iPhone 11 is available at: http://127.0.0.1:9101?uri=http%3A%2F%2F127.0.0.1%3A51140%2FqBoPBwfh8do%3D%2F

今日成果如下

小结

练习成果

今日我们已完成Flutter开发环境的准备并且完成了一款应用程序，为了後续阅读程序码的必要，明天的章节打算先从 dart 程序基础开始，理解一下 dart 这套程序语言的语法结构。