Bob's Blog

之前为了自己方便，用Django做了一个简单的记账网站，部署在阿里云上供自己平时使用、记录、统计，用电脑手机打开都能使用。不过最近有了新的想法，打算做一个app实现类似以前习惯了的网易有钱的功能，后端改为纯api的，前端无论web还是app就用于展示和交互，正好学习试一下flutter。于是开了一个新的系列记录下过程，资料和原理就在官网，我就不写了。至于之前的django系列可以参考这个链接：用Django做一个简单的记账网站

先在本机配置下flutter的环境：

下载相应版本的Flutter的SDK，比如：https://storage.flutter-io.cn/flutter_infra_release/releases/stable/macos/flutter_macos_2.8.1-stable.zip.

有中文官网：https://flutter.cn/docs。

下载后解压，并设置flutter/bin的环境变量。可以运行flutter docker来检查当前环境是否完全配置好了。我运行了后得到如下的提示：

Running "flutter pub get" in flutter_tools...                      17.1s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.1, on Mac OS X 10.14.6 18G6020 darwin-x64, locale en-US)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[!] Xcode - develop for iOS and macOS (Xcode 10.3)
    ✗ Flutter requires a minimum Xcode version of 12.0.1.
      Download the latest version or update via the Mac App Store.
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.63.2)
[✓] Connected device (2 available)

! Doctor found issues in 2 categories.

关于"cmdline-tools component is missing"的错误，运行命令解决：

# 用本地实际的android sdk路径替换
/Users/admin/Library/Android/sdk/tools/bin/sdkmanager --install "cmdline-tools;latest"

关于"Android license status unknown"的错误，运行命令：

# 可以用
flutter doctor --android-licenses
# 也可以用
/Users/admin/Library/Android/sdk/tools/bin/sdkmanager --licenses

关于xcode的版本问题，可以去下载对应的版本：https://developer.apple.com/download/all/?q=xcode，不过也需要注意当前的macos版本是否支持，这里有个查xcode与macos版本对应的链接：https://xcodereleases.com/.

关于"CocoaPods not installed"的错误，可以运行命令安装：

gem install cocoapods
# 需要注意的是，ruby版本有要求。我本地的2.5.3老版本装上了后仍然检查不过，换成了2.7.3时就对了

至于IDE可以选择Visual Studio Code，需要装上flutter和dart的插件。

选择VSCode中的View - Command Palette，选择Flutter: New Project - Application，输入项目名字回车后便可看到已经预先生成了目录和文件。

此时也能根据默认的内容看到效果。就先在android上检查和调试，之后再看ios。

点击VSCode的右下角的状态栏，在弹出的菜单中选择一种模拟器的机型，比如我现在选择了之前创建的一个Android Emulator: Nexus_9_API_28。

然后安卓的模拟器就弹出来了，此时再选择VSCode里的Run - Start Debugging，等待app启动，在console里面能看到进度。如下图。

在debug模式下，flutter提供了hot reload(热加载), 只需要修改内容保存即可生效。比如现在修改lib\main.dart中的文字，保存后可以马上在安卓模拟器上展现出来。

在flutter的目录中有个例子包含了比较齐全的组件和效果，在flutter/dev/integration_tests/flutter_gallery.

现在环境好了，能运行demo了，准备开始添加组件和功能。