初交 Google Flutter

文章目录
  1. 1. 简介 Flutter
  2. 2. 搭建环境
  3. 3. Hello World
  4. 4. 参考文献

蒲柳之姿,望秋而落;松柏之志,经霜弥茂。

引言源自之前在微博上看到的一句话。

很抱歉的是,博客坚持两年的两周一更,未来或许要变为一月一更了。工作和生活上的事,将曾经的周末也挤压的残缺不全,或许这并不是一件坏事,Just move on。好,下面进入正题。

都说现在是大前端时代,笔者自来到点评后,内部的动态化框架 Picasso 也断断续续玩了半年之多。2 月底时,Google 推出了 Flutter 第一个 beta 版,当时只有所了解,今天有幸花一点时间体验一下。感觉无论是早先 Facebook 开源推出的 React Native,还是现在 Google 的 Flutter,乃至我厂自己的 Picasso,都在揭示着移动端动态化时代的发展,以利于业务的快速迭代 (不多说了,我们现在已经是两周一个版本,几个小版本并行,手动捂脸 ==)。这次,只是简单分享下 Flutter 的所学。

简介 Flutter

Flutter 是 Google 推出的,一款能同时在 Android 和 iOS 平台上制作高质量原生界面的 UI 框架,免费且开源的。其显著地特点如下:

  • 快速开发

    毫秒级的热部署,让 App 的构建急速生效。其中,使用了大量可以深度自定义化的小部件 (widgets),以快速开发原生界面

  • 极富表现力和灵活的 UI

    迅速地将特性集中在客户端的用户体验上。其分层的体系结构允许开发者进行深度定制,结果呈现出快速的渲染和富有表现力的设计

  • 原生表现

    Flutter 的部件包含了所有重要的平台差异,如滚动、导航、图标和字体上等等,在 Android 和 iOS 平台上提供了完整的原生表现

一套代码,两端运行。

搭建环境

简单地了解了 Flutter 的特性,下面动手来搭建环境,跑个 Demo 体验一下。

I.首先选择相应的安装包笔者系统是 macOS

II.由于在墙内,这里多出一步配置国内的镜像,安装的时候,检测到有这两个环境变量时,即会优先读取变量存储的地址。

笔者终端环境是 zsh (bash 用户打开 .bash_profile),用户根目录,这里打开 .zshrc 如下:

1
open .zshrc

打开后,文件中添加两行配置:

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

然后,

1
source .zshrc

使设置生效。

最后,键入两行命令,检测是否添加成功:

1
2
echo $PUB_HOSTED_URL
echo $FLUTTER_STORAGE_BASE_URL

III.明确最低的要求,如笔者开发环境为 macOS,几点最低的要求如下:

操作系统:64-bit,

磁盘空间:700 MB (不包括所需要 IDE 如 Android Studio 或 Xcode 的空间),

工具:依赖这些系统环境里的命令行工具,如bashmkdirrmgitcurlunzipwhich等。

IV.获取 Flutter 的 SDK,在这里下载最新的 SDK 安装包,如 flutter_macos_v0.5.1-beta.zip

然后,将压缩包解压至指定的位置,如:

1
2
cd ~/development
$ unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

最后,建议永久添加至环境变量中如下:

同样打开 .zshrc (或你的 .bash_profile),添加如笔者配置的:

1
export PATH=/Users/zhangbao05/flutter/bin:$PATH

再运行source .zshrc使之生效,跑echo $PATH检测是否添加成功。

V.检测所需要的依赖,

1
flutter doctor

笔者检测后的结果为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.1 17B1003, 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 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 (version 3.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Community Edition (version 2017.3.2)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.25.1)
[✓] Connected devices (1 available)

! Doctor found issues in 4 categories.

有一点要知道的是,Dart SDK 与 Flutter 是绑定在一起的,没必要单独安装 Dart。务必要仔细检查结果,或许需要安装相关依赖或者执行任务。

注意,这里我有了 Flutter SDK、VS Code,连接上了一台设备,简义上,Flutter 的开发环境已经具备好了。

VI.接下来,选择我们的开发编辑器,作为 Android 或者 iOS 开发者,这时候,果断地抛开厚重的 IDE,拥抱前端开发界的大杀器 VS Code 吧,够轻量且支持 Flutter 的运行和调试:

  • 官网下载 VS Code 并安装
  • 安装 Flutter 的插件
    • 开启 VS Code
    • 进入查看 (View) > 命令面板 (Command Palette)
    • 键入install,然后选择Extensions: Install Extension
    • 跳出一个扩展面板,在搜索区域输入flutter,在弹出的列表中选择 Flutter,然后点击安装 (install)
    • 最后选择OK来重载 (reload) VS Code
  • 确认安装,以同样的方式调用命令面板,键入doctor,然后选择Flutter: Run Flutter Doctor,再审查OUTPUT面板的输出

Hello World

正如学习任何语言或者框架,搭建完成环境后,是时候写出一个 “Hello World” 出来了,注意,此处仍然是基于 VS Code 编辑器。

  • 创建 App

    • 打开 VS Code,进入查看 > 命令面板
    • 键入 flutter,选择Flutter: New Project
    • 输入一个工程名如myapp,然后按下Enter
    • 给新的工程文件夹创建或者选择一个父目录,等待工程创建完成以及main.dart文件出现

    创建成功的 Flutter 项目myapp包括一个简单的 demo app,其使用了 Material 设计的组件,App 的主要代码在lib/main.dart里。

  • 运行 App

    • 定位 VS Code 的状态栏,即窗口下面蓝色的条目,选择相应的设备,如笔者使用的是 Nexus 6P
    • 执行调试 > 启动调试,或者按下 F5
    • 等待 App 启动,相关信息在调试控制台可以看到打印出来了,需求都满足了,然后 App 正常就展现在手机屏幕上啦

  • 尝试热更新

    Flutter 以热更新方式提供了一个快速开发的闭环环境,即重载正在运行 App 的代码时,不用重启或者丢失掉 App 的状态如下:

    打开lib/main.dart,将You have clicked the button this many times: 改为Hello World,点击保存 (File > Save All),或者点击热更新 (Hot Reload),即编辑器上方的绿色圆环箭头按钮,我们会马上到运行的 App 上立即显示出来Hello World!Cool!

    了解更多请参见 Flutter 官网

    至此,初步认识 Google Flutter 到此结束。

    本人才疏学浅,如有疏漏错误之处,望读者中有识之士不吝赐教,谢谢。

    1
    Email: [email protected] / WeChat: Wolverine623

    您也可以关注我个人的微信公众号码农六哥第一时间获得博客的更新通知,或后台留言与我交流

    参考文献

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