flutter使用.md

概念

1. Widgets

基础: 在 Flutter 中，几乎所有东西都是一个 Widget —— 它是构建界面的基本单位。Widgets 描述了它们在当前配置和状态下应该呈现的 UI。
类型: 有两种主要类型的 Widgets —— StatelessWidget 和 StatefulWidget。StatelessWidget 不变，而 StatefulWidget 持有状态，并且可以在其生命周期内改变。

Widget 树: 应用的界面是由 Widgets 组成的树状结构。每个 Widget 嵌套在其父 Widget 中，并且可能有多个子 Widget。
渲染流程: 当 Widget 的状态改变时（在 StatefulWidget 中），Flutter 框架会重建 Widget 树的一部分，这导致界面更新。

3. 状态管理

状态: 在 Flutter 中，状态是指应用数据或 UI 状态的当前配置。状态管理是指如何创建、显示和维护这些状态。
方法: 有多种方式可以管理状态，包括局部状态管理（如 StatefulWidget）和全局状态管理（如 Provider、Bloc、Redux）。

4. 布局和约束

布局: Flutter 使用一种强大且灵活的布局系统。Widgets 通过它们的父 Widget 提供的约束来确定自己的大小和位置。
常用布局 Widgets: 如 Row、Column、Stack、Container 等，它们各自有不同的布局行为。

5. 导航和路由

导航: 在 Flutter 应用中从一个屏幕（页面）导航到另一个屏幕。
路由: 路由是应用的屏幕或页面。Flutter 提供了 Navigator 类来管理路由栈。

6. 异步编程

异步操作: 如 API 调用或数据库操作，这些操作不会立即完成并返回结果。
Future 和 Stream: Dart 的 Future 和 Stream 用于处理异步数据。

7. 动画和动态交互

Flutter 提供了强大的动画库来创建平滑和复杂的动画。
了解如何使用 AnimationController、Tween 等来创建动画效果。

8. 包和插件

使用外部包和插件来增强应用的功能。
如何在 pubspec.yaml 中添加依赖，并使用 Dart Packages 中的资源。

9. 测试

测试是确保应用质量和性能的关键部分。Flutter 支持单元测试、组件测试和集成测试。

10. 性能优化

了解如何诊断性能问题并优化 Flutter 应用以提高效率和响应速度。

11. 国际化和本地化

支持多语言和本地文化，确保应用可以在全球范围内使用。

12. Flutter 2.0 之后的新特性

Flutter 的有经验的开发者，了解自 Flutter 2.0 以来引入的新特性（如空安全、新的渲染引擎等）也很重要。

StatefulWidget

在 Flutter 中，StatefulWidget 是一种当其状态可能在其生命周期内发生变化时使用的 Widget。以下是一个StatefulWidget的示例，它演示了一个简单的计数器应用，以及对其各部分的解释：

示例：简单计数器

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stateful Widget Demo',
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateful Widget Example'),
      ),
      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),
      ),
    );
  }
}

解释：

MyApp 类:
- MyApp 继承自 StatelessWidget，因为它本身不需要维护任何状态。
- build 方法返回一个 MaterialApp，其 home 属性设置为 CounterScreen。
CounterScreen 类:
- CounterScreen 是一个 StatefulWidget。当需要根据用户交互或其他因素来改变 Widget 的显示时，应该使用 StatefulWidget。
- 它重写了 createState 方法来创建 _CounterScreenState 的实例。
_CounterScreenState 类:
- _CounterScreenState 类包含了 CounterScreen 的状态。
- 它定义了一个 _counter 变量来存储计数器的值，并且有一个 _incrementCounter 方法来增加计数器的值。
- 每次调用 _incrementCounter 方法时，都会通过调用 setState 来更新界面。setState 会触发框架调用 _CounterScreenState 的 build 方法，从而更新 UI。
build 方法:
- build 方法构建并返回一个 Scaffold，包含一个 AppBar、一个显示计数器值的 Text，以及一个用于增加计数器值的 FloatingActionButton。
- 每当用户点击 FloatingActionButton 时，都会调用 _incrementCounter 方法。

最佳实践

将状态逻辑保持在 State 类中，而不是在 StatefulWidget 中。
使用 setState 来更新状态，这会导致 Flutter 重建 UI。
尽量保持 State 对象的简洁，避免过度膨胀。

通过使用 StatefulWidget，可以创建可以动态改变的交互式界面。在上面的例子中，每次点击按钮，计数器的值都会增加，并且界面会相应地更新显示新的值。

StatelessWidget

在 Flutter 中，StatelessWidget 是一种不可变的 widget，它不会改变其状态。它非常适合用于不需要响应任何内部状态改变的 UI 部分。以下是一个简单的 StatelessWidget 最佳实践示例，以及对其各部分的解释：

显示静态文本的 StatelessWidget

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stateless Widget Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateless Widget Example'),
        ),
        body: Center(
          child: GreetingText(),
        ),
      ),
    );
  }
}

class GreetingText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello, Flutter!',
      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    );
  }
}

解释：

导入必要的包:
- import 'package:flutter/material.dart'; 导入了 Flutter Material 库，这是构建 Material Design 应用的核心库。
主函数 (main):
- void main() { runApp(MyApp()); }: 这是每个 Flutter 应用的入口点。runApp 函数接收一个 Widget 并使其成为 widget 树的根。
MyApp 类:
- MyApp 类扩展了 StatelessWidget，这意味着 MyApp 是不可变的，并且其属性不会随时间改变。
- build 方法返回一个 MaterialApp 实例，它是 Material Design 应用的根 Widget。
MaterialApp:
- MaterialApp 是一个便利的 widget，它封装了多个用于 Material Design 应用程序的 widgets。
- title 属性定义了应用的标题。
- home 属性是应用的主屏幕，这里是一个 Scaffold。
Scaffold:
- Scaffold 是一个提供默认的导航栏、标题和包含主屏幕 widget 树的 body 属性的 widget。
- appBar 定义了应用的顶部栏。
- body 是一个 Center widget，它包含了自定义的 GreetingText widget。
GreetingText 类:
- GreetingText 也是一个 StatelessWidget，它的 build 方法返回一个 Text widget，显示 “Hello, Flutter!”。
- TextStyle 用于设置文本的样式，如字体大小和权重。

最佳实践：

简洁性: StatelessWidget 应保持简洁，只包含必要的 UI 元素。
无状态: 由于 StatelessWidget 不保存任何状态，它们应用于不需要响应任何状态更改的 UI 部分。
重用性: 将常用的 UI 部分封装在 StatelessWidget 中，以提高代码的重用性。

这个示例展示了如何使用 StatelessWidget 创建基础的静态 UI。理解和熟练使用 StatelessWidget 是学习 Flutter 的重要一步。

State 类

在 Flutter 中，State 类是与 StatefulWidget 紧密相关的，用于管理 StatefulWidget 的状态。State 对象存储了状态信息并提供了构建与其关联的 StatefulWidget 的界面的逻辑。以下是一个使用 State 类的示例，包括一个简单的计数器应用及其解释。

示例：简单计数器

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'State Class Demo',
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('State Class Example'),
      ),
      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),
      ),
    );
  }
}

解释：

CounterScreen 类:
- 这是一个 StatefulWidget。它重写了 createState() 方法来创建 _CounterScreenState 的实例。
_CounterScreenState 类:
- _CounterScreenState 类扩展了 State<CounterScreen>，表明这是 CounterScreen 的状态。
- 它包含一个 _counter 变量，这是它的状态（在这个例子中是计数器的值）。
- _incrementCounter() 方法用于递增 _counter 变量。在这个方法中，调用 setState() 会通知 Flutter 框架这个状态对象的状态已改变，导致它重新运行 build() 方法，从而更新 UI。
- build() 方法构建并返回一个 Scaffold widget，显示计数器的值并包含一个增加计数器的按钮。

最佳实践：

封装状态：将状态封装在 State 类中，而不是直接在 StatefulWidget 中。这有助于代码的组织和可读性。
**使用 setState()**：当状态改变时，使用 setState() 更新状态。这会通知框架需要重建 UI。
最小化 build() 方法的工作：build() 方法可能会频繁调用，因此应避免在其中放置过多的逻辑。将计算和复杂的操作移到 build() 方法之外。
管理资源：对于需要监听器或订阅的资源，应在 State 对象的 initState() 中进行初始化，在 dispose() 中进行清理，以避免内存泄漏。

通过使用 StatefulWidget 和 State 类，您可以创建动态且响应式的用户界面，其内容可以根据用户交互或内部状态的变化而改变。

要使另一个 StatefulWidget 监听 _counter 变量的变化，我们需要使用一种状态管理解决。在 Flutter 中，有多种方式来实现跨 widget 的状态共享和监听，例如使用 Provider、InheritedWidget、Bloc 或简单的回调。以下是使用回调和 Provider 包的两种方法：

方法 1: 使用回调

如果只需要简单地在几个 widget 之间共享状态，可以使用回调函数。

首先，修改 CounterScreen，使它接受一个回调函数，并在 _incrementCounter 方法中调用这个回调：

class CounterScreen extends StatefulWidget {
  final Function(int) onCounterChanged;

  CounterScreen({this.onCounterChanged});

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

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
    widget.onCounterChanged?.call(_counter);
  }

  // ... 其他代码保持不变
}

然后，在创建 CounterScreen 的地方，传递一个处理 _counter 变化的回调函数：

CounterScreen(
  onCounterChanged: (newCounterValue) {
    // 处理 _counter 变化的逻辑
  },
)

方法 2: 使用 Provider

对于更复杂的应用，可能想要使用 Provider 包来更优雅地管理状态。

添加 Provider 依赖：
在 pubspec.yaml 文件中添加 provider 包的依赖。
创建一个 Model 类：
创建一个用于存储 _counter 变量和更改通知的模型类。

class CounterModel extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  void incrementCounter() {
    _counter++;
    notifyListeners();
  }
}

在应用顶层使用 ChangeNotifierProvider：
在 main.dart 或最顶层 widget 中，使用 ChangeNotifierProvider 包裹的应用或特定屏幕。

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ),
  );
}

修改 CounterScreen 以使用 CounterModel：
然后，修改 CounterScreen 以使用 CounterModel。

class _CounterScreenState extends State<CounterScreen> {
  @override
  Widget build(BuildContext context) {
    final counterModel = Provider.of<CounterModel>(context, listen: false);

    return Scaffold(
      // ... UI代码
      floatingActionButton: FloatingActionButton(
        onPressed: () => counterModel.incrementCounter(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

在其他 widget 中监听变化：
在另一个 StatefulWidget 中，可以使用 Provider.of 来监听 _counter 的变化。

@override
Widget build(BuildContext context) {
  int counter = Provider.of<CounterModel>(context).counter; // 自动监听变化

  // 使用 counter 构建 UI
}

使用 Provider，可以在应用的不同部分中共享和监听 CounterModel 的状态，从而实现跨 widget 的状态同步。这种方法适合于更复杂或更大型的应用，它有助于保持代码的清晰和组织。

Provider

Provider 是 Flutter 中一种流行的状态管理解决方案，它允许数据和状态跨 widget 树高效地共享和更新。以下是使用 Provider 的一个最佳实践示例，以及对其各部分的解释：

示例：计数器应用

首先，在的 Flutter 项目的 pubspec.yaml 文件中添加 provider 作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0 # 请使用最新版本

然后，创建一个简单的计数器模型：

import 'package:flutter/foundation.dart';

class CounterModel with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 通知监听器有更新
  }
}

CounterModel 类使用 ChangeNotifier 来通知听众（在这种情况下是 widget），当内部状态（这里是 _count）改变时。

接下来，在应用的顶层使用 ChangeNotifierProvider：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Provider Demo',
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Example'),
      ),
      body: Center(
        child: Consumer<CounterModel>(
          builder: (context, counter, child) {
            return Text('Count: ${counter.count}');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterModel>().increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

解释：

CounterModel:
- CounterModel 继承自 ChangeNotifier，它允许在模型更改时通知其监听者。
- 当调用 increment 方法时，它增加 _count 的值并调用 notifyListeners。
ChangeNotifierProvider:
- ChangeNotifierProvider 创建并提供 CounterModel 的一个实例。
- 它位于 MyApp 的顶层，确保在整个应用范围内都可以访问到 CounterModel。
Consumer:
- Consumer<CounterModel> 用于构建依赖于 CounterModel 的 widget。
- 它的 builder 方法会在 CounterModel 发送通知时被重新调用。
FloatingActionButton:
- 当按钮被按下时，通过 context.read<CounterModel>().increment() 调用 CounterModel 的 increment 方法。

最佳实践：

封装状态逻辑：在模型类（如 CounterModel）中封装状态和状态管理逻辑。
使用 ChangeNotifier 通知变化：当模型的状态改变时，通过调用 notifyListeners 通知监听者。
在 widget 树的合适位置提供模型：使用 ChangeNotifierProvider 在 widget 树中的适当位置提供模型实例。
使用 Consumer 或 Provider.of 来访问模型：在需要接收模型数据的 widget 中，使用 Consumer 或 context.watch/read 来获取并使用模型数据。
分离 UI 和业务逻辑：通过将状态管理从 UI 代码中分离出来，让代码更易于维护和测试。

通过这种方式使用 Provider，可以在应用中有效地管理和共享状态，同时保持代码的清晰和组织。

MaterialApp

MaterialApp 是 Flutter 中一个非常重要的 widget，它将多个用于构建 Material Design 应用的 widgets 封装在一起。理解 MaterialApp 的最佳实践和使用场景对于高效地开发 Flutter 应用至关重要。

最佳实践

应用的入口: 将 MaterialApp 作为应用的根 Widget。通常在 main.dart 文件的 main 函数中通过 runApp 方法启动。
配置主题: 使用 MaterialApp 的 theme 属性来全局定义应用的基本风格，如颜色、字体样式、按钮样式等。
导航和路由: 使用 MaterialApp 的 routes 属性来定义应用的顶级路由表，利用 navigatorKey 和 onGenerateRoute 管理更复杂的路由场景。
本地化和国际化: 通过 MaterialApp 的 localizationsDelegates 和 supportedLocales 属性支持多语言。
性能监控: 利用 MaterialApp 的 debugShowCheckedModeBanner、debugShowMaterialGrid 等属性来显示调试信息，帮助优化布局和性能。
错误处理: 使用 MaterialApp 的 onUnknownRoute 和 builder 属性来处理未知路由或生成应用级别的 widget。

使用场景

标准 Material Design 应用: 当需要构建符合 Material Design 指南的应用时，MaterialApp 提供了一套现成的解决方案。
多页面路由管理: 对于拥有多个页面和复杂路由需求的应用，MaterialApp 提供了路由管理的功能，简化了页面间的导航。
主题统一管理: 在需要统一管理应用级别样式和主题时，MaterialApp 允许在一个地方定义整个应用的外观。
国际化应用: 当应用需要支持多种语言时，MaterialApp 通过本地化代理简化了这个过程。

示例

MaterialApp(
  title: 'My Flutter App',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/details': (context) => DetailsPage(),
  },
  onUnknownRoute: (settings) => MaterialPageRoute(
    builder: (context) => UnknownPage(),
  ),
);

在这个示例中，MaterialApp 定义了应用的标题、主题、初始路由、路由表以及未知路由的处理方式。这样的配置确保了应用具有统一的风格和行为，并且易于维护和扩展。

总之，MaterialApp 是构建任何基于 Material Design 的 Flutter 应用的基础，理解并熟练使用它对于开发高质量的 Flutter 应用是非常重要的。

MaterialApp 是 Flutter 中的一个非常重要的 widget，提供了许多参数来配置应用程序的各个方面。以下是 MaterialApp 的一些主要参数及其含义的详细说明：

MaterialApp 参数

1. `title`

类型: String
含义: 应用程序的标题。通常用于设备任务管理器和浏览器标签页。

2. `theme`

类型: ThemeData
含义: 应用的默认主题。可以通过此参数定义应用的基本风格，如颜色、字体样式、按钮样式等。

3. `color`

类型: Color
含义: 在 Android 中，此颜色用作应用任务管理器中的背景颜色。

4. `home`

类型: Widget
含义: 应用的首页 widget。它是显示在应用程序启动时的首个屏幕。

5. `routes`

类型: Map<String, WidgetBuilder>
含义: 应用的路由表。键是路由的名称，值是构建它们的构造器。

6. `initialRoute`

类型: String
含义: 应用启动时的初始路由名。如果提供了 home 参数，则此参数将被忽略。

7. `onGenerateRoute`

类型: RouteFactory
含义: 当通过 Navigator.pushNamed 导航到命名路由时，会使用这个函数来生成路由。

8. `onUnknownRoute`

类型: RouteFactory
含义: 当 onGenerateRoute 无法生成路由时调用，通常用于显示错误视图。

9. `navigatorKey`

类型: GlobalKey<NavigatorState>
含义: 用于访问应用的 Navigator 的全局键。

10. `builder`

类型: TransitionBuilder
含义: 一个用于在应用上方插入 widget 的构造器，例如用于插入一个全局的 Overlay 或者 Theme。

11. `debugShowCheckedModeBanner`

类型: bool
含义: 在调试模式下，在屏幕右上角显示一个横幅。默认为 true。

12. `locale`

类型: Locale
含义: 应用的区域设置。如果未设置，则根据设备设置决定。

13. `supportedLocales`

类型: Iterable<Locale>
含义: 应用支持的区域列表。用于国际化。

14. `localizationsDelegates`

类型: Iterable<LocalizationsDelegate<dynamic>>
含义: 用于生成本地化资源的委托。

15. `localeResolutionCallback`

类型: LocaleResolutionCallback
含义: 当应用的区域设置与 supportedLocales 不匹配时，可以用此回调来自定义选择匹配的逻辑。

16. `highContrastTheme` 和 `darkTheme`

类型: ThemeData
含义: 分别为高对比度和暗色模式指定主题。

这些参数提供了对 Flutter 应用外观、行为和路由的全面控制。通过合理配置这些参数，可以开发出符合需求且用户体验良好的应用程序。

pubspec.yaml

pubspec.yaml 是一个在每个 Dart 和 Flutter 项目中都非常关键的文件。它用于定义项目的名称、版本、依赖项以及其他一些重要的元数据。以下是 pubspec.yaml 文件的主要部分及其作用的介绍：

1. 项目名称和描述

1 2	`name: my_flutter_app description: A new Flutter project.`

name: 项目的名称，通常与包名一致。
description: 项目的简短描述。

2. 版本

1	`version: 1.0.0+1`

version: 项目的当前版本号。这通常遵循语义化版本控制。+1 是构建号，它通常用于更新程序时不改变版本号的情况。

3. 环境要求

1 2	`environment: sdk: ">=2.7.0 <3.0.0"`

environment: 指定项目所需的 Dart SDK 版本。

4. 依赖

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

dependencies: 列出项目需要的所有包依赖。这里包括了 Flutter SDK 本身和其他的包，如 cupertino_icons。

5. 开发依赖

1
2
3

dev_dependencies:
  flutter_test:
    sdk: flutter

dev_dependencies: 列出项目开发过程中需要的依赖，但在生产环境中不需要的。例如，测试框架。

6. Flutter 特定配置

flutter:
  uses-material-design: true
  assets:
    - images/a_dot_burr.jpeg
    - images/a_dot_ham.jpeg

flutter: 特定于 Flutter 的配置。
- uses-material-design: 是否在项目中使用 Material Design。
- assets: 项目资源的列表，例如图片、字体等。

7. 其他配置

还可以包括其他配置，如 publish_to（定义是否应将包发布到 pub.dev）、自定义脚本等。

作用

pubspec.yaml 文件是项目的核心，用于管理项目的依赖项、版本和其他重要设置。当运行 flutter pub get 命令时，Flutter 会查看 pubspec.yaml 文件并下载所需的依赖包。这个文件对于项目的构建和打包也至关重要。

简而言之，pubspec.yaml 是 Dart 和 Flutter 项目的蓝图，它告诉 Flutter 如何正确构建和运行的应用。

domain > dart

#dart #flutter

flutter使用.md

https://abrance.github.io/2024/01/04/domain/dart/flutter使用/

Author

xiaoy

Posted on

January 4, 2024

Licensed under

软件关键质量属性.md Previous

git使用问题.md Next

flutter使用.md

概念

1. Widgets

2. Widget 树和渲染流程

3. 状态管理

4. 布局和约束

5. 导航和路由

6. 异步编程

7. 动画和动态交互

8. 包和插件

9. 测试

10. 性能优化

11. 国际化和本地化

12. Flutter 2.0 之后的新特性

StatefulWidget

示例：简单计数器

解释：

最佳实践

StatelessWidget

显示静态文本的 StatelessWidget

解释：

最佳实践：

State 类

示例：简单计数器

解释：

最佳实践：

方法 1: 使用回调

方法 2: 使用 Provider

Provider

示例：计数器应用

解释：

最佳实践：

MaterialApp

最佳实践

使用场景

示例

MaterialApp 参数

1. title

2. theme

3. color

4. home

5. routes

6. initialRoute

7. onGenerateRoute

8. onUnknownRoute

9. navigatorKey

10. builder

11. debugShowCheckedModeBanner

12. locale

13. supportedLocales

14. localizationsDelegates

15. localeResolutionCallback

16. highContrastTheme 和 darkTheme

pubspec.yaml

1. 项目名称和描述

2. 版本

3. 环境要求

4. 依赖

5. 开发依赖

6. Flutter 特定配置

7. 其他配置

作用

1. `title`

2. `theme`

3. `color`

4. `home`

5. `routes`

6. `initialRoute`

7. `onGenerateRoute`

8. `onUnknownRoute`

9. `navigatorKey`

10. `builder`

11. `debugShowCheckedModeBanner`

12. `locale`

13. `supportedLocales`

14. `localizationsDelegates`

15. `localeResolutionCallback`

16. `highContrastTheme` 和 `darkTheme`