Day 15 | Flutter web 环境安装 与 vs code插件

Flutter SDK

这里以 MacOS 作为范例

1. 首先到官网https://flutter.dev/docs/get-started/install

2. 选择OS → MacOS

3. 下载 Flutter SDK 压缩档

4. 解压缩SDK

   cd ~/development
   unzip ~/Downloads/flutter_macos_2.5.1-stable.zip
   

   这边要注意的是 unzip的资料夹应该会依据你浏览器的下载资料夹的路径，但也可以自己手动解解压缩後在手动拉到 ~/development

5. 将flutter 加到 shell

   export PATH="$PATH:`pwd`/flutter/bin"
   

   如果上一步是完全输入指令来安装这里的pwd就是指目前工作路径所可以直接输入上面那个指令，如果是手动将SDK的档案拉过去记得还要先 cd ~/development 。

6. 测试有无安装成功

   flutter doctor
   

问题排除

如果出现类似这种错误

Command 'flutter' not found, but can be installed with:

有可能是shell 要重启

source ~/.bashrc

#如果你用的是zsh：
source ~/.zshrc

如果还是失败可以到shell的设定档看一下有无以下设定，没有可以自己添加

export PATH=~/development/flutter/bin:$PATH

然後重新 source 一次

Flutter web

如果是以前就有安装过flutter的读者请记得将SDK版本先升到2.0之後。

上面的 flutter doctor run完後基本上flutter 及 chrome 有打勾就可以开始开发 flutter web了

至於Android及iOS的环境设定这里就不另外说明了。

建立专案：

flutter create projectName

因为之後所有的范例都是以null safety dart进行开发所以请跑以下指令

cd first_app
dart migrate --apply-changes 

然後就可以执行

flutter run

如果你有其他运行的模拟器或连结的装置可能会导致运行的平台不是web也可以直接指定用装置运行

flutter run -d chrome --release

执行後的画面：

可以稍微操作来玩玩看，明天再来好好介绍各个widget的用处。

vs code plugin 与 设定

因为我自己是用vs code作为开发工具所以这里只会介绍 vs code的插件，如果是使用android studio 的读者可能要自己寻找插件了。

以下除了 Flutter 是必装以外其他都是我个人私心推荐。

Flutter相关

1. Flutter （必装）

   官方提供的插件，可以直接在vs code上连结到模拟器，可以用 fn+ f5 就可以打开模拟器来run flutter code 或者按右上角的debug按钮，以及在左下角的bar 可以切换模拟器类型。

2. Awesome Flutter Snippets

   提供很多常用的缩写语法

3. flutter_mobx

   提供一个按 build_runner watch 的按钮，以及wrap mobx 相关widgets 时的快捷键。

其他推荐

1. Bracket Pair Colorizer 2

   区别括号的层级

2. errorLens

   将error hint 直接显示不用自己hover上

3. Bookmarks

   提供一个方便管理的书签。

vs code setting.json

cmd + shift + p (windows 应该是 control + shift + p )可以输入控制指令然後输入

open default settings

会打开 setting.json 然後添加这两个值

"dart.previewFlutterUiGuides": true,
"dart.previewFlutterUiGuidesCustomTracking": true,

这两个设定会画线辅助我们了解widgets之间的阶层关系
https://dartcode.org/releases/v3-1/#preview-flutter-ui-guides