前言

2015.6的Google I/O大会公开介绍了Flutter。2017.5正式发布首个Alpha版本，2018.12发布1.0版本。flutter为了尽快推出产品、减少开销、缩短开发周期、提高开发效率。Flutter3的发布实现了对6大主要平台支持Android、iOS、Windows、Web、macOS(新增)、Linux(新增)。

// material UI组件
import 'package:flutter/material.dart';

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

// 没有状态的Widget
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'AppBar title'),
    );
  }
}
// 有状态的组件；key：确定widget在widget树中唯一性，super.key表示从父类继承
// title:构建ui需要的数据
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
// _(下划线)表示类时私有类，不能在其他文件中访问。
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    // StatefulWidget 提供的函数，通知Flutter框架有状态发生改变
    setState(() {
      _counter++;
    });
  }

  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

  // 第一次创建或者状态发生改变时，Flutter框架会自动调用此方法。
  // 避免在这里进行耗时操作：网络请求，大量计算等
  @override
  Widget build(BuildContext context) {
    // Scaffold 页面脚手架
    return Scaffold(
      // 顶部栏
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 页面标题
        title: Text(widget.title),
      ),
      // 内容部分
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      // 悬浮按钮
      floatingActionButton: Column(
        // 底部
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton.extended(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            icon: const Icon(Icons.add),
            label:const Text('Increment'),
          ),
          const SizedBox(height: 10),
          FloatingActionButton.extended(
            onPressed: _decrementCounter,
            icon: const Icon(Icons.remove),
            label:const Text('Decrement'),
          ),
        ],
      ),
    );
  }
}

项目结构

.dart_tool/  Flutter自动生成的配置和构建输出，一般不需要开发者去修改
.idea/     IDEA的配置信息
android/   Android原生项目文件
build/     存放构建产物的文件夹
ios/       iOS原生项目文件夹
lib/       ⭐存放Flutter源代码，大部分开发者会在这个目录下进行
lib/main.dart  ⭐Flutter应用程序的主要入口
linux/     linux平台相关代码以及配置文件
macos/     mac平台相关代码以及配置文件
test/      测试文件
web/       web平台相关代码以及配置文件
windows/   windows平台相关代码以及配置文件
.metadata  Dart编译器生成的元数据文件，包含有关项目的编译和依赖，metadata报错?报错直接删除让Dart重新编译
analysis_options.yaml  配置静态代码分析工具，可定义代码风格、禁用和启用特定警告和错误检查
hello_flutter.iml   IntelliJ IDEA项目文件，描述模块项目和依赖项，及其他配置信息，用于确保项目可以在IntelliJ IDEA或AndroidStudio中正确加载和编译
pubspec.lock  项目依赖项的锁定信息，由pubspec.yaml自动生成，确保项目在不同环境使用相同的依赖项版本。
pubspec.yaml   ⭐Flutter项目配置文件，依赖、插件、资源等。

pubspec.yaml文件，项目的配置文件：

name: flutter4 # 项目名称
description: "A new Flutter project." #项目描述
publish_to: 'none' # 防止上传到pub.dev 类似于maven

version: 1.0.0+1  # 版本号 版本名字 +1 是第一个版本

environment: # 程序所需要的环境
  sdk: '>=3.3.4 <4.0.0' # 程序dart SDK的版本范围

dependencies: # 程序依赖的外部库
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.6
  http: ^1.1.0 # 添加http依赖

dev_dependencies: # 开发时的依赖包，一般时测试框架之类
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

flutter: # flutter特定字段，比如配置
  uses-material-design: true # 是否启用Material Design 风格
  assets:
    - assets/

flutter项目结构

前言

项目结构