使用VScode+Chrome轻松体验flutter

1,397 阅读2分钟

说明:这里我用的是windows,Mac后续体验了再补充

一.安装flutter

国内朋友可以前往flutter中文网下载安装:flutterchina.club/setup-windo…

根据该网站提供的步骤进行安装即可,当然会遇到一些问题,下面我们来细说。

1.系统要求:

  • 操作系统: Windows 7 或更高版本 (64-bit)
  • 磁盘空间: 400 MB (不包括Android Studio的磁盘空间).
  • 工具: 
    Git for Windows (Git命令行工具)
    VS code(个人喜好,所以这里我选择了vscode;当然你也可以安装Android studio)

2.添加用户环境变量

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Path=flutter\bin的全路径(如果已经存在了用;分割)

注意:更改完环境变量需重启

3.获取Flutter SDK

  • 可以去官网下载,前往下载,大陆建议翻墙操作;或者去flutter github项目进行下载,前往下载
    注意:不要将安装包解压放在高权限的路径如 C:\Program Files\

  • 找到flutter_console.bat,运行flutter命令行;

  • 问题:键入 flutter doctor,黑窗直接关闭了(可能你没有遇到这个问题)

  • 解决方法:

    1. 使用powershell,需要Set-location -Path 到bin文件夹
    2. 再次键入flutter doctor;报错
    3. 在flutter安装路径上,右击选择'git GUI Here',选择'create new repository'生成flutter目录缺少的.git文件
      注:如果你还没有安装git命令行工具请前往Git for windows 进行安装
    4. 输入 flutter doctor;报错意思是powershell版本太低了;前往下载5) 安装完后可以在powershell输入$PSVersionTable.PSVersion,查看版本以及是否安装完成再次输入flutter doctor,开始正常下载,第一次会需要比较长的时间,属于正常现象,耐心等待即可

二、创建flutter项目并运行

1. 执行 flutter create myapp 创建新项目;代码在bin/main.dart

2. vs code安装插件帮助更好的使用

  • Flutter

  • Dart

  • Flutter Widget Snippets

  • Awesome Flutter Snippets

3. 输入 flutter run 运行

Chrome会自己弹出模拟器(安装的前提下)

接下来就可以自由发挥了。