Flutter新功能介绍插件flutter_whatsnew的使用

flutter_whatsnew

一个用于展示新功能页面的Flutter插件。

在线演示：https://fluttercommunity.github.io/flutter_whatsnew/

使用

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

dependencies:
  flutter_whatsnew: ^x.x.x

然后导入该包：

import 'package:flutter_whatsnew/flutter_whatsnew.dart';

如果你希望从CHANGELOG.md文件中加载更新日志，需要将CHANGELOG.md添加到Flutter资源目录中：

  assets:
    - CHANGELOG.md

示例

以下是一个完整的示例代码，展示了如何使用flutter_whatsnew插件来展示新功能页面。

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

void main() {
  runApp(MaterialApp(home: ShowWhatsNew()));
}

class ShowWhatsNew extends StatelessWidget {
  final double textScaleFactor = 1.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return new Scaffold(
      body: SafeArea(
          child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: Text("显示更新日志"),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => WhatsNewPage.changelog(
                          title: Text(
                            "新功能",
                            textScaleFactor: textScaleFactor,
                            textAlign: TextAlign.center,
                            style: const TextStyle(
                              // 文本样式以匹配iOS 11风格
                              fontSize: 22.0,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          buttonText: Text(
                            '继续',
                            textScaleFactor: textScaleFactor,
                            style: const TextStyle(color: Colors.white),
                          ),
                        ),
                    fullscreenDialog: true,
                  ),
                );
              },
            ),
            Container(height: 50.0),
            ElevatedButton(
              child: Text("显示更改"),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => WhatsNewPage(
                          title: Text(
                            "新功能",
                            textScaleFactor: textScaleFactor,
                            textAlign: TextAlign.center,
                            style: const TextStyle(
                              // 文本样式以匹配iOS 11风格
                              fontSize: 22.0,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          buttonText: Text(
                            '继续',
                            textScaleFactor: textScaleFactor,
                            style: const TextStyle(color: Colors.white),
                          ),
                          // 创建一个WhatsNewItem列表以在新功能页面中使用
                          // 可以创建任意数量的项目，页面会自动滚动
                          items: <ListTile>[
                            ListTile(
                              leading: const Icon(Icons.color_lens),
                              title: Text(
                                '暗黑主题',
                                textScaleFactor: textScaleFactor,
                              ), // 标题是唯一必需的项
                              subtitle: Text(
                                '黑色和灰色主题（点击以更改）',
                                textScaleFactor: textScaleFactor,
                              ),
                              onTap: () {
                                // 可以导航到应用程序中的其他位置
                                Navigator.of(context).pushNamed("/settings");
                              },
                            ),
                            ListTile(
                              leading: const Icon(Icons.map),
                              title: Text(
                                '谷歌地图',
                                textScaleFactor: textScaleFactor,
                              ),
                              subtitle: Text(
                                '打开地址链接时使用谷歌地图而不是苹果地图（点击以更改）',
                                textScaleFactor: textScaleFactor,
                              ),
                              onTap: () {
                                // 可以导航到应用程序中的其他位置
                                Navigator.of(context).pushNamed("/settings");
                              },
                            ),
                            ListTile(
                              leading: const Icon(Icons.notifications_active),
                              title: Text(
                                '推送通知',
                                textScaleFactor: textScaleFactor,
                              ),
                              subtitle: Text(
                                '关注重要信息，这些信息可以推送给您',
                                textScaleFactor: textScaleFactor,
                              ),
                              onTap: () {
                                WhatsNewPage.showDetailPopUp(
                                  context,
                                  '信息',
                                  "您可以在应用程序设置中随时关闭推送通知。",
                                );
                              },
                            ),
                          ], // 必需项
                        ),
                    fullscreenDialog: true,
                  ),
                );
              },
            ),
          ],
        ),
      )),
    );
  }
}

更多关于Flutter新功能介绍插件flutter_whatsnew的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

htzhanglong 1楼•3 天前作者

更多关于Flutter新功能介绍插件flutter_whatsnew的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何使用 flutter_whatsnew 插件来展示 Flutter 应用新功能的代码示例。flutter_whatsnew 插件允许你以吸引人的方式向用户展示新版本中的新功能或更改。

首先，你需要在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_whatsnew: ^latest_version  # 请替换为实际的最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，在你的 Flutter 应用中，你可以按照以下步骤来使用 flutter_whatsnew：

导入插件：

在你的 Dart 文件中（例如 main.dart），导入 flutter_whatsnew 插件：
```
import 'package:flutter_whatsnew/flutter_whatsnew.dart';
```

准备新功能项：

创建一个包含新版本功能项的列表。每个功能项可以包含标题、描述和图像。

List<WhatsNewItem> items = [
  WhatsNewItem(
    title: "新功能 1",
    description: "这是我们的第一个新功能，它允许你做一些新的事情。",
    image: Image.asset("assets/images/feature1.png"),  // 替换为你的图像资源
  ),
  WhatsNewItem(
    title: "性能改进",
    description: "我们对应用进行了优化，现在运行得更快了。",
    image: Image.asset("assets/images/performance.png"),  // 替换为你的图像资源
  ),
  // 添加更多功能项
];

显示新功能对话框：

在你的应用启动时（例如在 MyApp 类的 build 方法中），检查是否需要显示新功能对话框。你可以使用持久化存储（如 SharedPreferences）来跟踪用户是否已经查看过新功能。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
  bool hasSeenWhatsNew = sharedPreferences.getBool("hasSeenWhatsNew") ?? false;

  if (!hasSeenWhatsNew) {
    runApp(WhatsNewWrapper(
      child: MyApp(),
      items: items,
      onFinish: () async {
        // 用户完成查看后更新持久化存储
        await sharedPreferences.setBool("hasSeenWhatsNew", true);
      },
    ));
  } else {
    runApp(MyApp());
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Text('Hello, Flutter!'),
      ),
    );
  }
}

在上面的代码中，WhatsNewWrapper 是 flutter_whatsnew 插件提供的一个方便的小部件，用于包装你的应用并在需要时显示新功能对话框。

运行应用：

现在，运行你的 Flutter 应用。如果这是用户第一次运行新版本，他们将看到一个包含新功能项的对话框。用户完成查看后，对话框将不会再次显示，除非你清除持久化存储或发布新版本的应用。

希望这个示例能帮助你成功集成 flutter_whatsnew 插件，并以吸引人的方式向用户展示你的 Flutter 应用的新功能。