Flutter学习之路(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Viiou/article/details/89633538

现在Android最火的技术是上面?是Flutter。从零开始的异世界Flutter。

学习Flutter时可以看看这个网站,写的很NICE。Flutter中文网:https://flutterchina.club/setup-windows/

一,安装Flutter

1.开发环境要求

磁盘空间,电脑系统肯定OK,唯一需要安装的是Git for Windows(Git命令行工具)

2.下载Flutter

在这个网站中,下载Flutter,选择稳定版即可。
https://flutter.dev/docs/development/tools/sdk/releases#windows
在这里插入图片描述
如果点击没有反应的话,在git界面写入这两行代码,即将临时镜像的地址加入到路径中,重新点击下载就可以了。

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

在这里插入图片描述
3.安装

接下来就是老一套,解压,安装,路径不能有中文等。

解压完后长这样。
在这里插入图片描述
在bin目录下找到flutter_console.bat,双击启动flutter命令行。

然后是更新环境变量,将flutter\bin添加到Path路径,也添加PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL到用户变量,值分别是https://pub.flutter-io.cn和https://storage.flutter-io.cn。

4.检测

在做完上面这些后,在PowerShell窗口运行下列命令来安装依赖项:

flutter doctor

运行后的界面如下所示:
在这里插入图片描述
然后按照英文提示一步步走下去。

首先是添加ANDROID_SDK变量,值就是AndroidSDK的地址,然后在Path路径添加
%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools,做这些就是为了在命令行可以找到程序,直接运行。添加完SDK路径之后,重启电脑,再输一遍flutter doctor命令,会变成这样。
在这里插入图片描述
这代表SDK已经成功识别了,如果出现下面这图,代表Android许可证没有被接受,输入flutter doctor --android-licenses,然后一直按y,y按完后,会变成上面这样。
在这里插入图片描述
接下来是在Android Studio和IDEA中安装Flutter插件。

安装插件很简单,在插件界面搜索Flutter,安装就行。安装插件后结果如图所示:
在这里插入图片描述
然后连接上Android手机,输入flutter devices这样会自动连接设备。然后再看一下效果,都OK了,Flutter环境便安装完成了。
在这里插入图片描述
二,Flutter初体验

1.创建Flutter工程

在AndroidStudio中,选择File->Create New Fluuter Project。会出现如下界面,然后选择第一个,Flutter Application。
在这里插入图片描述
选择完之后需要填项目名称这种,按照实际情况填写就可以了。需要注意的是,第一次新建可能时间比较长,可能进不去,打开Android Studio安装目录下的 bin 目录,找到 idea.properties 文件,在文件最后追加以下这行代码, disable.android.first.run=true ,然后保存,以后打开Android Studio创建项目就不会卡住了。

创建之后如下图所示,点击安装按钮,FlutterApp便会安装在你的手机上了。
在这里插入图片描述
2.热重载

Flutter 可以通过 热重载(hot reload) 实现快速的开发周期,热重载就是无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态(译者语:如果是一个web开发者,那么可以认为这和webpack的热重载是一样的)。简单的对代码进行更改,然后告诉IDE或命令行工具你需要重新加载(点击reload按钮),你就会在你的设备或模拟器上看到更改。

想体验热重载的话很简单,比如将上图中绿色字符串随便改个值,点击安装按钮右边的闪电按钮,或者直接使用快捷键ctrl+\,1到2秒时间,界面更新了,比原生开发的重新安装快多了。

猜你喜欢

转载自blog.csdn.net/Viiou/article/details/89633538