创建我的第一个flutter项目Flutter作为一门跨平台语言，经过几年的沉淀，国内越来越多的公司，开始使用它，那么你

和谐学习！不急不躁！！我是你们的老朋友小青龙～

检查工作

先检查一下flutter配置环境吧

截屏2021-10-29 下午4.09.09.png

都打勾了，说明都配置好了，下面继续～

如果还不知道怎么配置的小伙伴，可以自行百度，后面等新Mac到了我会出一期环境的搭建。

创建flutter项目

用命令创建项目

1、在文稿下创建一个文件夹flutterStudy，用来存放日后的所有flutter项目

cd /Users/jss/Documents

mkdir flutterStudy

2、在文件夹flutterStudy下，创建一个名叫flutter_study01的项目。指定iOS、android的开发语言为object-C、java

cd flutterStudy

flutter create -i objc -a java flutter_new

3、打开模拟器

open -a Simulator

4、运行项目

flutter run

5、终端退出项目运行状态

用Android studio创建项目

下一步，进入项目基础信息配置界面

`项目存放路径`如果手动选择，那么一定要检查一下，路径最后是否带上的`项目名称`

然后等个几秒，开发工具会拉取、配置flutter项目环境。

然后我们可以看到这样一个界面

运行项目

点击右上角的「绿色三角」按钮运行

把控制台日志截了下

手机界面是这样的

点击+可以数字累加。

热重载

很多时候，一个项目体积庞大的情况下，我们修改了界面上某个组件的颜色，如果重新编译运行会很慢。

flutter为开发者提供了一个功能 ------ 热重载

在main.dart里，我们看到这样一段注释：

// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.

百度翻译：
这是应用程序的主题。
尝试使用“flutter run”来运行应用程序。你会看到
应用程序有一个蓝色工具栏。然后，在不退出应用程序的情况下，尝试
将下面的primarySwatch更改为Colors.green，然后调用
“热重新加载”（在运行“颤振运行”的控制台中按“r”，
或者只需将更改保存到颤振IDE中的“热重新加载”。
请注意，计数器没有重置回零；应用程序
未重新启动。

大概意思就是介绍了下热重载的使用，这个我们可以跟着玩一下。

按照注释的方式，在默认运行的界面

点加让数字累加到7
修改代码，颜色改为green
点击闪电⚡️符号，执行热重载

手机界面前后对比

热重载前👇

热重载后👇

我们会发现，热重载只更新我们修改的那部分代码，其它部分是不会改变的，所以数字7才能继续保留。

个人使用发现：command+s 会自动执行热重载

自己写一段代码，打印 Hello word !

关于flutter type的补充

Application：创建一个app应用
plugin：创建一个插件，包含部分安卓和iOS原生代码
Package：创建第三方库，只包含Dart语言
Module：混合开发需要用这个

运行安卓模拟器卡顿

有时候可能会卡在下面这一行

Running Gradle task 'assembleDebug'...

解决办法，打开build.gradle文件改成这样

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }