Slide Transition Widget In Flutter
In Flutter every component on a screen of the Flutter application is a widget. The screen’s perspective entirely relies on the choice and grouping of the widgets used to build the application. Also, the structure of the code of an application is a tree of widgets.
In this blog, we will explore the SlideTransition widget and custom Transition widget using PageRouteBuilder and its functionality in the flutter, and Cupertino Sliding Segmented Control In Flutterlso we will see how to implement this Slide transition widget step by step in this demo program.
Table Contents:
Slide Transition:
In the Flutter SlideTransition is a widget that animates the position of a widget relative to its normal position and slides required a little bit more interaction by using tween, in this case, offset, and flutter widget. The translation is expressed as an Offset scaled to the child’s size. For example, an Offset with a dx of 0.25 will result in a horizontal translation of one-quarter of the width of the child.
By default, the offsets are applied in the coordinate system of the canvas (so positive x offsets move the child towards the right). If a widget direction is provided, then the offsets are applied in the reading direction, so in the right-to-left widget, positive x offsets move towards the left, and in the left-to-right widget, positive x offsets move towards the right as same applied top to bottom.
Demo Module :
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.
- > 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.
- > 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”.
- > 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.
- > 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
Tweens
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: anyThen 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.
GitHub Link:
find the source code of the Slide Transition:
GitHub – flutter-devs/slide_transition
Contribute to flutter-devs/slide_transition development by creating an account on GitHub.github.com
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
