Flutter展示更新日志插件changelog_widgets的使用

Flutter展示更新日志插件changelog_widgets的使用

由 Damian Aldair 编写。

受 Flutter 的 AboutDialog 启发。

这是展示您的应用更新日志的最简单方法。

开始使用

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  changelog_widgets: <latest_version>

初始化

在 pubspec.yaml 文件中添加 markdown 文件。例如，在 flutter 部分添加：

flutter:
  assets:
    - CHANGELOG.md

导入该包：

import 'package:changelog_widgets/changelog_widgets.dart';

现在，您可以使用这些屏幕和对话框了。

可用组件

• 原生 Material 屏幕：ChangelogRawScreen
• 内置 Material 屏幕：ChangelogScreen
• 内置 Material 对话框：ChangelogDialog
• 原生 Cupertino 屏幕：CupertinoChangelogRawScreen
• 内置 Cupertino 屏幕：CupertinoChangelogScreen

完整示例

以下是一个完整的示例代码，展示了如何在 Material 应用中使用 changelog_widgets 插件。

Material 示例

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: const MaterialScreen(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    const space = SizedBox.square(dimension: gap); // 假设 gap 是一个定义好的间距值

    return Scaffold(
      appBar: AppBar(
        title: const Text('Material Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              child: const Text('查看原始屏幕'), // 假设 goToTheRawScreen 是一个定义好的字符串
              onPressed: () {
                final screen = ChangelogRawScreen(
                  onLoading: (_) {
                    return const Center(
                      child: Text('加载文件中...'),
                    );
                  },
                  onError: (_) {
                    return const Center(
                      child: Text('错误'),
                    );
                  },
                  bodyBuilder: (_, markdown) {
                    return markdown; // 直接返回 Markdown 内容
                  },
                );
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => screen),
                );
              },
            ),
            space,
            ElevatedButton(
              child: const Text('查看内置屏幕'), // 假设 goToTheScreen 是一个定义好的字符串
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => const ChangelogScreen()),
                );
              },
            ),
            space,
            ElevatedButton(
              child: const Text('显示对话框'), // 假设 showTheDialog 是一个定义好的字符串
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return const ChangelogDialog();
                  },
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}