CODEWITHSUNDEEP
flutter
Darkends
Darkends

Reputation: 101

Is there a way to create a transition between indexed stacks in flutter

Is there an animation widget or a way to make transitions between indexed stacks. I am having the stack cover the entire page. Or is there an easier way to transition from one page to another if I made several pages. Thanks new to flutter.

Upvotes: 9

Views: 5267

Answers (2)

Sanjay Kumar
Sanjay Kumar

Reputation: 1185

In my case, I have used AnimatedSwitcher but the animations did not work. So I found that to animate we need to use a Key for each child.

In my case

 List<ValueKey<int>> _keys = [ValueKey<int>(0),ValueKey<int>(1),ValueKey<int>(2)];

 int _currentIndex = 0;

Now use Key in AnimatedSwitcher as below:

AnimatedSwitcher(
  transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder,
  duration: const Duration(milliseconds: 500),
  child: IndexedStack(
    index: _currentIndex,
    key: ValueKey<int>(_currentIndex),
    children: [
      Page1(key: _keys[0],),
      Page2(key:_keys[1]),
      Page3(key:_keys[2])
    ],
  ),
);

change current index:

setState(() {
  _currentIndex = indexOfTabOrBottomNavItem;
});

NOTE: Using this way, you are not able to keep state of each widget.

UPDATE : I am using animations package in my project. You can use PageTransitionSwitcher from animations package. https://pub.dev/packages/animations

PageTransitionSwitcher(
  duration: Duration(milliseconds: 250),
  transitionBuilder: (widget, anim1, anim2) {
    return FadeScaleTransition(
      animation: anim1,
      child: widget,
    );
  },
  child: IndexedStack(
    index: _currentIndex,
    key: ValueKey<int>(_currentIndex),
    children: [
      Page1(),
      Page2(),
      Page3()
    ],
  ),  
);

Upvotes: 10

Egor
Egor

Reputation: 10344

I think what you are looking for is AnimatedSwitcher.

e.g.

AnimatedSwitcher(
  duration: Duration(milliseconds: 300),
  child: _indexedArray[_index],
);

By default AnimatedSwitcher runs a fade-in transition. You can explore transitionBuilder property to run custom animation.

You might also want to take a look at AnimatedCrossFade if you need to switch only between 2 widgets.

Let me know if this helped.

Upvotes: 5

Related Questions