My application's main screen contains a SliverAppBar with three TabBarViews.

Widget build(BuildContext context) {
    return _loaded
        ? Scaffold(
            backgroundColor: mainBgColor,
            body: MaterialApp(
              theme: ThemeData(
                iconTheme: iconsStyle,
              ),
              home: NestedScrollView(
                controller: _scrollViewController,
                headerSliverBuilder:
                    (BuildContext context, bool boxIsScrolled) {
                  return <Widget>[
                    SliverAppBar(
                      collapsedHeight: 80,
                      title: Text(
                        actor.name,
                        style: kNavTextStyle,
                      ),
                      leading: IconButtonWidget(false),
                                          iconTheme: kBackButtonStyle,
                      centerTitle: true,
                      backgroundColor: thirdColor,
                      pinned: true,
                      floating: true,
                      forceElevated: boxIsScrolled,
                      bottom: TabBar(
                        labelColor: secondaryColor,
                        labelStyle: const TextStyle(
                            fontFamily: 'DynaPuff',
                            fontWeight: FontWeight.w100,
                            fontSize: 17),
                        indicatorSize: TabBarIndicatorSize.tab,
                        indicator: const BoxDecoration(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(10),
                              topRight: Radius.circular(10)),
                          color: mainBgColor,
                        ),
                        tabs: _tabs,
                        controller: _tabController,
                      ),
                    )
                  ];
                },
                body: TabBarView(
                  controller: _tabController,
                  children: _tabBars,
                ),
              ),
            ),
          )
        : const LoadingWidget();
  }

The first of the _tabBars contains an image that has an animation. The first time (when the app is loaded) I want to show this animation and then stop it. The problem is if I change the tab and step back to the first tab, the animation is shown again.

Is there any way to take care of it?

This is the code of the widget with the animation:

 AnimationController _animController;

  Animation<Offset> _animation;
  @override
  void initState() {
    _animController = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    )..forward();
    _animation = Tween<Offset>(
      begin: const Offset(1.0, 0.0),
      end: const Offset(0.0, 0.0),
    ).animate(CurvedAnimation(
      parent: _animController,
      curve: Curves.decelerate,
    ));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _animation,
      child: SizedBox(
        width: double.maxFinite,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            SizedBox(
              height: 250,
              child: Image.asset('images/hurray.png'),
            ),
            Text(
              cardText,
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

make a bool somewhere in your state :

bool _firstTime = true;

then listen your animController

animController = AnimationController(
  duration: const Duration(milliseconds: 500),
  vsync: this,
)..addStatusListener((status) { 
  if(status == AnimationStatus.completed){
    setState(() {
      //set _firstTime to false;
       _firstTime = false;
    });
  }
});
if(_firstTime){
  _animController.forward();
}