Flutter奖励观看插件flutter_watch_rewards的使用

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

Flutter奖励观看插件flutter_watch_rewards的使用

WatchRewards 是一个可定制的 Flutter 小部件,它展示了一个圆形进度指示器,并具有奖励功能。

该小部件展示了一个圆形进度指示器,随着时间的推移逐渐填满,并且在指定的时间间隔内显示奖励值。

示例

以下是如何使用 WatchRewards 的示例:

WatchRewards(
  radius: 32.0, // 进度指示器的半径
  foregroundColor: Colors.red, // 进度颜色
  backgroundColor: Colors.pink.shade50, // 背景颜色
  buttonColorBegin: Colors.amber, // 按钮渐变开始颜色
  buttonColorEnd: Colors.pink, // 按钮渐变结束颜色
  buttonTitle: 'Claim', // 按钮标题
  value: 100.0, // 当前值
  stepValue: 10.0, // 每次增加的值
  watchInteval: 5, // 观看时间间隔(秒)
  icon: Icon(Icons.star, color: Colors.amber.shade500), // 图标
  onValueChanged: (value) => print('New value: $value'), // 值改变时的回调函数
  onTap: () => print('Button tapped'), // 点击按钮时的回调函数
)

示例代码

以下是完整的示例代码:

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_watch_rewards/flutter_watch_rewards.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: HomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double currentValue = 0.5; // 当前值

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Watch Rewards'), // 应用程序标题
      ),
      body: Container(
        child: Stack(
          children: [
            // 基础容器
            Container(),

            // WatchRewards 小部件
            Positioned(
              top: 32.0,
              right: 16.0,
              child: WatchRewards(
                radius: 32.0, // 进度指示器的半径
                foregroundColor: Colors.red, // 进度颜色
                backgroundColor: Colors.pink.shade50, // 背景颜色
                buttonColorBegin: Colors.amber, // 按钮渐变开始颜色
                buttonColorEnd: Colors.pink, // 按钮渐变结束颜色
                buttonTitle: 'Claim', // 按钮标题
                value: currentValue, // 当前值
                stepValue: 0.05, // 每次增加的值
                watchInteval: 5, // 观看时间间隔(秒)
                icon: Icon(
                  Icons.monetization_on,
                  color: Colors.amber.shade500,
                ), // 图标
                onValueChanged: (v) {
                  setState(() {
                    currentValue = v;
                    log('${currentValue}');
                  });
                }, // 值改变时的回调函数
                onTap: () {
                  log('tap'); // 点击按钮时的回调函数
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

更多关于Flutter奖励观看插件flutter_watch_rewards的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter奖励观看插件flutter_watch_rewards的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中集成和使用flutter_watch_rewards插件的示例代码。这个插件允许你实现奖励观看功能,通常用于视频播放应用中,通过观看广告来奖励用户。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加flutter_watch_rewards插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_watch_rewards: ^最新版本号  # 请替换为插件的最新版本号

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

2. 导入插件

在你的Dart文件中(通常是main.dart或某个具体功能的页面),导入插件:

import 'package:flutter_watch_rewards/flutter_watch_rewards.dart';

3. 初始化插件

在应用的入口文件(通常是main.dart)中初始化插件:

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  FlutterWatchRewards.instance.init();
  runApp(MyApp());
}

4. 检查奖励视频是否可用

在需要显示奖励视频的地方,先检查视频是否可用:

FlutterWatchRewards.instance.isRewardVideoAvailable().then((isAvailable) {
  if (isAvailable) {
    // 显示奖励视频按钮
  } else {
    // 隐藏或禁用奖励视频按钮
  }
});

5. 显示奖励视频

当用户点击按钮时,显示奖励视频并处理奖励:

void showRewardVideo() async {
  try {
    bool didComplete = await FlutterWatchRewards.instance.showRewardVideo();
    if (didComplete) {
      // 用户完成观看视频,处理奖励逻辑
      handleReward();
    } else {
      // 用户未完成观看视频,可能只是关闭了视频
      print("User did not complete the reward video.");
    }
  } catch (e) {
    // 处理错误
    print("Error showing reward video: $e");
  }
}

void handleReward() {
  // 奖励用户,例如增加金币或积分
  print("User earned a reward!");
  // 可以在这里添加具体的奖励逻辑
}

6. 监听奖励视频状态变化(可选)

你可以监听奖励视频的状态变化,以便更新UI:

@override
void initState() {
  super.initState();
  
  // 监听奖励视频可用性变化
  FlutterWatchRewards.instance.addListener(onRewardVideoAvailabilityChanged);
}

@override
void dispose() {
  super.dispose();
  
  // 移除监听器
  FlutterWatchRewards.instance.removeListener(onRewardVideoAvailabilityChanged);
}

void onRewardVideoAvailabilityChanged() {
  // 更新UI,例如检查奖励视频是否可用
  FlutterWatchRewards.instance.isRewardVideoAvailable().then((isAvailable) {
    // 根据isAvailable更新UI
  });
}

完整示例

以下是一个完整的示例页面,包含上述所有步骤:

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  FlutterWatchRewards.instance.init();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RewardVideoPage(),
    );
  }
}

class RewardVideoPage extends StatefulWidget {
  @override
  _RewardVideoPageState createState() => _RewardVideoPageState();
}

class _RewardVideoPageState extends State<RewardVideoPage> {
  bool _isRewardVideoAvailable = false;

  @override
  void initState() {
    super.initState();
    
    FlutterWatchRewards.instance.addListener(_onRewardVideoAvailabilityChanged);
    _checkRewardVideoAvailability();
  }

  @override
  void dispose() {
    super.dispose();
    FlutterWatchRewards.instance.removeListener(_onRewardVideoAvailabilityChanged);
  }

  void _checkRewardVideoAvailability() {
    FlutterWatchRewards.instance.isRewardVideoAvailable().then((isAvailable) {
      setState(() {
        _isRewardVideoAvailable = isAvailable;
      });
    });
  }

  void _onRewardVideoAvailabilityChanged() {
    _checkRewardVideoAvailability();
  }

  void _showRewardVideo() async {
    try {
      bool didComplete = await FlutterWatchRewards.instance.showRewardVideo();
      if (didComplete) {
        _handleReward();
      } else {
        print("User did not complete the reward video.");
      }
    } catch (e) {
      print("Error showing reward video: $e");
    }
  }

  void _handleReward() {
    print("User earned a reward!");
    // 可以在这里添加具体的奖励逻辑
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Reward Video Example'),
      ),
      body: Center(
        child: _isRewardVideoAvailable
            ? ElevatedButton(
                onPressed: _showRewardVideo,
                child: Text('Watch Reward Video'))
            : Text('Reward Video is not available'),
      ),
    );
  }
}

这个示例展示了如何在Flutter应用中集成和使用flutter_watch_rewards插件来显示奖励视频,并根据用户是否完成观看来处理奖励逻辑。

回到顶部