Flutter 示例项目教程

1. 项目目录结构及介绍

在 flutter-examples 项目中，您通常会看到以下典型的目录结构：

flutter-examples/
├── .gitignore            # Git 忽略文件列表
├── README.md              # 项目说明文档
├── lib/                   # 主要代码库
│   ├── main.dart          # 应用程序入口点
│   └── ...                # 其他dart源文件和包
└── pubspec.yaml           # 项目元数据和依赖管理

• .gitignore: 确定哪些文件或目录不会被添加到Git版本控制中。
• README.md: 提供项目简介、安装指南以及如何运行项目等信息。
• lib/: 存放项目的主要源代码，包括业务逻辑和UI组件。
  • main.dart: 应用程序的启动文件，其中包含runApp()函数，用于启动Flutter应用。
• pubspec.yaml: 项目配置文件，定义了项目名称、版本、作者信息以及依赖关系。

2. 项目的启动文件介绍

启动文件通常是 lib/main.dart。在这个文件中，您会找到像下面这样的代码片段，它是Flutter应用的基本结构：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      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(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

main() 函数是Dart程序的入口点，它调用了 runApp() 来启动Flutter应用程序。MyApp 是一个无状态的 StatelessWidget，它包含了整个应用的结构，而 MyHomePage 是一个有状态的 StatefulWidget，负责显示页面内容并处理用户交互。

3. 项目的配置文件介绍

pubspec.yaml 文件定义了项目的基本信息和依赖项，例如：

name: flutter_examples
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

• name: 项目的唯一标识名。
• description: 对项目的简短描述。
• version: 项目的版本号，遵循 Semantic Versioning 规范。
• environment.sdk: 指定Dart SDK的版本范围。
• dependencies: 项目运行所需的外部依赖库，如 flutter 和 cupertino_icons。
• dev_dependencies: 开发阶段使用的依赖库，如测试框架 flutter_test。
• flutter: 针对Flutter特定的设置，如启用Material设计组件。

要安装依赖并启动项目，确保您已安装Flutter SDK，然后在终端中切换到项目根目录并执行以下命令：

flutter packages get
flutter run

这将安装所有必要的依赖，并在模拟器或连接的设备上启动应用。