Flutter奖励弹窗插件reward_popup的使用

reward_popup 是一个用于在Flutter应用中轻松实现带有礼物和彩带动画的吸引人的弹出窗口的插件。该插件包括自定义非透明路由、Lottie动画和动画网格背景。

Demo

您可以查看以下链接中的演示视频以了解其效果：

使用入门

导入包

首先，在您的Dart文件中导入reward_popup包：

import 'package:reward_pop_up/reward_pop_up.dart';

显示奖励弹窗

下面是一个简单的示例，展示了如何调用showRewardPopup方法来显示奖励弹窗：

ElevatedButton(
  onPressed: () async {
    final answer = await showRewardPopup<String>(
      context,
      backgroundColor: Colors.black,
      child: Positioned.fill(
        child: InkWell(
          onTap: () {
            Navigator.of(context).pop(true);
          },
          child: Image.asset(
            'assets/elephant.jpg',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
    // Use answer
  },
  child: const Text('Pop-up example one'),
),

完整示例Demo

这里提供了一个更完整的示例代码，包含了多种不同的弹窗展示方式：

// ignore_for_file: unused_local_variable

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Reward Popup'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Press the button to show popup',
              style: TextStyle(color: Colors.white),
            ),
            ElevatedButton(
              onPressed: () async {
                final answer = await showRewardPopup<String>(
                  context,
                  backgroundColor: Colors.black,
                  child: Positioned.fill(
                    child: InkWell(
                      onTap: () {
                        Navigator.of(context).pop(true);
                      },
                      child: Image.asset(
                        'assets/elephant.jpg',
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                );
                // Use answer
              },
              child: const Text('Pop-up example one'),
            ),
            // 更多按钮示例...
          ],
        ),
      ),
    );
  }
}