Baranimation gets played twice on a pushed Screen

[Wizzel1]

As the title says, the animation looks weird and it seems like it's played twice. What could be the cause to this?

[ltdangkhoa]

Can you share your code? I can quickly guess that the issue came from kinds of state management

[Wizzel1]

This is the screen:

class HabitDetailScreen extends StatelessWidget {
  final Habit habit;

  const HabitDetailScreen({Key key, this.habit}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: habit.id,
      child: Scaffold(
        appBar: AppBar(
          elevation: 0,
          backgroundColor: Colors.transparent,
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Material(
                  type: MaterialType.transparency,
                  child: Text(
                    habit.name,
                    style: GoogleFonts.quicksand(
                      fontWeight: FontWeight.bold,
                      fontSize: 48,
                      color: Color(0xFFFEFDFB),
                    ),
                  ),
                ),
                Material(
                  type: MaterialType.transparency,
                  child: Text(
                    "Lorem  aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
                    style: GoogleFonts.quicksand(
                      fontWeight: FontWeight.normal,
                      fontSize: 16,
                      color: Colors.white,
                    ),
                  ),
                ),
                Material(
                  type: MaterialType.transparency,
                  child: Text(
                    "Daily",
                    style: GoogleFonts.ptSans(
                      fontWeight: FontWeight.bold,
                      fontSize: 24,
                      color: Color(0xFFFF8F00),
                    ),
                  ),
                ),
                SizedBox(height: 20),
                Container(
                  height: 80,
                  child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      shrinkWrap: true,
                      itemCount: 7,
                      itemBuilder: (context, index) {
                        return Padding(
                          padding: const EdgeInsets.only(right: 10.0),
                          child: Container(
                            height: 80,
                            width: 50,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(20),
                                color: Colors.white),
                            child: Center(
                              child: Text(
                                "$index",
                                style: GoogleFonts.quicksand(
                                  fontWeight: FontWeight.normal,
                                  fontSize: 12,
                                  color: Color(0xFFFF8F00),
                                ),
                              ),
                            ),
                          ),
                        );
                      }),
                ),
                SizedBox(height: 20),
                FAProgressBar(
                  size: 20,
                  backgroundColor: Colors.white,
                  progressColor: Color(0xFFFF8F00),
                  maxValue: 7,
                  currentValue: 5,
                  displayText: '/7 days',
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

[Wizzel1]

I can confirm that the build method only gets called once.

[ltdangkhoa]

Did you try not to use Hero animation together? I can see your code is using Stateless so I think the parent widget of FAProgressBar would effect its state

[Wizzel1]

Yes you are right, removing the hero widget fixed the problem. So how would I get it to work with the hero widget?

[Wizzel1]

Any news about this?

[ltdangkhoa]

@Wizzel1 I have an idea: try to use FutureBuilder to wait for the completion of Hero animated

[Wizzel1]

Good one, that seems to work. However I did it with an AnimatedSwitcher and a bool like this :

AnimatedSwitcher(
                  duration: Duration(milliseconds: 200),
                  child: showProgressBar
                      ? LinearPercentIndicator(
                          width: MediaQuery.of(context).size.width - 50,
                          animation: true,
                          lineHeight: 20.0,
                          animationDuration: 250,
                          percent: 0.8,
                          center: Text("80.0%"),
                          linearStrokeCap: LinearStrokeCap.roundAll,
                          progressColor: Colors.green,
                        )
                      : SizedBox.shrink(),
                )

and in the initState add a postFrameCallback like this:

  void initState() {
    WidgetsBinding.instance.addPostFrameCallback(
      (timeStamp) {
        setState(() {
          showProgressBar = true;
        });
      },
    );
    super.initState();
  }

thats working well but out of curiosity, what would a Futurebuilder with your suggested functionality look like? How am I listening for the completion of the hero transition?

Anyways thanks for the quick help, really apprechiate it!