带你阅读 Flutter Demo(flutter 保姆级入门教程)

简介: 带你阅读 Flutter Demo(flutter 保姆级入门教程)

dart、flutterFlutter Demo 解析


1. 概述

2. 第一部分:Material 导入 和主函数

2.1 看代码

这部分代码为:

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}

2.2 导入 Material

import 'package:flutter/material.dart';

这行代码导入了 Flutter 的 Material 库,它提供了大量的预定义 UI 组件和样式,使我们能够快速构建具有 Material Design 风格的应用程序。

2.2 main函数

程序入口

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

main() 函数是 Dart 程序的入口点。在这个函数中,我们调用了 runApp() 方法并传递了一个 MyApp 类的常量实例。runApp() 方法将传入的 Widget(组件)作为应用程序的根 Widget,并开始构建 Widget 树。在这里,我们将自定义的 MyApp Widget 作为应用程序的根 Widget

runApp 函数

runApp() 函数是 Flutter 应用程序的启动函数。它接受一个 Widget 参数,作为应用程序的根 Widget。当调用 runApp() 函数时,Flutter 会将传入的 Widget 附加到渲染树中,并开始构建和显示整个 Widget 树。这个函数通常在应用程序的 main() 函数中调用,以便在应用程序启动时执行。

runApp() 函数的相关信息如下:

项目 描述
参数 runApp() 函数接受一个 Widget 参数,这个 Widget 通常是一个自定义的根 Widget,它包含了应用程序的整个 UI 结构。
功能 runApp() 函数将传入的 Widget 作为根 Widget,附加到渲染树中。接着,Flutter 开始构建和显示整个 Widget 树,从根 Widget 开始,逐级向下构建各个子 Widget
用法 runApp() 函数通常在应用程序的 main() 函数中调用,以便在应用程序启动时执行。

例如:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hello World')),
        body: Center(child: Text('Welcome to my app!')),
      ),
    );
  }
}

在这个示例中,runApp() 函数在 main() 函数中被调用,并传入了一个 MyApp 类的实例。MyApp 是一个自定义的根 Widget,包含了整个应用程序的 UI 结构。

3. 第二部分:无状态组件 MyApp 类

3.1 看代码

这部分代码为:

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // 这个 widget 是您应用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是您应用程序的主题。
        //
        // 尝试一下:尝试使用 "flutter run" 运行您的应用程序。您会看到
        // 应用程序具有蓝色的工具栏。然后,在不退出应用的情况下,
        // 尝试将下面 colorScheme 中的 seedColor 更改为 Colors.green,
        // 然后调用 "hot reload"(保存更改或按下 Flutter 支持的 IDE 中的 "hot
        // reload" 按钮,或者如果您使用了命令行启动应用程序,则按 "r")。
        //
        // 注意计数器没有重置为零;应用程序状态在重新加载期间不会丢失。
        // 要重置状态,请使用热重启代替。
        //
        // 这对代码也同样适用,而不仅仅是值:大多数代码更改都可以
        // 通过热重载进行测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter演示主页'),
    );
  }
}

3.2 继承 StatelessWidget 类

以下是对 Flutter 代码的解析:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

这段代码定义了一个名为 MyApp 的类,该类继承自 StatelessWidgetStatelessWidget 是一个不可变的 Widget,它描述了应用程序的一部分 UI。MyApp 类有一个构造函数,它接受一个名为 key 的可选参数,并将其传递给父类 StatelessWidget 的构造函数。

3.3 StatelessWidget 类的 build 方法

@override
  Widget build(BuildContext context) {

这里我们覆盖了 StatelessWidget 类中的 build 方法。build 方法是一个返回 Widget 的函数,它接受一个 BuildContext 参数。BuildContext 是一个表示当前 Widget 在 Widget 树中的位置的对象。当 Flutter 需要构建这个 Widget 时,会调用这个方法。

return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter演示主页'),
    );
  }
}

build 方法中,我们返回一个 MaterialApp Widget。MaterialApp 是一个方便的顶级 Widget,它包含了许多 Material Design 风格的应用程序所需的基本组件。它接受以下参数:

  • title:应用程序的标题,通常用于任务管理器或窗口标题。
  • theme:应用程序的主题数据。在这里,我们使用ThemeData类来创建一个自定义主题,其中:
  • colorScheme:使用 ColorScheme.fromSeed() 方法生成一个基于 Colors.deepPurple 的颜色方案。
  • useMaterial3:设置为 true,以便在应用程序中使用 Material 3 风格。
  • home:应用程序的主屏幕 Widget。在这里,我们创建了一个名为 MyHomePage 的自定义 Widget,并设置了其标题为 “Flutter演示主页”。

StatelessWidget 类中,build 方法是一个描述由该 Widget 表示的用户界面部分的方法。它通过构建其他 Widget 的组合来描述用户界面,这些 Widget 以更具体的方式描述用户界面。构建过程会递归进行,直到用户界面的描述完全具体化。框架会在将此 Widget 插入到给定的 BuildContext 中以及此 Widget 的依赖关系发生更改(例如,此 Widget 引用的 InheritedWidget 发生更改)时调用此方法。

在实践中,build 方法的主要作用是返回一个新的 Widget,该 Widget 描述了应用程序的用户界面。通常,这个方法会包含一些条件逻辑,以便根据传入的参数或外部状态生成不同的 Widget。这使得 StatelessWidget 成为一个非常灵活的构建块,可以用来创建复杂的用户界面。

@override
Widget build(BuildContext context) {
  // 在此处返回一个新的 Widget,描述应用程序的用户界面。
}

3.4 Dart 语言中的 @override 注解

关于 dart 语言的注解,可以参考博文《Dart笔记:Dart语言中的注解》

@override注解用于表示子类的方法覆盖了父类的方法。这有助于在重构代码时确保正确地覆盖了父类方法。如果没有正确覆盖,Dart分析器会发出警告。

3.5 MaterialApp 顶层组件

MaterialApp 是一个方便的顶级 Widget,它封装了一些 Material Design 风格的应用程序所需的基本组件,如导航、主题和路由。它继承自 WidgetsApp 类,提供了一些与 Material Design 相关的功能。以下是 MaterialApp 的一些主要属性及其解释:

属性 类型 默认值 描述 参考链接
title String ‘’ 应用程序的标题,将显示在操作系统的任务切换器中。 MaterialApp.title
home Widget null 应用程序的默认页面,通常是显示在应用程序启动时的第一个页面。 MaterialApp.home
theme ThemeData null 应用程序的全局主题。您可以定义自己的 ThemeData 对象,以自定义应用程序的颜色、字体、按钮样式等。 MaterialApp.theme
color Color null 应用程序在操作系统界面中使用的主色,如 Android 的任务切换器。如果未设置,则使用 ThemeData.primaryColor MaterialApp.color
routes Map<String, WidgetBuilder> null 应用程序的路由表,用于定义应用程序中的页面导航。路由表是一个字符串到 WidgetBuilder 的映射,其中字符串表示路由名称,WidgetBuilder 是一个接受 BuildContext 并返回 Widget 的函数。 MaterialApp.routes
initialRoute String null 应用程序的初始路由名称。如果设置了 initialRoute,则在启动时将导航至该路由,而不是使用 home 属性。 MaterialApp.initialRoute
onGenerateRoute RouteFactory null 一个回调函数,用于根据给定的路由设置生成路由。如果您需要在应用程序中使用动态路由或参数化路由,可以使用此属性。 MaterialApp.onGenerateRoute
onUnknownRoute RouteFactory null 一个回调函数,用于处理未在 routes 表中找到的路由。通常用于显示一个 “404 页面未找到” 的错误页面。 MaterialApp.onUnknownRoute
navigatorKey GlobalKey<NavigatorState> null 与应用程序的 Navigator 相关联的全局键。如果您需要从应用程序的其他部分访问 Navigator,可以使用此属性。 MaterialApp.navigatorKey
builder TransitionBuilder null 一个回调函数,可以在应用程序的路由之上插入一个 Widget。这对于需要在整个应用程序范围内显示的 Widget(如对话框或覆盖层)非常有用。 MaterialApp.builder
localizationsDelegates List<LocalizationsDelegate<dynamic>> null 一个 LocalizationsDelegate 列表,用于设置应用程序的本地化资源。 MaterialApp.localizationsDelegates
supportedLocales List<Locale> null 应用程序支持的地区列表。 MaterialApp.supportedLocales

以下是一个简单的 MaterialApp 示例:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

3.6 色彩方案:ColorScheme 类

官方文档位于:https://api.flutter.dev/flutter/material/ColorScheme-class.html

ColorScheme 是一个包含一组用于描述应用程序颜色的属性的类。它是一个不可变的对象,用于定义应用程序中使用的颜色。在 Material Design 中,ColorScheme 用于定义主题的颜色。以下是 ColorScheme 的一些常用属性:

属性 描述
primary 应用程序主要部分的背景颜色。例如,工具栏和浮动操作按钮。
primaryVariant 主要颜色的较暗版本。
secondary 应用程序次要部分的背景颜色。例如,选项卡栏。
secondaryVariant 次要颜色的较暗版本。
surface 卡片和抽屉等表面元素的背景颜色。
background 应用程序背景颜色。
error 错误状态和异常情况下使用的颜色。
onPrimary 显示在主要颜色上的文本和图标的颜色。
onSecondary 显示在次要颜色上的文本和图标的颜色。
onSurface 显示在表面颜色上的文本和图标的颜色。
onBackground 显示在背景颜色上的文本和图标的颜色。
onError 显示在错误颜色上的文本和图标的颜色。
brightness 应用程序的整体亮度。它是一个 Brightness 枚举,可以是 Brightness.lightBrightness.dark

例如:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ColorScheme Demo',
      theme: ThemeData(
        colorScheme: ColorScheme(
          primary: Colors.blue,
          primaryVariant: Colors.blue[700],
          secondary: Colors.orange,
          secondaryVariant: Colors.orange[700],
          surface: Colors.white,
          background: Colors.white,
          error: Colors.red,
          onPrimary: Colors.white,
          onSecondary: Colors.white,
          onSurface: Colors.black,
          onBackground: Colors.black,
          onError: Colors.white,
          brightness: Brightness.light,
        ),
      ),
      home: MyHomePage(),
    );
  }
}

4. 第三部分:有状态组件 MyHomePage

4.1 看代码

这部分代码如下:

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  // 这个 widget 是你的应用程序的主页。它是有状态的,这意味着它有一个 State 对象
  // (在下面定义),其中包含影响其外观的字段。
  // 这个类是 state 的配置。它保存了由父级(在本例中是 App widget)提供的值
  // (在本例中是标题),并被 State 的 build 方法使用。Widget 子类中的字段总是
  // 被标记为 "final"。
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

4.2 继承于 StatefulWidget 类

这段代码定义了一个名为 MyHomePageStatefulWidget 类,表示该类为一个 有状态组件

class MyHomePage extends StatefulWidget {

这一行定义了一个名为 MyHomePage 的类,它继承自 StatefulWidgetStatefulWidget 是 Flutter 中的一种 Widget,它可以在其生命周期内保持可变状态。

const MyHomePage({super.key, required this.title});

这是 MyHomePage 类的构造函数。它接受两个参数:

  • super.key:这是传递给父类(StatefulWidget)构造函数的可选 key 参数。key 参数用于控制框架如何将新的 Widget 与先前的 Widget 关联起来。通常情况下,您不需要处理 key,除非您在处理有状态的 Widget 或需要对 Widget 树进行优化。
  • required this.title:这是一个必需的 title 参数,它是一个字符串。required 关键字表示调用构造函数时必须提供此参数。this.title 表示将传入的参数值赋给类的 title 属性。

4.3 title 属性

final String title;

这一行定义了一个名为 title 的不可变字符串属性。final 关键字表示一旦初始化后,这个属性将无法更改。

4.4 createState 方法

@override
  State<MyHomePage> createState() => _MyHomePageState();

这是 createState 方法,它是 StatefulWidget 类的必需方法。此方法用于创建与此 StatefulWidget 实例关联的状态对象。@override 关键字表示我们在这里重写了父类的方法。State<MyHomePage> createState() => _MyHomePageState(); 表示我们将返回一个名为 _MyHomePageState 的新状态对象。

createState 方法是 StatefulWidget 类的核心方法,它用于创建与 StatefulWidget 实例关联的状态对象。当框架需要构建 StatefulWidget 时,它会调用此方法以创建一个新的状态对象。这个状态对象将在 StatefulWidget 的整个生命周期中保持与之关联。

  • @override:这是一个元数据注解,表示我们将重写父类 StatefulWidget 的方法。在这种情况下,我们重写 createState 方法。这样做的目的是为了提供一个自定义的状态对象,以便在构建我们的 MyHomePage StatefulWidget 时使用。
  • State<MyHomePage> createState():这是我们重写的方法。方法的返回类型是 State<MyHomePage>,表示我们将返回一个与 MyHomePage 类型关联的状态对象。这个状态对象将负责管理与 MyHomePage 实例相关的状态。
  • => _MyHomePageState();:这是一个简化的函数体,等同于 { return _MyHomePageState(); }。箭头函数表示我们将创建一个名为 _MyHomePageState 的新状态对象,并将其作为结果返回。

要了解 createState 方法的重要性,我们需要了解 StatefulWidget 的工作原理。StatefulWidget 是一个具有可变状态的 Widget。当 StatefulWidget 的状态发生变化时,框架会重新构建 Widget 树以反映这些更改。为了实现这一点,框架需要知道如何创建与 StatefulWidget 实例关联的状态对象。这就是 createState 方法的作用:告诉框架如何创建状态对象。

在实际应用中,createState 方法通常会返回一个自定义的 State 子类,该子类包含了与 StatefulWidget 实例关联的状态数据和逻辑。这使得 StatefulWidget 可以在其生命周期内保持状态,从而实现动态 UI、响应事件和执行其他与状态相关的操作。

5. 状态类 _MyHomePageState

5.1 看代码

在上一节中,定义了一个名为 MyHomePage 的 有状态组件(继承于StatefulWidget 类)。其 createState 方法中使用了一个名为 _MyHomePageState状态类,该类将在创建 MyHomePage 实例时与其关联。

_MyHomePageState 类是一个自定义的 State 子类,负责管理与 MyHomePage 实例相关的状态。它包含一个 _counter 属性,表示按下按钮的次数,以及一个 _incrementCounter 方法,用于更新 _counter 的值。它还实现了 build 方法,用于构建与 MyHomePage 实例关联的 UI。

_MyHomePageState 类的代码如下:

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      // 这个对 setState 的调用告诉 Flutter 框架,这个 State 中的某些内容已经发生了变化,
      // 这将导致它重新运行下面的 build 方法,以便显示可以反映更新后的值。如果我们更改了
      // _counter 而没有调用 setState(),那么 build 方法将不会再次被调用,因此什么都不会发生。
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    // 每次调用 setState 时,例如上面的 _incrementCounter 方法所做的,
    // 都会重新运行此方法。
    // Flutter 框架已经过优化,以使得重新运行 build 方法变得更快,
    // 因此你可以重建任何需要更新的内容,而不是必须单独更改 widget 实例。
    return Scaffold(
      appBar: AppBar(
        // 尝试一下:尝试将这里的颜色更改为特定颜色(例如 Colors.amber?),
        // 然后触发热重载以查看 AppBar 的颜色变化,而其他颜色保持不变。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 这里我们从由 App.build 方法创建的 MyHomePage 对象中获取值,
        // 并将其用于设置我们的 appbar 标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center 是一个布局 widget。它接受一个子 widget,并将其定位
        // 在父 widget 的中央。
        child: Column(
          // Column 也是一个布局 widget。它接受一组子 widget,并垂直排列它们。
          // 默认情况下,它会自动调整自身尺寸以适应其子 widget 水平方向的尺寸,
          // 并尽量与其父 widget 一样高。
          // Column 具有各种属性来控制它如何调整自身尺寸以及如何定位其子 widget。
          // 在这里,我们使用 mainAxisAlignment 将子 widget 垂直居中;主轴在这里
          // 是垂直轴,因为 Column 是垂直的(交叉轴将是水平的)。
          // 尝试一下:调用 "debug painting"(在 IDE 中选择 "Toggle Debug Paint"
          //操作,或者在控制台中按 "p"),以查看每个 widget 的线框。
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你已经按了这个按钮很多次了:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // 这个尾随逗号使得自动格式化在构建方法中更加美观。
    );
  }
}

_MyHomePageState 类应该继承自 State 类,并实现 build 方法以构建与 MyHomePage 实例关联的 UI。

5.2 State 类

State 类的官方文档地址为:https://api.flutter.dev/flutter/widgets/State-class.html

在Flutter中,State类是与StatefulWidget相关的一个重要概念。State对象存储了一个StatefulWidget的可变状态。当状态改变时,State对象会通知Flutter框架重建UI。

State类的生命周期包括以下几个阶段:

阶段 描述
created State对象被创建时,State.initState方法会被调用。
initialized State对象被创建,但还没有准备构建时,State.didChangeDependencies在这个时候会被调用。
ready State对象已经准备好了构建,State.dispose没有被调用的时候。
defunct State.dispose被调用后,State对象不能够被构建。

要改变State对象的状态,可以使用setState方法。setState方法接受一个回调函数,该函数对状态进行修改。当回调函数执行完毕后,Flutter框架将安排重建UI。

下面是一个简单的例子,演示了如何使用State类和setState方法:

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
  int _count = 0;
  void _incrementCounter() {
    setState(() {
      _count = _count + 1;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('You have pushed the button this many times:'),
        Text('$_count', style: Theme.of(context).textTheme.headline4),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment Counter'),
        ),
      ],
    );
  }
}

在这个例子中,_CounterState类维护了一个名为_count的状态。当用户点击按钮时,_incrementCounter方法会被调用,使用setState方法更新_count的值。这将触发Flutter框架重建UI,以显示更新后的计数值。

5.3 提升按钮:ElevatedButton组件

这是 Flutter 提供的诸多按钮中的一种,其前身为 凸起按钮:RaisedButton组件RaisedButton现在已经被废弃,官方推荐使用 ElevatedButton 替代。

关于 Flutter 的各种按钮类组件及其详细用法的更多介绍,请参考博文《Flutter 组件(三)按钮类组件》https://blog.csdn.net/qq_28550263/article/details/131387856


F. 附录

F.1 Flutter Demo 完整源代码

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // 这个 widget 是您应用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是您应用程序的主题。
        //
        // 尝试一下:尝试使用 "flutter run" 运行您的应用程序。您会看到
        // 应用程序具有蓝色的工具栏。然后,在不退出应用的情况下,
        // 尝试将下面 colorScheme 中的 seedColor 更改为 Colors.green,
        // 然后调用 "hot reload"(保存更改或按下 Flutter 支持的 IDE 中的 "hot
        // reload" 按钮,或者如果您使用了命令行启动应用程序,则按 "r")。
        //
        // 注意计数器没有重置为零;应用程序状态在重新加载期间不会丢失。
        // 要重置状态,请使用热重启代替。
        //
        // 这对代码也同样适用,而不仅仅是值:大多数代码更改都可以
        // 通过热重载进行测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter演示主页'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  // 这个 widget 是你的应用程序的主页。它是有状态的,这意味着它有一个 State 对象
  // (在下面定义),其中包含影响其外观的字段。
  // 这个类是 state 的配置。它保存了由父级(在本例中是 App widget)提供的值
  // (在本例中是标题),并被 State 的 build 方法使用。Widget 子类中的字段总是
  // 被标记为 "final"。
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      // 这个对 setState 的调用告诉 Flutter 框架,这个 State 中的某些内容已经发生了变化,
      // 这将导致它重新运行下面的 build 方法,以便显示可以反映更新后的值。如果我们更改了
      // _counter 而没有调用 setState(),那么 build 方法将不会再次被调用,因此什么都不会发生。
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    // 每次调用 setState 时,例如上面的 _incrementCounter 方法所做的,
    // 都会重新运行此方法。
    // Flutter 框架已经过优化,以使得重新运行 build 方法变得更快,
    // 因此你可以重建任何需要更新的内容,而不是必须单独更改 widget 实例。
    return Scaffold(
      appBar: AppBar(
        // 尝试一下:尝试将这里的颜色更改为特定颜色(例如 Colors.amber?),
        // 然后触发热重载以查看 AppBar 的颜色变化,而其他颜色保持不变。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 这里我们从由 App.build 方法创建的 MyHomePage 对象中获取值,
        // 并将其用于设置我们的 appbar 标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center 是一个布局 widget。它接受一个子 widget,并将其定位
        // 在父 widget 的中央。
        child: Column(
          // Column 也是一个布局 widget。它接受一组子 widget,并垂直排列它们。
          // 默认情况下,它会自动调整自身尺寸以适应其子 widget 水平方向的尺寸,
          // 并尽量与其父 widget 一样高。
          // Column 具有各种属性来控制它如何调整自身尺寸以及如何定位其子 widget。
          // 在这里,我们使用 mainAxisAlignment 将子 widget 垂直居中;主轴在这里
          // 是垂直轴,因为 Column 是垂直的(交叉轴将是水平的)。
          // 尝试一下:调用 "debug painting"(在 IDE 中选择 "Toggle Debug Paint"
          //操作,或者在控制台中按 "p"),以查看每个 widget 的线框。
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你已经按了这个按钮很多次了:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // 这个尾随逗号使得自动格式化在构建方法中更加美观。
    );
  }
}

F.2 效果演示

目录
相关文章
|
5月前
|
Dart 开发工具 Android开发
flutter初体验demo踩坑指南
用flutter开发app客户端遇到的各种问题和解决办法
95 1
|
Android开发
android和Flutter的混合工程Demo
Flutter和Android混合工程的启动逻辑与纯Flutter应用程序的启动逻辑略有不同。在混合工程中,您需要在Android项目中添加一些额外的代码来启动Flutter引擎并加载Flutter代码。以下是整个app的启动逻辑的详细解释
android和Flutter的混合工程Demo
|
3月前
|
监控 Dart 安全
创建一个Dart应用,监控局域网上网记录的软件:Flutter框架的应用
在当今数字时代,网络安全变得愈发重要。为了监控局域网上的上网记录,我们可以借助Flutter框架创建一个强大的Dart应用。在这篇文章中,我们将深入讨论如何使用Flutter框架开发这样一个监控局域网上网记录的软件,并提供一些实用的代码示例。
271 1
|
6月前
|
Dart Android开发 UED
带你读《深入浅出Dart》二十七、Flutter路由管理
带你读《深入浅出Dart》二十七、Flutter路由管理
|
6月前
|
Dart
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(1)
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(1)
|
6月前
|
Dart
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(2)
带你读《深入浅出Dart》三十、Flutter实战之TODO应用(2)
|
2月前
|
Dart JavaScript
Flutter - Dart 基础(数据类型)
【2月更文挑战第3天】
31 1
|
2月前
|
Dart JavaScript 安全
|
2月前
|
Dart Shell 开发工具
解决windows安装Flutter时出现Unknown operating system. Cannot install Dart SDK.问题
解决windows安装Flutter时出现Unknown operating system. Cannot install Dart SDK.问题
|
3月前
|
JSON Dart 算法
Dart/Flutter工具模块:the_utils
Dart/Flutter工具模块:the_utils
46 0