【Flutter之旅】搭建 Flutter 开发环境

简介

工欲善其事，必先利其器。

在开始开发之前，需要先把环境搭好，一个优秀的开发者应该能胜任各种平台各种环境的搭建(苦力活~)。

在这里我是选择了 Linux + VS Code，当然可以根据自己条件来选择，比如 Windows/Mac/Linux + Android Studio/VS Code/Vim。

至于我为什么选择 VS Code, 是因为　idea 实在是太吃内存了；Vim 的使用也只是停留在对单个文件的操作，对文件夹的操作还需要提高。

以 Linux + VS Code 为例

• Linux 环境下载 Flutter SDK
  • 配置环境变量建立镜像(否则速度让人怀疑人生)

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

  • Linux 下载 Flutter SDK: sudo snap install flutter --classic
  • 获取 Flutter SDK 路径: flutter sdk-path
  • 运行以下命令查看是否需要安装其它依赖项来完成安装：flutter doctor
    • 利用这个命令可以检查 Flutter 的环境是否缺少依赖，doctor 也是顾名思义

    //正常输出
    Doctor summary (to see all details, run flutter doctor -v):
    [✓] Flutter (Channel stable, 2.2.1, on Linux, locale zh_CN.UTF-8)
    [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    [✓] Chrome - develop for the web
    [✓] Android Studio (version 4.2)
    [✓] VS Code (version 1.34.0)
    [✓] Connected device (2 available)
    
    • No issues found!
    

• 安装Flutter插件
  • 启动 VS Code
  • 调用 View>Command Palette… (Ctrl+Shift+p)
  • 输入 ‘install’, 然后选择 Extensions: Install Extension action
  • 在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install
  • 选择 ‘OK’ 重新启动 VS Code
• 通过Flutter Doctor验证您的设置
  • 调用 View>Command Palette…
  • 输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action
  • 查看“OUTPUT”窗口中的输出是否有问题

    //如果出现没有找到 flutter sdk path，需要在配置PATH，在 ~/.bash_profile 添加
    export PATH=‘flutter sdk-path’/bin:$PATH
    //然后更新配置文件
    source ~/.bash_profile
    

参考

《Flutter实战》电子书
Flutter中文网