How to animate change between widgets that are depending on condition?-CodePudding

I want to animation to switch between two widgets after setState call, depending on scrollPosition and I don't know how to do this.

Here is my scroll listener where setState is called

@override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      scrollController.addListener(() {
        print('scrolling');
        print(scrollController.position.pixels);
        if(scrollController.position.pixels == 0) {
          setState(() {
            carouselSliderVisible = true;
          });
        }
        else {
          setState(() {
            carouselSliderVisible = false;
          });
        }
      });
    });

and here are widgets which I want to animate change from one to another

Column(
    children: [
       carouselSliderVisible 
           ? CarouselSlider(
                items: [
                     Text('blablabla'),
                     Text('blabla')
                ],
                options: CarouselOptions(
                      height: size.height * 0.2,
                      enableInfiniteScroll: false
                ),
           )
           : Text('Polecane'),

These widgets has different height and it's important also for me that change of height will animate too.

CodePudding user response：

You can use in-built widgets to animate the changes:
e.g

AnimatedCrossFade
AnimatedSwitcher for most custom animation.

Be careful with keys, if you try to animate Widgets with the same type you need to set custom keys to the widgets.

AnimatedSwitcher(
   duration: const Duration(milliseconds: 500),
   child: first? 
          Container(key:ValueKey('first'), color: Colors.red) : 
          Container(key:ValueKey('second'), color: Colors.blue)
)

CodePudding user response：

Use this:

 Column(
      children: [
        LayoutBuilder(builder: (context, constraints) {
          return AnimatedSwitcher(
            child: carouselSliderVisible
                ? Container(
                    key: UniqueKey(),
                    height: 200.0,
                    width: 100.0,
                    color: Colors.red,
                  )
                : Container(
                    key: UniqueKey(),
                    child: Text('dasdasdasd '),
                  ),
            duration: Duration(seconds: 2),
          );
        }),
        Expanded(
            child: Container(
          color: Colors.red,
          child: InkWell(
            onTap: () {
              setState(() {
                carouselSliderVisible = !carouselSliderVisible;
              });
            },
            child: Text('data'),
          ),
        )),
      

],
    )

that part of your code which you want animate, is not clear so I use simple example.