Whenever you are going to code for building anything in Flutter, it will be inside a widget. each element on the 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 understand the static and custom SnackBar widget and its functionality in the flutter. We will see in this implementation of a simple demo program on the SnackBar Widget.

---

Table Contents:

SnackBar Widget

Code Implementation

Code File

Conclusion

GitHub Link

---

---

SnackBar:

In Flutter the SnackBar is a widget that lightweight pop up a quick message in your app that briefly signifies the user when something happened. Using a SnackBar you pop up a message for a few seconds at the bottom of your app.

By default, the snack bar displays at the bottom of the screen, and when the specified time is completed, it will be disappeared from the screen and we can make a custom snack bar also and It contains some actions that allow the user to add or remove any action and images. SnackBar requires a Scaffold, with a Scaffold instance and your SnackBar will instantly pop up. it’s easy to get a reference of your scaffold at any point in your widget tree by using the scaffold. of function.

Demo Module :

---

How to implement code in dart file :

You need to implement it in your code respectively:

First, In this dart file, I have created two buttons, the first button is for showing the default SnackBar and the second one is for the custom SnackBar.I am going to introduce first the Default SnackBar.

There are two steps for displaying a SnackBar. First, you have to create a SnackBar which can be done by calling the following constructor. it is very simple to use. here is the code.final snackBar = SnackBar(content: Text(‘Yay! A DefaultSnackBar!’));
ScaffoldMessenger.of(context).showSnackBar(snackBar);

But some of our requirements are not met, by default SnackBar .so May custom SnackBar is doing it. For custom SnackBar, I have to use a Flushbar dependency. it is a very congruent dependency to design your custom SnackBar upon your choice.

First, add the dependency of the SnackBar in pubspec.yaml

another_flushbar: ^1.10.24

And then have to create a method for showing the custom SnackBar.

void showFloatingFlushbar( {@required BuildContext? context,
@required String? message,
@required bool? isError}){
Flushbar? flush;
bool? _wasButtonClicked;
flush = Flushbar<bool>(
title: "Hey User",
message: message,
backgroundColor: isError! ? Colors.red : Colors.blueAccent,
duration: Duration(seconds: 3),
margin: EdgeInsets.all(20),

icon: Icon(
Icons.info_outline,
color: Colors.white,),
mainButton: FlatButton(
onPressed: () {
flush!.dismiss(true); // result = true
},
child: Text(
"ADD",
style: TextStyle(color: Colors.amber),
),
),) // <bool> is the type of the result passed to dismiss() and collected by show().then((result){})
..show(context!).then((result) {

});
}

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:another_flushbar/flushbar.dart';
import 'package:flutter/material.dart';

class SnackBarView extends StatefulWidget {
const SnackBarView({Key? key}) : super(key: key);

@override
_SnackBarViewState createState() => _SnackBarViewState();
}

class _SnackBarViewState extends State<SnackBarView> {

@override
Widget build(BuildContext context) {

return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildSnackBarButton()
],
),
);
}

Widget _buildSnackBarButton() {
return Column(
children: [
Center(
child: InkWell(
onTap: (){
final snackBar = SnackBar(content: Text('Yay! A Default SnackBar!'));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
child: Container(
height: 40,
width: 180,
decoration: BoxDecoration(
color: Colors.pinkAccent,
borderRadius: BorderRadius.all(Radius.circular(15))
),
child: Center(
child: Text("SnackBar",
style: TextStyle(
color: Colors.white,
fontSize: 16,

),),
),

),
),
),
SizedBox(height: 10,),
Center(
child: InkWell(
onTap: (){
showFloatingFlushbar(context: context,
message: 'Custom Snackbar!',
isError: false);
// showSnackBar(
// context: context,
// message: 'Custom Snackbar!',
// isError: false);
},
child: Container(
height: 40,
width: 180,
decoration: BoxDecoration(
color: Colors.pinkAccent,
borderRadius: BorderRadius.all(Radius.circular(15))
),
child: Center(
child: Text("Custom SnackBar",

style: TextStyle(
color: Colors.white,
fontSize: 16,

),),
),

),
),
),
],
);
}
}

void showFloatingFlushbar( {@required BuildContext? context,
@required String? message,
@required bool? isError}){
Flushbar? flush;
bool? _wasButtonClicked;
flush = Flushbar<bool>(
title: "Hey User",
message: message,
backgroundColor: isError! ? Colors.red : Colors.blueAccent,
duration: Duration(seconds: 3),
margin: EdgeInsets.all(20),

icon: Icon(
Icons.info_outline,
color: Colors.white,),
mainButton: FlatButton(
onPressed: () {
flush!.dismiss(true); // result = true
},
child: Text(
"ADD",
style: TextStyle(color: Colors.amber),
),
),) // <bool> is the type of the result passed to dismiss() and collected by show().then((result){})
..show(context!).then((result) {

});
}

void showSnackBar(
{@required BuildContext? context,
@required String? message,
@required bool? isError}) {
final snackBar = SnackBar(
content: Text(
message!,
style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.normal),
),
duration: Duration(seconds: 3),
backgroundColor: isError! ? Colors.red : Colors.green,
width: 340.0,
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
),
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),

action: SnackBarAction(
label: 'Undo',
textColor: Colors.white,
onPressed: () {},
),
);
ScaffoldMessenger.of(context!).showSnackBar(snackBar);
}

Conclusion:

In this article, I have explained the basic overview of the SnackBar Widget in a flutter, you can modify this code according to your choice. This was a small introduction to SnackBar 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, SnackBar 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 Flutter SnackBar Demo:

GitHub – flutter-devs/flutter_snackbar_demo
Permalink Failed to load the latest commit information. A new Flutter project. This project is a starting point for a…github.com

---

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

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.

---

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

Constructor

Properties

PageRoughtBuilder

Code Implementation

Conclusion

GitHub Link

---

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: 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.

---

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

---

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

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.

---