transitioned_indexed_stack 1.0.0

This Package helps You Making Animated Transitions between IndexedStack children widgets Easily.

Transitioned Indexed Stack

This Package helps You Making Animated Transitions between IndexedStack children widgets Easily.

What it offers

• Fade Indexed Stack
• Scale Indexed Stack
• Slide Indexed Stack
  • Slide Up IndexedStack
  • Slide Down IndexedStack
  • Slide Right IndexedStack
  • Slide Left IndexedStack
• Size Factor Indexed Stack
• Rotation Indexed Stack
• Diagonal Indexed Stack
• Shake Indexed Stack

All widgets offered by this package have the same properties as the pre-built Flutter IndexedStack widget, in addition of some useful properties which control the animations.

Demo App

Download Here

Documentation:

---

Fade Indexed Stack

  FadeIndexedStack(
      beginOpacity: 0.0,
      endOpacity: 1.0,
      curve: Curves.easeInOut,
      duration: const Duration(milliseconds: 250),
      index: 1,
      children: const <Widget>[
        Center(
          child: Text("Child 1"),
        ),
        Center(
          child: Text("Child 2"),
        ),
      ],
    ),

Properties

property	Description	type
beginOpacity	The Initial Fade Opacity Animation Value	double
endOpacity	The End Fade Opacity Animation Value	double
curve	The Animation Curve	Curve
duration	The Animation duration ( need a hot restart to see changes )	Duration

---

Scale Indexed Stack

  ScaleIndexedStack(
        beginScale: 0.0,
        endScale: 1.0,
        curve: Curves.easeInOut,
        duration: const Duration(milliseconds: 250),
        index: 1,
        children: const <Widget>[
          Center(
            child: Text("Child 1"),
          ),
          Center(
            child: Text("Child 2"),
          ),
        ],
      ),

Properties

property	Description	type
beginScale	The Initial Scale Animation Value	double
endScale	The End Scale Animation Value	double
curve	The Animation Curve	Curve
duration	The Animation duration ( need a hot restart to see changes )	Duration

---

Slide Indexed Stack

  SlideIndexedStack(
        endSlideOffset: const Offset(0.5, 1),
        beginSlideOffset: const Offset(0.0, 0.0),
        curve: Curves.easeInOut,
        duration: const Duration(milliseconds: 250),
        index: 1,
        children: const <Widget>[
          Center(
            child: Text("Child 1"),
          ),
          Center(
            child: Text("Child 2"),
          ),
        ],
      ),

Properties

property	Description	type
endSlideOffset	The Offset From Where The Animations Starts	Offset
beginSlideOffset	The Offset From Where The Animations Ends	Offset
curve	The Animation Curve	Curve
duration	The Animation duration ( need a hot restart to see changes )	Duration

You can also use the built-in up , down , right , left directions slide indexed stack:

• Slide Up IndexedStack

    SlideIndexedStack.up(
    curve: Curves.easeInOut,
    duration: const Duration(milliseconds: 250),
    index: 1,
    children: const <Widget>[
      Center(
        child: Text("Child 1"),
      ),
      Center(
        child: Text("Child 2"),
      ),
    ],
  ), 
  

• Slide Down IndexedStack

  SlideIndexedStack.down(
    curve: Curves.easeInOut,
    duration: const Duration(milliseconds: 250),
    index: 1,
    children: const <Widget>[
      Center(
        child: Text("Child 1"),
      ),
      Center(
        child: Text("Child 2"),
      ),
    ],
  ),
  

• Slide Right IndexedStack

  SlideIndexedStack.right(
    curve: Curves.easeInOut,
    duration: const Duration(milliseconds: 250),
    index: 1,
    children: const <Widget>[
      Center(
        child: Text("Child 1"),
      ),
      Center(
        child: Text("Child 2"),
      ),
    ],
  ),
  

• Slide Left IndexedStack

  SlideIndexedStack.left(
    curve: Curves.easeInOut,
    duration: const Duration(milliseconds: 250),
    index: 1,
    children: const <Widget>[
      Center(
        child: Text("Child 1"),
      ),
      Center(
        child: Text("Child 2"),
      ),
    ],
  ),
  

---

Size Factor Indexed Stack

   SizeFactorIndexedStack(
        beginSizeFactor: 0.0,
        endSizeFactor: 1.0,
        curve: Curves.easeInOut,
        duration: const Duration(milliseconds: 250),
        index: 1,
        children: const <Widget>[
          Center(
            child: Text("Child 1"),
          ),
          Center(
            child: Text("Child 2"),
          ),
        ],
      ),

Properties

property	Description	type
beginSizeFactor	The Initial Size Factor Animation Value	double
endSizeFactor	The End Size Factor Animation Value	double
curve	The Animation Curve	Curve
duration	The Animation duration ( need a hot restart to see changes )	Duration

---

Rotation Indexed Stack

  RotationIndexedStack(
        beginTurn: 0.0,
        endTurn: 1.0,
        curve: Curves.easeInOut,
        duration: const Duration(milliseconds: 250),
        index: 1,
        children: const <Widget>[
          Center(
            child: Text("Child 1"),
          ),
          Center(
            child: Text("Child 2"),
          ),
        ],
      ),

Properties

property	Description	type
beginTurn	The Initial Rotation Turn Animation Value	double
endTurn	The End Rotation Turn Animation Value	double
curve	The Animation Curve	Curve
duration	The Animation duration ( need a hot restart to see changes )	Duration

---

Shake Indexed Stack

ShakeIndexedStack(
        shakesCount: 100,
        shakeFrequency: 0.04,
        duration: const Duration(milliseconds: 250),
        curve: Curves.slowMiddle,
        index: 1,
        children: const <Widget>[
          Center(
            child: Text("Child 1"),
          ),
          Center(
            child: Text("Child 2"),
          ),
        ],
      ),

Properties

property	Description	type
shakesCount	This represent how much times a shake should be triggered during the animation	double
shakeFrequency	THis represents the shake frequency	double
curve	The Animation Curve	Curve
duration	The Animation duration ( need a hot restart to see changes )	Duration