Flutter新功能展示插件whats_new_feature的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter新功能展示插件whats_new_feature的使用

展示类似苹果的新功能展示功能在您的应用更新时。

Screenshot

简单演示

安装

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

dependencies:
  whats_new_feature: ^0.0.1

然后导入包：

import 'package:whats_new_feature/whats_new_feature.dart';

如何使用

只需调用 showWhatsNew() 方法，并传递所需的参数。以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    _showWhatsNew();
  }

  Future<void> _showWhatsNew() async {
    await const WhatsNewFeature().showWhatsNew(
      context,
      showWhatsNew: true,
      showWhatsNewOnFirstInstall: true,
      features: [
        WhatsNewFeatureTile(
          icon: Icons.browse_gallery_rounded,
          titleText: '故事大小引用',
          subtitleText:
              '现在你可以在应用中创建竖屏或故事大小的引用，并且可以轻松分享它',
        ),
        WhatsNewFeatureTile(
          icon: Icons.pages,
          titleText: '图像裁剪器',
          subtitleText:
              '现在你可以在应用中创建竖屏或故事大小的引用，并且可以轻松分享它',
        ),
        WhatsNewFeatureTile(
          icon: Icons.image,
          titleText: '保持最后样式',
          subtitleText:
              '现在引用编写器应用将保存最后编辑的样式与图片',
        ),
      ],
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: const Center(
        child: Text('新功能展示'),
      ), // 这个逗号使自动格式化更美观。
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用whats_new_feature插件来展示新功能的示例代码。这个插件允许你以一种用户友好的方式向用户展示应用的新功能。

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

dependencies:
  flutter:
    sdk: flutter
  whats_new_feature: ^latest_version  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤使用whats_new_feature插件：

  1. 初始化插件：

在你的main.dart文件中，你可以初始化插件并检查是否有新的功能需要展示。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Whats New Feature Demo'),
        ),
        body: WhatsNewFeatureScreen(),
      ),
    );
  }
}

class WhatsNewFeatureScreen extends StatefulWidget {
  @override
  _WhatsNewFeatureScreenState createState() => _WhatsNewFeatureState();
}

class _WhatsNewFeatureScreenState extends State<WhatsNewFeatureScreen> {
  @override
  void initState() {
    super.initState();
    WhatsNewFeature.instance.checkVersion().then((show) {
      if (show) {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => WhatsNewFeaturePage()),
        );
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Check out the new features!'),
    );
  }
}
  1. 创建新功能展示页面：

接下来，你需要创建一个页面来展示新功能。你可以使用WhatsNewFeaturePage来生成这个功能页面。

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

class WhatsNewFeaturePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Whats New'),
      ),
      body: WhatsNewFeature(
        items: [
          WhatsNewFeatureItem(
            title: 'New Feature 1',
            description: 'This is a description of the new feature 1.',
            imageUrl: 'assets/feature1.png', // 替换为你的图片资源路径
          ),
          WhatsNewFeatureItem(
            title: 'New Feature 2',
            description: 'This is a description of the new feature 2.',
            imageUrl: 'assets/feature2.png', // 替换为你的图片资源路径
          ),
          // 添加更多功能项
        ],
        showSkipButton: true, // 是否显示跳过按钮
        showDoneButton: true, // 是否显示完成按钮
        onSkip: () {
          // 用户点击跳过按钮时的回调
          WhatsNewFeature.instance.markAsShown();
        },
        onDone: () {
          // 用户点击完成按钮时的回调
          WhatsNewFeature.instance.markAsShown();
        },
      ),
    );
  }
}
  1. 添加资源图片：

确保你在pubspec.yaml中添加了你的图片资源，并在项目的assets文件夹中放置了相应的图片。

flutter:
  assets:
    - assets/feature1.png
    - assets/feature2.png
    # 添加更多图片资源
  1. 运行应用：

现在，当你运行你的Flutter应用时，如果检测到有新版本的功能需要展示，它将自动导航到WhatsNewFeaturePage页面，显示你定义的新功能列表。

这个示例展示了如何使用whats_new_feature插件来展示应用的新功能。你可以根据自己的需求调整功能项的内容和样式。

回到顶部