Slide Transition Widget In Flutter
By: Nilu Modanwal
Tags: Flutter, Transitions, Flutter App Development, Dart, Flutter Widget

Constructor:

Default Constructor for it will look like as below:

SlideTransitionWidget({

Key key,

@required Animation<Offset> position,

bool transformHitTests: true,

TextDirection textDirection,

Widget child,

});

Properties:

There are some properties of Slide Transition are:

> Key: This attribute key, controls how one widget replaces another widget in the tree.

This attribute key, controls how one widget replaces another widget in the tree. > Animation<Offset> position: This attribute is used to define the animation that controls the position of the child. If the current value of the position animation is (dx, dy), the child will be translated horizontally by width * dx and vertically by height * dy, after applying the textDirection if available.

This attribute is used to define the animation that controls the position of the child. If the current value of the position animation is (dx, dy), the child will be translated horizontally by width * dx and vertically by height * dy, after applying the textDirection if available. > bool transformHitTests: This attribute defines whether hit testing should be affected by the slide animation. If false, hit testing will proceed as if the child was not translated at all. Setting this value to false is useful for fast animations where you expect the user to commonly interact with the child widget in its final location and you want the user to benefit from “muscle memory”.

This attribute defines whether hit testing should be affected by the slide animation. If false, hit testing will proceed as if the child was not translated at all. Setting this value to false is useful for fast animations where you expect the user to commonly interact with the child widget in its final location and you want the user to benefit from “muscle memory”. > TextDirection textDirection: This attribute will define the direction to use for the x offset described by the position. If textDirection is null, the x offset is applied in the coordinate system of the canvas so positive x offsets move the child towards the right. Now if textDirection is TextDirection.rtl, the x offset is applied in the reading direction such that x offsets move the child towards the left. So now, if textDirection is TextDirection.ltr, the x offset is applied in the reading direction such that x offsets move the child towards the right.

This attribute will define the direction to use for the x offset described by the position. If textDirection is null, the x offset is applied in the coordinate system of the canvas so positive x offsets move the child towards the right. Now if textDirection is TextDirection.rtl, the x offset is applied in the reading direction such that x offsets move the child towards the left. So now, if textDirection is TextDirection.ltr, the x offset is applied in the reading direction such that x offsets move the child towards the right. > Widget child: This attribute is used to define the widget below this widget in the tree. This widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row Widget, Column Widget, or Stack Widget, which have a children’s property, and then provide the children to that widget.

To make more custom the transition flexibly, I am using PageRouteBuilder class.

PageRouteBuilder:

A utility class for defining one-off page routes in terms of callbacks. PageRouteBuilder provides an Animation object. This Animation can be used with Tween and Curve objects to customize the transition animation. This recipe shows how to transition between routes by animating the new route into view from the bottom of the screen.

To create a custom page route transition, this recipe uses the following steps:

Set up a PageRouteBuilder

Create a Tween

Add an AnimatedWidget

Use a CurveTween

Combine the two Tween s

How to implement code in the dart file:

You need to implement it in your code respectively:

In the first, I have created some custom radio buttons to show animation transition types. and I have added a dependency in pubspec.yaml file for use custom radio button. using the below dependency.

pubspec. yaml:

custom_radio_grouped_button: any

Then add custom radio buttons.

CustomRadioButton(

enableShape: true,

elevation: 0,

defaultSelected: "Left",

enableButtonWrap: true,

width: 100,

autoWidth: false,

unSelectedColor: Theme.of(context).canvasColor,

buttonLables: [

"Left",

"Right",

"Top",

"Bottom",

"InOut",

"Side",



],

buttonValues: [

"Left",

"Right",

"Top",

"Bottom",

"InOut",

"Side",



],

radioButtonValue: (value) {

radioButtonItem=value.toString();

print("Value:$value");

print("radioButtonItem:$radioButtonItem");

},

selectedColor: Theme.of(context).accentColor,

),

Now implement SlideTransition Widget.

First, implement in your class with SingleTickerProviderStateMixin. to use an animation controller. Then the user needs to define the controller and animation using the below code.

Suppose you have two pages: The first page and the second page. You’re on the First page and you want to navigate to the Second page. Somewhere in the First, you will do:

AnimationController _controller;

Animation<Offset> _animation;

initState() will have a code sample as below:

@override

void initState() {

super.initState();

controller =

AnimationController(vsync:this, duration: Duration(seconds: 1));



offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 1.0))

.animate(controller);

}

Now final I have created a class that extends PageRoughtBuilder class.

First left to right animation implementations code sample are:

class SlideLeftRoute extends PageRouteBuilder {

final Widget widget;

SlideLeftRoute({required this.widget})

: super(

pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {

return widget;

},

transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {

return new SlideTransition(

position: new Tween<Offset>(

begin: const Offset(-1.0, 0.0),

end: Offset.zero,

).animate(animation),

child: child,

);

}

);

}

The second right to left animation implementations code sample is:

class SlideRightRoute extends PageRouteBuilder {

final Widget widget;

SlideRightRoute({required this.widget})

: super(

pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {

return widget;

},

transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {

return new SlideTransition(

position: new Tween<Offset>(

begin: const Offset(1.0, 0.0),

end: Offset.zero,

).animate(animation),

child: child,

);

}

);

}

The third top to bottom animation implementations code sample is:

class SlideTopRoute extends PageRouteBuilder {

final Widget widget;

SlideTopRoute({required this.widget})

: super(

pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {

return widget;

},

transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {

return new SlideTransition(

position: new Tween<Offset>(

begin: const Offset(0.0, -1.0),

end: Offset.zero,

).animate(animation),

child: child,

);

}

);

}

The fourth bottom to top animation implementations code sample is:

class SlideBottomRoute extends PageRouteBuilder {

final Widget widget;

SlideBottomRoute({required this.widget})

: super(

pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {

return widget;

},

transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {

return new SlideTransition(

position: new Tween<Offset>(

begin: Offset(0.0, 1.0),

end: Offset.zero,

).animate(animation),

child: child,

);

// transitionDuration:Duration(seconds: 1);

}



);

}

The fifth in and out animation implementations code samples are:

class ScaleRoute extends PageRouteBuilder {

final Widget widget;



ScaleRoute({required this.widget})

: super(pageBuilder: (BuildContext context, Animation<double> animation,

Animation<double> secondaryAnimation) {

return widget;

}, transitionsBuilder: (BuildContext context,

Animation<double> animation,

Animation<double> secondaryAnimation,

Widget child) {

return new ScaleTransition(

scale: new Tween<double>(

begin: 0.0,

end: 1.0,

).animate(

CurvedAnimation(

parent: animation,

curve: Interval(

0.00,

0.50,

curve: Curves.linear,

),

),

),

child: ScaleTransition(

scale: Tween<double>(

begin: 1.5,

end: 1.0,

).animate(

CurvedAnimation(

parent: animation,

curve: Interval(

0.50,

1.00,

curve: Curves.linear,

),

),

),

child: child,

),

);

});

}

The six side animation implementations code sample.

class SlideSideMoveRoute extends PageRouteBuilder {

final Widget widget;

SlideSideMoveRoute({required this.widget})

: super(

pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {

return widget;

},

transitionDuration: Duration(seconds: 1),

transitionsBuilder: (BuildContext context,

Animation<double> animation,

Animation<double> secondaryAnimation, Widget child) {

Animation<Offset> custom= Tween<Offset>(

begin:Offset(1.0,1.0),end: Offset(0.0,0.0)).animate(animation);

return SlideTransition(

position: custom,

child: child);

}

);

}

Conclusion:

In this article, I have explained the basic overview of the SlideTransition Widget in a flutter, you can modify this code according to your choice. This was a small introduction to SlideTransition Widget On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up the Explore, SlideTransition Widget in your flutter projects.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.