Redrawing widgets in flutter after coming back from another - flutter

Question

I have a one MainExerseClass dart class. In which I have ImageSequenceAnimator and LinearPercentIndicator which should be restarted when control comes to the MainExerseClass dart by poping another class. The count1 is getting updated but ImageSequenceAnimator not getting updated.
Below is the code.
class MainExerseClass extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return Exersise();
}
}
class Exersise extends State<MainExerseClass> with WidgetsBindingObserver{
var count1;
#override
void didChangeAppLifecycleState(AppLifecycleState state) {
if (state == AppLifecycleState.resumed) {
//do your stuff
_requestSqlData();
}
}
#override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
#override
void initState() {
// TODO: implement initState
//count1 = widget.progress;
_requestSqlData();
super.initState();
}
void _requestSqlData() {
_requestSqlDataAsync();
}
void _requestSqlDataAsync() async {
int i = await DatabaseHelper.instance.getDayExcCounter("Day 1");
setState(() {
count1 = i;
});
print(count1);
}
void _gotoB() async {
String parameter = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => Resttimer(ExcerciselistPojo.randomList[count1].name,count1.toString())),
);
setState(() {
count1 = int.tryParse(parameter);
});
}
#override
Widget build(BuildContext context) {
// TODO: implement build
SizeConfig().init(context);
return Scaffold(
body: new Column(
children: <Widget>[
new Row(
children: <Widget>[
Builder(
builder: (context) => IconButton(
icon: Icon(Icons.arrow_back),
iconSize: 30,
onPressed: () {
// Here i want context
if (Navigator.canPop(context)) {
Navigator.pop(context);
} else {
SystemNavigator.pop();
}
},
),
),
new Container(
margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
child: new Text("Exercise",
style: new TextStyle(
color: Colors.black,
fontSize: 25,
fontWeight: FontWeight.bold)))
],
),
new Container(
margin: const EdgeInsets.fromLTRB(0, 10, 0, 0),
child: IntervalProgressBar(
direction: IntervalProgressDirection.horizontal,
max: ExcerciselistPojo.randomList.length,
progress: count1,
intervalSize: 2,
size: Size(600, 10),
highlightColor: Colors.pink,
defaultColor: Colors.grey,
intervalColor: Colors.transparent,
intervalHighlightColor: Colors.transparent,
reverse: false,
radius: 0)),
new Container(
margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Container(
height: 30,
alignment: Alignment.centerLeft,
child: FlatButton(
child: Image.asset("assets/images/play.webp"),
onPressed: () async {
//_updatecountertodb();
count1--;
if(count1<0)
count1=0;
await DatabaseHelper.instance.insertExcCounter("Day 1", count1);
_gotoB();
},
),
),
new Container(
height: 30,
alignment: Alignment.centerRight,
child: FlatButton(
child: Image.asset("assets/images/play.webp"),
onPressed: () async {
//_updatecountertodb();
count1++;
if(count1>5)
count1=0;
await DatabaseHelper.instance.insertExcCounter("Day 1", count1);
_gotoB();
},
),
)
],
),
),
new Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: new ImageSequenceAnimator(
"assets/images/" + ExcerciselistPojo.randomList[count1].imageUrl,
"Pic_",
0,
5,
"webp",
3,
isAutoPlay: true,
color: null,
fps: 2,
isLooping: true,
),
height: 300,
),
new Container(
margin: EdgeInsets.fromLTRB(0, 0, 5, 0),
alignment: Alignment.centerRight,
child: IconButton(
icon: Image.asset("assets/images/rest_time_exc.png"),
onPressed: () {},
),
),
new Container(
margin: EdgeInsets.fromLTRB(10, SizeConfig.screenHeight /16, 0, 0),
alignment: Alignment.centerLeft,
child: new Text(ExcerciselistPojo.randomList[count1].name,
style: new TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.blueGrey)),
),
new Container(
margin: EdgeInsets.fromLTRB(0, SizeConfig.screenHeight /44, 0, 0),
child: new LinearPercentIndicator(
animation: true,
animationDuration: 6000,
lineHeight: SizeConfig.screenHeight / 10,
percent: 1,
center: Text("100/68%"),
linearStrokeCap: LinearStrokeCap.butt,
progressColor: Colors.pink,
),
)
],
));
}
}
I am navigating from the second class to MainExerseClass dart by using
onTap: () {
Navigator.pop(context, count);
},
in MainExerseClass count is getting updated but ImageSequenceAnimator not refreshed it is showing old animation. And i want to restart LinearPercentIndicator.

Answer 1

I believe your problem will be solved by passing UniqueKey to widgets you want to be rendered again, like below:
Widget(key: uniqueKey(), ...)

Answer 2

You can copy paste run full code below
To allow below working demo works, you need to put png file from
https://github.com/aliyigitbireroglu/flutter-image-sequence-animator/tree/master/image_sequence_animator/example/assets/ImageSequence to
assets:
- assets/ImageSequence/
You do not need to use "assets/images/" + ExcerciselistPojo.randomList[count1].imageUrl
You can directly use imageSequenceAnimator.skip(count1.toDouble())
code snippet
ImageSequenceAnimatorState imageSequenceAnimator;
void onReadyToPlay(ImageSequenceAnimatorState _imageSequenceAnimator) {
imageSequenceAnimator = _imageSequenceAnimator;
}
void onPlaying(ImageSequenceAnimatorState _imageSequenceAnimator) {
setState(() {});
}
void _gotoB() async {
String parameter = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => RouteB()),
);
setState(() {
count1 = int.tryParse(parameter);
imageSequenceAnimator.skip(count1.toDouble());
});
}
working demo
full code
import 'package:flutter/material.dart';
import 'package:intervalprogressbar/intervalprogressbar.dart';
import 'package:image_sequence_animator/image_sequence_animator.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int count = 30;
int count1 = 3;
ImageSequenceAnimatorState imageSequenceAnimator;
void onReadyToPlay(ImageSequenceAnimatorState _imageSequenceAnimator) {
imageSequenceAnimator = _imageSequenceAnimator;
}
void onPlaying(ImageSequenceAnimatorState _imageSequenceAnimator) {
setState(() {});
}
void _gotoB() async {
String parameter = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => RouteB()),
);
setState(() {
count1 = int.tryParse(parameter);
imageSequenceAnimator.skip(count1.toDouble());
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 4,
child: Padding(
padding: EdgeInsets.all(25),
child: ImageSequenceAnimator(
"assets/ImageSequence",
"Frame_",
0,
5,
"png",
60,
isAutoPlay: false,
color: Colors.blue,
onReadyToPlay: onReadyToPlay,
onPlaying: onPlaying,
),
),
),
Expanded(
flex: 2,
child: Container(
margin: const EdgeInsets.fromLTRB(0, 10, 0, 0),
child: IntervalProgressBar(
direction: IntervalProgressDirection.horizontal,
max: count,
progress: count1,
intervalSize: 2,
size: Size(600, 10),
highlightColor: Colors.pink,
defaultColor: Colors.grey,
intervalColor: Colors.transparent,
intervalHighlightColor: Colors.transparent,
reverse: false,
radius: 0)),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _gotoB,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
class RouteB extends StatefulWidget {
#override
_RouteBState createState() => _RouteBState();
}
class _RouteBState extends State<RouteB> {
TextEditingController _textEditingController = TextEditingController();
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: [
TextField(
controller: _textEditingController,
),
RaisedButton(
child: Text('Go back'),
onPressed: () {
Navigator.pop(context, _textEditingController.text);
},
),
],
)),
);
}
}