How to trigger a function in a stateful widget from another class (when onUnityAdsFinish)? - flutter

I have a game screen in a stateful widget that includes a function that lets the player take a step back (undo the previous move). I would like to trigger this function when onUnityAdsFinish() runs from another widget.
Here's the stateful widget on game.dart where the game is played:
class GameScreen extends StatefulWidget {
#override
GameScreenState createState() => GameScreenState();
}
class GameScreenState extends State<GameScreen> with SingleTickerProviderStateMixin {
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
// game content here
),
MaterialButton(
child: Text("Tap Here to Watch Ad to Undo Move"),
onPressed: () => unityBloc.showUnityAd(),
// (side note: unityBloc is accessable because I have it declared as "final unityBloc = UnityBloc();" higher up the widget tree on app.dart.)
),
],
),
}
// This is the function I want to call after the ad is finished.
void undoMove() {
setState(() {
// code to undo move
});
}
}
When the button is pressed to watch the ad, it calls the showUnityAd() function in my UnityBloc class on unity_bloc.dart:
import 'package:unity_ads_flutter/unity_ads_flutter.dart';
class UnityBloc with UnityAdsListener {
...
showUnityAd() {
UnityAdsFlutter.show('rewardedVideo').whenComplete(() => null);
} // called when undo button is pressed on game.dart
#override
void onUnityAdsFinish(String placementId, FinishState result) {
print("Finished $placementId with $result");
// here is where I want to call the undoMove() function from game.dart
}
}
The ad displays perfectly and the print statement in onUnityAdsFinish prints to the console when the ad is finished, but I can't figure out how to call undoMove at that point.
I have spent all day watching tutorials and reading stackoverflows about callbacks and global keys and such, but I'm just still not getting it.
Can someone please help? How can I trigger the undoMove() function on game.dart when onUnityAdsFinish() fires on unity_bloc.dart? (Or is their another/better way to do this?)
Thank you!

You can have a variable that holds a function in the UnityBloc class and pass the undoMove method to the showUnityAd method to assign it to the variable and then you can call it in onUnityAdsFinish method.
So UnityBloc becomes this:
class UnityBloc with UnityAdsListener {
void Function() doOnUnityAdsFinish;
...
showUnityAd({#required unityAdsFinishFunction}) {
...
doOnUnityAdsFinish = unityAdsFinishFunction;
} // called when undo button is pressed on game.dart
#override
void onUnityAdsFinish(String placementId, FinishState result) {
...
doOnUnityAdsFinish?.call(); //Only calls if the function is not null
}
}
And you can it in the MaterialButton's onPressed like this:
MaterialButton(
child: Text("Tap Here to Watch Ad to Undo Move"),
onPressed: () => unityBloc.showUnityAd(unityAdsFinishFunction: undoMove ),
),

Simplest approach would be a global/static variable (callback) or a ValueNotifier/Stream.
Maybe, a cleaner approach, would be some package with dependency injection capabilities like (get, get_it).
class UnityBloc with UnityAdsListener {
/// pass a callback into the constructor.
/// Function<String,FinishState> onAdCompleted ;
/// UnityBloc([this.onAdCompleted]);
/// easier approach, not very "flexible".
static Function<String,FinishState> onAdCompleted ;
showUnityAd() {
UnityAdsFlutter.show('rewardedVideo').whenComplete(() => null);
} // called when undo button is pressed on game.dart
#override
void onUnityAdsFinish(String placementId, FinishState result) {
onAdCompleted?.call(placementId, result);
// here is where I want to call the undoMove() function from game.dart
}
}
class GameScreenState extends State<GameScreen> with SingleTickerProviderStateMixin {
#override
void initState(){
super.initState();
UnityBloc.onAdCompleted = _onAddCompleted;
}
#override
void dispose(){
super.dispose();
if( UnityBloc.onAdCompleted == _onAddCompleted) {
UnityBloc.onAdCompleted = null;
}
}
void _onAddCompleted(String placementId, FinishState result)
=> print("Finished $placementId with $result");
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
// game content here
),
MaterialButton(
child: Text("Tap Here to Watch Ad to Undo Move"),
onPressed: () => unityBloc.showUnityAd(),
// (side note: unityBloc is accessable because I have it declared as "final unityBloc = UnityBloc();" higher up the widget tree on app.dart.)
),
],
),
}
// This is the function I want to call after the ad is finished.
void undoMove() {
setState(() {
// code to undo move
});
}
}

Related

How to write widget test for this widget

My Widget of which i want to write widget test
InkWell(
key: const Key(kDraftTileKey),
onTap: () {
context.read<CreatorHubTapViewModel>().startPublishingFlowAgain(startPublishingFlowAgainPressed: startPublishingFlowAgainPressed);
},
child:...
);
Fucntion which called when user click on a tap
void startPublishingFlowAgainPressed() {
widget.viewModel.saveNFT(nft: widget.nft);
Navigator.of(context).pushNamed(RouteUtil.kRouteHome);
}
I create a Mock of this viewmodel using Mockito
class CreatorHubTapViewModel extends ChangeNotifier {
void onViewOnPylons({required VoidCallback onViewOnPylonsPressed}) {
onViewOnPylonsPressed.call();
}
void startPublishingFlowAgain({required VoidCallback startPublishingFlowAgainPressed}) {
startPublishingFlowAgainPressed.call();
}
}
Now in test when i try to make a stub on this function it is not calling thenAnswer also not calling Callback itself. Any way to achieve i just want to toggle my variable when this function calls in actual screen.
when(viewModel.startPublishingFlowAgain(startPublishingFlowAgainPressed: () {
clicked = true;
})).thenAnswer((realInvocation) {});
This is how you can test this function.
when(viewModel.startPublishingFlowAgain(startPublishingFlowAgainPressed: anyNamed("startPublishingFlowAgainPressed"))).thenAnswer((realInvocation) {
clicked = true;
});

Detect if current Widget/State is visible in page route?

I want to add a Listener when the widget/state is visible and remove myself from the Listener when I leave the route.
But if the user clicks on the back button and returns to the current widget/state, I want to do the same thing again.
Currently initState, didChangeDependencies, didUpdateWidget and build are NOT called when the user clicks back from the next page, therefore I cannot detect when the user is returning and the widget was loaded from cache.
After much poking around the API, I've discovered that ModalRoute and RouteObserver is what I want.
https://api.flutter.dev/flutter/widgets/ModalRoute-class.html
https://api.flutter.dev/flutter/widgets/RouteObserver-class.html
If I just want to check if the current route is active I can call isCurrent on ModalRoute.of(context):
void onNetworkData(String data) {
if (ModalRoute.of(context).isCurrent) {
setState(() => list = data);
}
}
If I want to listen to route load/unload, I just create it and serve it up the hood with Provider like this:
class HomePage extends StatelessWidget {
final spy = RouteObserver<ModalRoute<void>>();
build(BuildContext context) {
return Provider<RouteObserver<ModalRoute<void>>>.value(
value: spy,
child: MaterialApp(
navigatorObservers: [spy],
),
);
}
}
Then somewhere in another widget:
class _AboutPageState extends State<AboutPage> with RouteAware {
RouteObserver<ModalRoute<void>>? spy;
void didChangeDependencies() {
super.didChangeDependencies();
spy = context.read<RouteObserver<ModalRoute<void>>>();
spy.subscribe(this, ModelRoute.of(context)!);
}
void dispose() {
spy.unsubscribe(this);
super.dispose();
}
void didPush() => attachListeners();
void didPopNext() => attachListeners();
void didPop() => removeListeners();
void didPushNext() => removeListeners();
attachListeners() {
}
removeListeners() {
}
}

How to make a timer constantly display

I have made a chess clock but the time only updates when you click one of the buttons and I want it so the time is constantly updating. I have the setState() function after the button press but no ware else. How could this be mad to updating every 10th of a second or so. Thanks. Here is my code:
import 'package:flutter/material.dart';
...
Widget build(context) {
return MaterialApp(
home: Scaffold(// this is what creates the page, everything should be inside this cuz everything is inside the page
appBar: AppBar(//what is displayed at the top WOW
title: Text('chess clock'),
),
body: Column(
children: [
Container(
margin: EdgeInsets.all(150.0),
child: RaisedButton(
onPressed: () {
setState((){
if (button1==1){
button1=2;
minus=minus2-minus;
fminus=fminus+minus;
print(minus);
divid=DateTime.now().microsecondsSinceEpoch/1000000-start/1000000;
divid.round();
divid=divid-fminus;
minus=DateTime.now().microsecondsSinceEpoch/1000000;
divid=60.0-divid;
}
});
},
child: Text(divid.round().toString()),
)
),
Container(
margin: EdgeInsets.all(150.0),
child: RaisedButton(
onPressed: () {
setState((){
if (button1==2){
button1=1;
minus2=minus-minus2;
fminus2=fminus2+minus2;
divid2=DateTime.now().microsecondsSinceEpoch/1000000-start/1000000;
divid2.round();
divid2=divid2-fminus2;
minus2=DateTime.now().microsecondsSinceEpoch/1000000;
divid2=60.0-divid2;
}
});
},
child: Text(divid2.round().toString()),
...
For a complete solution, you should put Kauli's code in your initState() method and tear it down in dispose(). It would look something like this.
I've made some small changes to fit the needs of the solution.
Edit: I added the surrounding StatefulWidget class and removed some cut and paste which was confusing. You can wrap the build method with your original Scaffold and other widgets. I left that out to make the answer a little clearer.
class ChessClock extends StatefulWidget {
#override
_ChessClockState createState() => _ChessClockState();
}
class _ChessClockState extends State<ChessClock> {
// Important to capture the timer object reference
Timer chessClockTimer;
Timer periodicSec() {
// How could this be made to updating every 10th of a second or so.
// Per op question
return Timer.periodic(Duration(milliseconds: 10), (_){
setState((){
if (button1==2){
button1=1;
minus2=minus-minus2;
fminus2=fminus2+minus2;
divid2=DateTime.now().microsecondsSinceEpoch/1000000-start/1000000;
divid2.round();
divid2=divid2-fminus2;
minus2=DateTime.now().microsecondsSinceEpoch/1000000;
divid2=60.0-divid2;
}
});
});
}
#override
void initState() {
super.initState();
chessClockTimer = periodicSec(); // Kauli's code
}
#override
void dispose() {
// Stop the timer
chessClockTimer?.cancel();
// Clean up the timer
chessClockTimer?.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
// Your build method code
}
}
You can use the Timer.periodic to do this
void periodicSec() {
Timer.periodic(Duration(seconds: 1), (_){
setState((){
if (button1==2){
button1=1;
minus2=minus-minus2;
fminus2=fminus2+minus2;
divid2=DateTime.now().microsecondsSinceEpoch/1000000-start/1000000;
divid2.round();
divid2=divid2-fminus2;
minus2=DateTime.now().microsecondsSinceEpoch/1000000;
divid2=60.0-divid2;
}
});
});
}

Flutter: Dipose HTTP request on close controller

Original Answer
I'm using the Getx State Management on Flutter.
Simplifying as much as possible:
I build a GetxController to control my Page, and in this controller i have a StatefulWidget instance that evoque http requests.
class MyController extends GetxController {
Player player;
}
class Player extends StatefulWidget {
PlayerState state;
#override
PlayerState createState() {
state = PlayerState();
return state;
}
}
class PlayerState extends State<Player> {
void methodName async() {
futureRequest().then((data) {
// when the error ocurrs
setState(() {});
});
}
}
The problem occurs when the user closes the mobile page, triggering the controller's close method, before the end of the request.
That way, when setState is triggered, there is no more page instance and the error occurs.
I believe that the solution would be to interrupt all requests related to this GetxController and "delete" this instance of StatefulWidget at the moment the controller close method was called.
I don't know if this would be right, and if it's how to do it ..
==================================================================
Updated Answer
The main problem was that the async request in getDetails() method, return a response even after the controller is disposed, even using GetBuilder, and this response carried a url from a video that is started by the videoPlayerController (a video_player plugin instance).
So, the user is in another screen but keep listen to the video that is playing on background.
As a workaround and thinking in apply good practices to the code, i make a refactor to use only stateless widgets, following the GetX rules. I solved the problem, but i had to convert the Future's to Stream's
The binding is being created with Get.lazyPut() to perform dependencies injection:
class Binding implements Bindings {
Get.lazyPut<PlayerController>(() {
return PlayerController(videoRepository: VideoRepository(VideoProvider(Dio())));
});
}
This binding is linked to the page router, based on GetX documentation.
class AppPages {
static final routes = [
GetPage(name: Routes.MyRoute, page: () => MyPage(), binding: MyBinding()),
];
}
To prevent the controller to make actions even before it is disposed, i have to created a Stream and cancel it on controller dispose.
class MyController extends GetxController {
MyController({#required this.repository}) : assert(repository != null);
StreamSubscription<bool> stream;
// Instance of plugin video_player
VideoPlayerController videoPlayerController;
#override
void onClose() {
if (streamGetVideo != null) streamGetVideo.cancel();
super.onClose();
if (videoPlayerController != null) videoPlayerController?.dispose();
}
// This is the method called by the user on screen
void loadVideo() {
stream = getDetails().asStream().listen((bool response) {
// This code is canceled on onClose() method by the stream
if (response) update();
});
}
Future<bool> getDetails() async {
return await repository.getDetails().then((data) async {
videoPlayerController = VideoPlayerController.network(data);
initFuture = videoPlayerController.initialize();
await initFuture.whenComplete(() { return true; });
});
}
}
I think that Flutter/GetX should have a better way to do this, without these workarounds that i made. If anyone has a better approach or a hint, i'm open to suggestions.
One solution could be to wrap your setState with
if(mounted){
setState(() {});
}
GetBuilder + update()
In GetX using a GetBuilder with update() takes care of that lifecycle checking / handling so you don't have to do it.
Below is an example of a screen/route being closed prior to an HTTP call finishing & calling setState(), without an exception thrown.
(On the 2nd screen, click the Go Back! button fast to simulate an already disposed StatefulWidget.)
Below, an update() call is used to update the screen, instead of setState(), but they are the same in a GetBuilder. GetBuilder is (extends) a StatefulWidget.
GetBuilder adds listeners to the Controller you pass it, either through init: constructor arg or via the GetBuilder<Type> parameter if the Controller was initialized elsewhere/earlier.
That listener will be disposed if the StatefulWidget (i.e. GetBuilder) is disposed.
(See GetBuilder's dispose() function for some wizardry. While adding a listener, the returned value from adding that listener, is a function to dispose/unsubscribe from that listen. Pretty clever.)
So the GetBuilder/StatefulWidget will never have its update() / setState() called if that widget has been disposed because the listener for those calls has been disposed. So a slow returning HTTP call won't attempt to update/setState a widget that no longer exists in the widget tree.
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class HttpX extends GetxController {
String slowValue = 'loading...';
#override
void onInit() {
slowCall();
}
/// Simulate a slow, long running HTTP call
Future<void> slowCall() async {
slowValue = 'Slow call STARTED!';
print(slowValue);
update(); // update the screen to show started message
await Future.delayed(Duration(seconds: 5), () {
slowValue = 'Slow call FINISHED!';
print(slowValue);
update(); // won't call setState() if GetBuilder is disposed
});
}
}
class GetXDisposePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GetX Dispose'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('awaiting http call to finish'),
RaisedButton(
child: Text('Go Call Page'),
onPressed: () => Get.to(SlowCallPage()),
// using Get.to ↑ requires GetMaterialApp in place of MaterialApp in MyApp
)
],
),
),
);
}
}
class SlowCallPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GetX Dispose - Go Back!'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GetBuilder<HttpX>(
init: HttpX(), // fake slow http call starts on init
builder: (hx) => Text(hx.slowValue),
),
RaisedButton(
child: Text('Go Back!'),
onPressed: () => Get.back(),
),
],
),
),
);
}
}

How Can I PAUSE or RESUME a async task using a button in flutter?

I'm Building An Flutter Application which requires image changes after a period of time. I thought using while loop with a sleep method inside may solve the problem. But It didn't, Image is only getting change after the loop ends. Application UI also gets froze.
So, I used the async Task which I can't control with a Button.
Desired Output: Image should be changed after every 10 seconds and the user can pause or resume method execution.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Test(
),
),
)
);
}}
class Test extends StatefulWidget {
#override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
int imgnumber=1;
int varToCheckButtonPress = 0;
String BtnTxt = "START";
void inc(){
while(imgnumber<10)
{
print(imgnumber);
await Future.delayed(const Duration(seconds: 10));
setState(() {
imgnumber++;
});
}
}
#override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(flex: 1,
child: Container(
child: Image.asset('images/'+imgnumber.toString()+'.png'),
height: 500,
width:500,
color: Colors.green,
),
),
FlatButton(
child: Text(BtnTxt),
onPressed: (){
if (varToCheckButtonPress == 0) {
setState(() {
inc();
BtnTxt = 'PAUSE';
varToCheckButtonPress = 1;
});
} else if (varToCheckButtonPress == 1) {
setState(() {
BtnTxt = 'RESUME';
varToCheckButtonPress = 0;
});
}
},
)
],
);
}
}
I want the user to control the UI with a single button behave as START, PAUSE and RESUME.
Can we Use normal function To implement this functionality?
You should make use of Bloc pattern to manage your states, e.g: StreamBuilder, Providers, and make a timer to push new imageUrl to the sink and let the streamBuilder receive the latest imageUrl.
As for your button, all it controls is the timer. When u hit the play button, new imageUrl will keep pushing to the sink, while you press paused, simply stop the timer, and new image Url will not be pushing new imageUrl to the sink, and of course, reset the timer when you hit the stop button.
Here is a very detail Bloc pattern tutorial you can follow: Medium
The shortcut to achieve this is :
You can probably hold a function in async loop and call setState method on tap to change it's state.
For example :
call this function in desired location
while (_isPaused) {
await Future.delayed(Duration(milliseconds: 500));
}
and then call set state method from onTap, just like this
onTap:(){
setState((){
_isPaused? _isPaused=false: _isPaused=true;
});
}