Redrawing widgets in flutter after coming back from another

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.

score 0 · Answer 1 · answered Sep 15 '20 at 07:36

0

I believe your problem will be solved by passing UniqueKey to widgets you want to be rendered again, like below:

Widget(key: uniqueKey(), ...)

answered Sep 15 '20 at 07:36

Alireza Abiri

512
4
11

score 0 · Answer 2 · answered Sep 15 '20 at 08:30

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);
            },
          ),
        ],
      )),
    );
  }
}

Redrawing widgets in flutter after coming back from another

2 Answers2