FLUTTER 五月 23, 2021

Flutter • Initialization

文章字数 2.9k 阅读约需 5 mins. 阅读次数 0

引言

本篇将介绍我在学习有关Flutter时的一些笔记分享。

Flutter是 Google 的移动UI框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

为什么使用 Flutter :

  • 快速开发 - 毫秒级的热重载,修改后,您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。

  • 富有表现力和灵活的UI - 快速发布聚焦于原生体验的功能。分层的架构允许您完全自定义,从而实现难以置信的快速渲染和富有表现力、灵活的设计。

  • 富有表现力和灵活的UI - Flutter包含了许多核心的widget,如滚动、导航、图标和字体等,这些都可以在iOS和Android上达到原生应用一样的性能。


获取 Flutter SDK

Get the Flutter SDK

下载完成后解压到任意位置。


安装 Android Studio

Download Android Studio and SDK tools  |  Android Developers

Android Studio 将用于下载 Android SDKFlutter && Dart 两个插件。

插件的下载在 Android Studio 的 Setting - Plugins中,搜索 Flutter 并点击 Install,期间会提示捆绑下载 Dart 插件,两个都下载即可。


Windows

将刚才解压的 flutter 文件路径添加到系统变量的 Path 变量中。

  • 例:D:\flutter\bin

配置 Flutter 环境变量

在系统变量中新建两个值。


配置 Android SDK 环境变量

SDK 下载完毕后,在系统变量中新建 ANDROID_HOME 变量,将 SDK 的地址填入即可。

  • ANDROID_HOME = D:\Android\Android SDK

配置 Android toolchain

Android toolchain 将用于证书许可

将 Android SDK 配置到环境变量中后,终端执行:

flutter doctor --android-licenses

根据提示,输入 y ,直到全部许可都得到授权。


flutter doctor

所有配置完成后,终端执行

flutter doctor

最终结果如下,

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 2.2.0-10.3.pre, on Microsoft Windows [Version 10.0.19043.1023], locale zh-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Android Studio (version 4.2.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.1)
[✓] Connected device (2 available)

! No issues found!

Apple macOS

通过终端编辑配置文件

这里使用 vim 进行编辑。

vim ~/.bash_profile

配置 Flutter 环境变量

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

# 这里的 hackintosh 改为你的 macOS 用户名
export PATH=/Users/hackintosh/flutter/bin:$PATH

配置 Android SDK 环境变量

# 这里的 hackintosh 改为你的 macOS 用户名
export ANDROID_HOME="/Users/hackintosh/Library/Android/sdk"
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

保存上述配置

source ~/.bash_profile

配置 Android toolchain

Android toolchain 将用于证书许可

将 Android SDK 配置到环境变量中后,终端执行:

flutter doctor --android-licenses

根据提示,输入 y ,直到全部许可都得到授权。


flutter doctor

所有配置完成后,终端执行

flutter doctor

最终结果如下,

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 2.2.0, on Mac OS X 10.13.6 17G14042 darwin-x64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Xcode - develop for iOS and macOS
    ✗ 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
        sudo xcodebuild -runFirstLaunch
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.1.1)
[✓] VS Code (version 1.56.2)
[!] Proxy Configuration
    ! NO_PROXY is not set

[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

由于我的机器是黑苹果,且止步于 macOS 10.13.6,无法向上升级(10.14以上不支持 Nvidia 显卡),无法下载 Xcode。

有能力的读者可以购买白果,或者自行组一台 AMD 的黑苹果,即可解决 Xcode 的系统版本限制问题。


0%