从创建一个Flutter项目开始熟悉工程目录结构

---

前言

紧接着上一篇，完成了在windows平台的Flutter开发环境搭建，本片从如何创建一个Flutter项目开始，逐步属性Flutter的工程项目目录结构。

---

一、创建

1. Android Studio （准备好相关环境）
2. 创建
   
3. 选择Flutter Application

4. 创建成功

二、main.dart

页面实现的逻辑很简单就是有一个int的变量展示在界面上，点击按钮时执行+1的操作，此时数据发生了改变，更新UI。

import 'package:flutter/material.dart';

/// 入口函数
void main() {
  //将小部件挂载
  runApp(MyApp());
}

///
/// StatelessWidget： 是一个无状态的widget,可以理解为一个小部件或者小组件的父类。
/// MyApp: 我们自己写的一个小部件，小组件
/// 这里相当于Android中的Application类
///
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(// android 设计风格的App
      title: 'Flutter Demo',
      theme: ThemeData(//主题相关配置
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),//指定了启动后显示的页面
    );
  }
}

///
/// 启动后显示的页面
/// StatefulWidget： 有状态的widget,可以根据数据的变化改变UI
///
class MyHomePage extends StatefulWidget {

  //构造方法，传入了显示的标题
  //{}:为可选参数
  MyHomePage({Key key, this.title}) : super(key: key);//向父类传递了key，可以唯一标识当前的widget

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

///
/// MyHomePage的状态管理类
/// _ : 私有的意思，只能在当前文件中使用
///
class _MyHomePageState extends State<MyHomePage> {

  //一个int的变量初始值为0
  int _counter = 0;

  //没有返回值的方法，对变量进行+1操作
  void _incrementCounter() {
    //数据发生变化的时候更新UI
    setState(() {
      _counter++;
    });
  }

  //构建显示的内容
  @override
  Widget build(BuildContext context) {
    return Scaffold(//android 设计风格中的一个模板
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',//插值表达式获取我们的变量
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(//一个按钮点击触发+1的方法
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

三、pubspec.yaml

# 包名称，也是最终打包成Apk的包名称
name: flutter_app

# 关于此App的描述信息
description: A new Flutter application.


# 此处是如果将当前包发布发哦pub.dev仓库，在仓库中显示的标题
publish_to: 'none'

# 当前包的版本信息
# 语义版本号
# + 号之前 版本名称 versionName
# + 之后 版本code versionCode
# 对应 android app build.gradle 中的配置
version: 1.0.0+1


# 环境依赖
environment:
  # dart sdk 版本要求
  sdk: ">=2.7.0 <3.0.0"
  # 也可以添加flutter sdk 版本要求
  flutter: "1.22.3"

# 生产依赖：都会被编译打包
dependencies:
  flutter:
    sdk: flutter


# 依赖 pub.dev 上的第三方库


# ^ : 大版本保持不变，小版本号获取最新的
  cupertino_icons: ^1.0.0

# 不指定或者any 拉取最新版本的包
#  dio:
#  dio: any

# 明确指定版本号
#  dio: 3.0.10

# 区间执行版本号
# path_provider: <=1.6.22
# path_provider: <1.6.22
# path_provider: '>=1.0.0 <1.6.22'



# 依赖本地库
#  flutter_package:
#    path: ../flutter_package



# 依赖 git repository
#  bloc:
#    git:
#      url: https://github.com/felangel/bloc.git
#      ref: bloc_fixes_issue_110
#      path: packages/bloc


# 依赖自己的 pub 仓库:
#  bloc:
#    hosted:
#      name: bloc
#      url: http://your-package-server.com
#    version: ^6.0.0


# 解决包冲突 同一规定使用固定的版本
# dependency_overrides:
#  path_provider: ^1.6.22


# 开发依赖、运行时依赖
dev_dependencies:
  flutter_test:
    sdk: flutter



# flutter 相关配置
flutter:

# 确保应用程序中包含Material Icons字体，以便可以使用material Icons类中的图标
  uses-material-design: true

# 静态资源引入
# assets:
#   - images/a_dot_burr.jpeg
#   - images/a_dot_ham.jpeg
# fonts:
#   - family: Schyler
#     fonts:
#       - asset: fonts/Schyler-Regular.ttf
#       - asset: fonts/Schyler-Italic.ttf
#         style: italic
#   - family: Trajan Pro
#     fonts:
#       - asset: fonts/TrajanPro.ttf
#       - asset: fonts/TrajanPro_Bold.ttf
#         weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages

# 平台适配
#  plugin:
#    platforms:
#      android:
#        package: com.flutter.app_market
#        pluginClass: AppMarketPlugin
#      ios:
#        pluginClass: AppMarketPlugin
#      macos:
#        default_package: app_market_macos
#      web:
#        default_package: app_market_web

整个工程的相关信息，资源管理、包管理等。

参考文章: 【Flutter 实战】pubspec.yaml 配置文件详解.