建项目
- 打开vscode
输入 flutter 选择 New Project
选择一个用于在里头创建项目的文件夹
- 给项目取个名字（不要用大写），按回车即可。
稍等一会，项目便会创建成功，输出下方内容，表示创建成功！
运行项目
启动模拟器
点击右下角的 No Device
选择搭建开发环境时，已创建好的模拟器
若屏幕如上图，则模拟器未开机，点击开机即可
调试项目（热加载）
方便修改代码时，一旦保存便可实时看到修改效果
打包安装项目
在终端输入命令
注意路径是项目路径下，若不是，则通过 cd 命令切换
flutter run
此时会打包 Build 一个apk，安装到模拟器中，即便关闭vscode，依然能在模拟器中像使用其他安装在模拟器里的APP一样自由使用。（不具备热加载的效果）
项目目录
android文件夹：存放Flutter与Android原生交互的代码，该文件夹下的文件和单独创建的Android项目基本一样。
ios文件夹：对于标准的iOS项目，存放Flutter与iOS原生交互的代码。
lib文件夹：Flutter的核心目录，存放的是使用Dart语言编写的代码。不管是Android平台，还是iOS平台，安装、配置开发环境后，都可以在对应的设备或模拟器上面运行这里的Dart代码，而整个应用的入口是lib文件夹下的main.dart文件。也可以在这个lib文件夹下面创建不同的文件夹，里面存放了不同的文件来管理日益壮大的应用。
test文件夹：存放Flutter的测试代码。
pubspec.yaml文件是项目的配置文件，可以在该文件中声明项目中使用到的依赖库、环境版本以及资源文件等。
以下是对默认应用–计数器 代码的解析，了解即可，看不懂没关系，后续学习慢慢就理解了。
lib\main.dart
// 导入 material UI 库 import 'package:flutter/material.dart'; // 项目启动函数—— main 函数 void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // 重写StatelessWidget的build()方法，返回一个组件对象 @override Widget build(BuildContext context) { /* * MaterialApp表明应用采用Material Design风格， * 可以在theme属性下配置应用中与主题相关的属性，如颜色、按钮风格 * */ return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { // 构造函数，用于接受调用者的参数 MyHomePage({Key key, this.title}) : super(key: key); // 声明了一个字符串类型的final变量，并在构造函数中初始化 final String title; /* * 所有继承自StatefulWidget的组件都要重写createState() 方法， * 用于指定该页面的状态是由谁来控制的。 * 在Dart中，以下划线开头的变量和方法的默认访问权限就是私有的， * 类似于Java中用private关键字修饰的变量和方法,只能在类的内部访问 */ @override _MyHomePageState createState() => _MyHomePageState(); } /* * State是一个状态对象，<> 里面表示该状态是与谁绑定的。 * 在修改状态时，在该类中进行编写 */ class _MyHomePageState extends State<MyHomePage> { int _counter = 0; // 实现计数值加1的函数 void _incrementCounter() { // setState方法用于更新属性 setState(() { _counter++; }); } @override Widget build(BuildContext context) { /* * Scaffold是一个Material Design风格的组件， * 它继承自StatefulWidget，包含appBar、body、drawer等属性 * */ return Scaffold( /* 顶部导航栏 */ appBar: AppBar( /* * 这里的Widget其实就是MyHomePage， * 它在这里调用了上面传递过来的title变量 */ title: Text(widget.title), ), // Scaffold中的主体布局 body: Center( /* * 在Center组件中有一个child属性，用来定义它的子组件Column， * Column表示以行的形式显示其子组件 */ child: Column( /* * mainAxisAlignment用来控制子组件的对齐方式， * 也可以把值设置为start、end等 */ mainAxisAlignment: MainAxisAlignment.center, /* * Column组件的children属性用于指定它的子组件， * 它接受一个数组，可以向该属性传递多个组件 */ children: <Widget>[ // Text组件，用于显示文本 Text( 'You have pushed the button this many times:', ), // Text组件，使用style属性来设置它的样式 Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ), /* * FloatingActionButton也是Material Design风格的组件， * 可以在onPressed属性中定义其单击事件 */ floatingActionButton: FloatingActionButton( // 通过单击触发_incrementCounter函数 onPressed: _incrementCounter, tooltip: 'Increment', // 指定child的子组件为一个“+”号图标 child: Icon(Icons.add), ), ); } }
