flutter本地环境的安装以及编辑器的配置
由于本文图片比较多,所有都缩小了不少,点击图片就可以放大看到原始图片
使用镜像
cmd打开终端,贴上以下代码,以加入到环境变量中,如果添加失败,可以手动添加
手动添加如下:
我的电脑->属性->更改设置-> 高级->环境变量->用户变量下点击新建如下两条,添加后点击确定:
注意: 此镜像为临时镜像,并不能保证一直可用,读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。
设置git:
如果已安装Git for Windows,请确保命令提示符或PowerShell中运行 git
命令,不然在后面运行flutter doctor
时将出现Unable to find git in your PATH
错误, 此时需要手动添加(本机的git安装路径)D:\Git\Git\bin
至Path
系统环境变量中。
我的电脑->属性->更改设置-> 高级->环境变量->系统变量下按照途中标的1,2,3,4,5添加,最后点击确定即可
注意:这里演示的是win10,如果是win7系统的话,path需要用的的添加方式可以去百度下,很简单,这里就不说了.
获取Flutter SDK
-
去flutter官网下载其最新可用的安装包,点击下载 ;
注意,Flutter的渠道版本会不停变动,请以Flutter官网为准。另外,在中国大陆地区,要想正常获取安装包列表或下载安装包,可能需要FQ,读者也可以去Flutter github项目下去下载安装包 。
-
将安装包zip解压到你想安装Flutter SDK的路径(如:
C:\src\flutter
;注意,不要将flutter安装到需要一些高权限的路径如C:\Program Files\
),像我的话直接解压到D:\Flutter。 -
在Flutter安装目录的
flutter
文件下找到flutter_console.bat
,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了。
注意:解压后的Flutter文件夹下一定要确保有.git文件,不然后面运行flutter会报错.
更新环境变量
要在终端运行 flutter
命令, 你需要添加以下环境变量到系统PATH:
- 转到 “控制面板>用户帐户>用户帐户>更改我的环境变量”
- 在“用户变量”下检查是否有名为“Path”的条目,如果有的话,双击打开,然后再后面新建一条
flutter\bin(跟上面添加git的方式一样,不过这个是用户变量下面的path)
然后,重启Windows以应用此更改
打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装:
第一次运行一个flutter命令(如flutter doctor)时,它会下载它自己的依赖项并自行编译(过程比较慢,耐心等待)。以后再运行就会快得多。
Android设置(有不懂的自行百度),
Flutter需要安装和配置Android Studio:
-
下载并安装 Android Studio.
-
启动Android Studio,然后执行“Android Studio安装向导”。这将安装最新的Android SDK,Android SDK平台工具和Android SDK构建工具,这是Flutter为Android开发时所必需的
-
设置一个机型:Android Studio>Tools>AVD Manager 并选择 Create Virtual Device.下面是我的设置,Oreo后面的download记得点击下载下
然后列表(Tools>AVD Manager)里面就会出现你设计的机型,点击三角,就可以看到手机模拟器拉,效果图如下:
编辑器设置
这里演示的是Android Studio;
- 启动Android Studio.
- 打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
- 选择 Browse repositories…, 选择 Flutter 插件并点击
install
. - 重启Android Studio后插件生效.
最后创建新应用:
- 选择 File>New Flutter Project
- 选择 Flutter application,作为 project 类型, 然后点击 Next(也可 双击打开)
- 输入项目名称 (如 flutter_app), 选择Flutter SDK path(从github上clone下来的安装包的路径)路径和存放应用的路径,然后点击 Next
- 点击 Finish
- 等待Android Studio安装SDK并创建项目.
最后对着官方文档(https://flutterchina.club/get-started/codelab/),写个listView,
点击右上角main.dart旁边的绿色小三角运行
效果图如下:
本文参考文档:https://flutterchina.club/setup-windows/