ByteNoteByteNote
字

字节笔记本

2026年2月22日

Flutter AboutDialog 组件详解

#Flutter 专栏

本文介绍 Flutter 中的 AboutDialog 组件，展示如何在应用中实现标准的关于对话框。该组件提供了应用信息展示的标准化方案，帮助开发者快速构建专业的关于页面。

AboutDialog 简介

AboutDialog 是 Flutter Material 组件库中的一个对话框组件，用于显示应用程序的版权信息、版本号和其他法律声明。它是构建专业应用不可或缺的 UI 元素。

核心特性

  • 标准化界面：遵循 Material Design 规范，提供一致的用户体验
  • 可定制内容：支持自定义应用图标、名称、版本号和附加内容
  • 法律声明支持：内置 applicationLegalese 属性用于版权声明
  • 简洁易用：通过 showDialog 即可快速弹出

代码示例

以下是一个完整的 AboutDialog 使用示例：

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

class Widget001 extends StatefulWidget {
  const Widget001({
    Key? key,
  }) : super(key: key);

  @override
  State<Widget001> createState() => _Widget001State();
}

class _Widget001State extends State<Widget001> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('Show About Dialog'),
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) => const AboutDialog(
              applicationIcon: FlutterLogo(),
              applicationLegalese: '© 2024 Flutter Mapp. All rights reserved.',
              applicationName: 'Flutter App',
              applicationVersion: 'version 1.0.0',
              children: [
                Text('This is a text created by Flutter Mapp'),
              ],
            ),
          );
        },
      ),
    );
  }
}

属性详解

属性类型必填说明
applicationIconWidget?否应用图标，通常使用 FlutterLogo 或自定义图标
applicationNameString?否应用名称，显示在对话框标题下方
applicationVersionString?否应用版本号
applicationLegaleseString?否法律声明/版权声明文本
childrenList<Widget>?否对话框底部附加的自定义内容

使用场景

场景 1：基础关于对话框

最简单的用法，仅显示应用名称和版本：

dart
showDialog(
  context: context,
  builder: (context) => const AboutDialog(
    applicationName: 'My App',
    applicationVersion: '1.0.0',
  ),
);

场景 2：完整的关于页面

包含图标、版权信息和附加链接：

dart
showDialog(
  context: context,
  builder: (context) => AboutDialog(
    applicationIcon: Image.asset('assets/app_icon.png', width: 64, height: 64),
    applicationName: 'My Awesome App',
    applicationVersion: 'Version 2.1.0 (Build 2024.01.15)',
    applicationLegalese: '© 2024 My Company. All rights reserved.',
    children: [
      const SizedBox(height: 16),
      const Text('感谢使用我们的应用！'),
      const SizedBox(height: 8),
      InkWell(
        child: const Text(
          '访问官网',
          style: TextStyle(color: Colors.blue),
        ),
        onTap: () {
          // 打开官网链接
        },
      ),
    ],
  ),
);

最佳实践

  1. 统一入口：通常在应用的「设置」或「关于」页面中提供触发按钮
  2. 版本管理：建议从应用配置中动态读取版本号，避免硬编码
  3. 图标规范：使用正方形图标，推荐尺寸 64x64 或 48x48
  4. 法律合规：确保 applicationLegalese 包含必要的版权声明

项目来源

本文代码示例来自 flutter_widgets 开源项目，该项目收集了 100+ 个 Flutter Widget 的实用示例，是学习和参考 Flutter UI 开发的优质资源。

Flutter 专栏
上一篇

flutter_ios_doc_scanner：Flutter iOS 文档扫描插件

下一篇

Flutter AboutDialog 组件详解

分享: