Flutter奖励观看插件flutter_watch_rewards的使用
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
更多关于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
插件来显示奖励视频,并根据用户是否完成观看来处理奖励逻辑。