Flutter开发前期准备

具体参考flutter中文网
本文章使用VS Code来编辑

一:下载flutter SDK

1、官网 flutter SDK要FQ
2、github flutter SDK不需要FQ
3、强制升级命令flutter upgrade --force

二:更改环境变量

  • 打开bash_profile文件
  • 在bash_profile文件中添加命令,没有的话就自己创建一下这个文件

export PUB_HOSTED_URL=https://pub.flutter-io.cn #国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn #国内用户需要设置
export PATH=解压的flutterSDK路径/flutter/bin:$PATH
注意: 如果你使用的是zsh,终端启动时 ~/.bash_profile 将不会被加载,解决办法就是修改 ~/.zshrc ,在其中添加:source ~/.bash_profile

  • 在终端执行一下命令,然后重新启动mac

source $HOME/.bash_profile

  • 检查依赖是否安装完成

flutter doctor

对于检查的报错,Android和iOS只要有一个是成功的就可以了,另一个报错也没事当然了,如果之前没有装过苹果开发环境,就要安装xcode和CocoaPods

三:配置编辑器

  • 下载编辑器VS Code

  • 安装Flutter插件
    1、打开VS Code
    2、View>Command Palette…
    3、输入 ‘install’, 然后选择 Extensions: Install Extension
    4、在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install

  • 创建项目
    1、shift+command+p
    2、输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
    3、输入项目名称,点击确定

  • 运行项目(需要打开iphone模拟器)
    1、等待右下角的弹窗提示结束(有时候会一直无法加载,需要重启电脑)加载中加载完成
    2、有时候加载会没有同步,这是代码会报错,可以试着继续运行项目,会弹出以下提示(有时候会一直无法加载,需要重启电脑)
    3、如果出现了Waiting for another flutter command to release the startup lock...可以到flutter SDK中删除lockfile

四、插件安装

  • Code Runner:右键快捷运行代码
  • Awesome Flutter Snippets:flutter常用函数代码片段
  • Flutter Widget Snippets:Widget代码片段

五、Dart开发

  • 如果用dart语言写一些demo学习语法,需要新建Dart项目。在VS Code中点击new file新建文件,在右下角点击语言,然后在语言选择中选择Dart。但是通过右键运行代码会报错,提示找不到dart。

/bin/sh: dart: command not found

这是因为在环境变量中没有配置dart,在.bash_profile文件中添加命令

export PATH=${PATH}:解压的flutterSDK路径/flutter/bin/cache/dart-sdk/bin

然后在终端执行source $HOME/.bash_profile,再执行dart验证是否配置成功。
然后一定要重启VS Code。

遇到的坑点

1、下载flutter SDK非常久,需要FQ。
2、环境变量没有配置zshrc文件,导致全局使用flutter命令失败,VS Code无法加载flutter。
3、VS Code无法加载flutter,需要重启电脑才能解决。
4、VS Code提示flutter被lock,需要删除lockfile。
5、Waiting for another flutter command to release the startup lock...提示被lock的话,需要把flutterSDK里的lock文件删掉,位置在bin->cache->lockfile
6、真机调试。Xcode14可能出现以下报错,因为Flutter下的ios-deploy没有及时更新。

deploy[54959:778742] [ !! ] Error 0xe8000022: The service is invalid. AMDeviceSecureStartService(device, CFSTR("com.apple.debugserver"), NULL,
&con)

ios_deploy更新,下载后使用Xcode编译,会答应编译生成文件,把这个路径下的文件替换到FlutterSDK对应的路径之下flutter/bin/cache/artifacts/ios-deploy

六、Mac安装Android开发环境

1、安装Androidstudio找到对应可用的版本,然后一直点击下一步即可。
2、安装java也是找到对应版本下载即可,现在用的是1.8 uxxx,这里下载需要登录Oracle账号。也可以找别人下好的资源
3、配置java环境变量
在.bash_profile中添加
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdkx.x.x_xxx.jdk/Contents/Home如果是第一次配置环境变量,要自己创建.bash_profile
4、目前出现的问题是可以打包apk包(打包失败多重启几次就成功了🐶),但是想要直接连接android手机跑项目会报错,还没有找到解决方案
4.1、解决4出现的错误
出现此报错时,发现重新新建的flutter项目是可以跑起来的,所以猜测是导入项目的问题打开项目管理,把之前报错的项目删掉
image.png然后重新导入项目image.png然后再跑项目就可以成功了

posted @ 2021-03-11 15:23  dasonxie  阅读(6)  评论(0编辑  收藏  举报