flutter 创建项目、运行项目、项目目录

创建项目

2. 打开vscode



3. 输入 flutter 选择 New Project



4. 
   



5. 选择一个用于在里头创建项目的文件夹



6. 给项目取个名字（不要用大写），按回车即可。



7. 稍等一会，项目便会创建成功，输出下方内容，表示创建成功！

运行项目

启动模拟器

点击右下角的 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),
      ),
    );
  }
}