Exploring AnimatedModalBarrier In Flutter
Animation is an amazing and significant idea in Flutter. We can’t envision any mobile application without animations. At the point when you tap on a catch or move starting with one page then onto the next page are altogether animations. Animations improve client encounters and make the applications more interactive.
There are heaps of ways Flutter makes it simple to make animations, from fundamental Tweens to Implicit Animations that are incorporated directly into the structure. Furthermore, assuming those don’t meet your requirements, there are outsider arrangements that do almost anything you can envision.
In this blog, we will be Exploring AnimatedModalBarrier In Flutter. We will see how to implement a demo program of the animated modal barrier and how to use it in your flutter applications.
AnimatedModalBarrier class – widgets library – Dart API
A widget that prevents the user from interacting with widgets behind itself, and can be configured with an animated…api. flutter.dev
Table Of Contents::
AnimatedModalBarrier:
It is a widget that incapacitates communications with the widgets behind itself. It’s like a non-animated ModalBarrier, however, it permits you to set an Animaton<Color> so you can make an animation impact when the boundary is being appeared.
It keeps the user from connecting with widgets behind itself and can be arranged with an animated color value. The modal barrier is the scrim that is delivered behind each route, which by and large keeps the client from collaborating with the course underneath the current route, and typically part of the way clouds such routes.
Demo Module :
This demo video shows how to use an animated modal barrier in a flutter. It shows how the animated modal barrier will work using the AnimatedModalBarrier class in your flutter applications. It shows when the user taps a button, then behind the button color will be animated and animation effect show and also the color was changing. It will be shown on your device.
Constructor:
There are constructor of AnimatedModalBarrier are:
const AnimatedModalBarrier({
Key key,
Animation<Color> color,
this.dismissible = true,
this.semanticsLabel,
this.barrierSemanticsDismissible,
})
In the above constructor, all fields set apart with @required should not be vacant argument is really needed since you will get an affirmation error on the off chance that you don’t pass it.
Properties:
There are some properties of AnimatedModalBarrier are:
- > key: This property represents how one widget should replace another widget in a tree.
- > color: This property will set up the barrier color with this color.
- dismissible: This property will define whether touching the barrier will pop the current route of the Navigator.
- semanticsLabel: This property is used for the barrier if it is dismissible. It is read out by accessibility tools.
- barrierSemanticsDismissible: This property will specify the semantic modal that is included in the semantic tree or not.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called animated_demo_screen.dart inside the lib folder.
In the body part, we will add Builder() method. In this method, we will add a center widget. Inside, we will add a column and its children widget we will add Container. It’s child property, we will add Stack() method. Inside, we will add the buildList(context) method. We will deeply define below the code.
Builder(
builder: (context) => Center(
child: Padding(
padding: EdgeInsets.all(15.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 100.0,
width: 250.0,
child: Stack(
alignment: AlignmentDirectional.center,
children: buildList(context),
),
),
],
),
),
),
),
We will deeply define buildList(context) method:
We will create a list of widgets. In this widget, we will add a RaisedButton(). In this button, we will add text, color, padding, and the OnPressed function. In this function, we will show the snackbar.
List<Widget> buildList(BuildContext context) {
List<Widget> widgets = <Widget>[
RaisedButton(
padding: EdgeInsets.only(left: 40,right: 40),
color: Colors.teal[200],
child: Text('Press'),
onPressed: () {
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Button is press'),
backgroundColor: Colors.black,),
);
},
),
];
return widgets;
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
You need to make an AnimationController. A TickerProvider is needed for the vsync argument, so you need to have a State class that extends TickerProviderStateMixin.
class _AnimatedDemoScreenState extends State<AnimatedDemoScreen>
with SingleTickerProviderStateMixin {
bool _isLoading = false;
Widget _animatedModalBarrier;
AnimationController _animationController;
Animation<Color> _colorAnimation;
We will create initState() method. In this method, You can utilize ColorTweento characterize the color toward the start and end. In the AnimationController, set the duration of how long the animation will be played. To make the Animaton<Color>, utilize the ColorTween’s animate method and pass the regulator as the contention. From that point onward, pass the Animaton<Color>, as the color contention of AnimatedModalBarrier.
@override
void initState() {
ColorTween _colorTween = ColorTween(
begin: Color.fromARGB(200, 155, 120, 155),
end: Color.fromARGB(100, 127, 127, 127),
);
_animationController = AnimationController(
vsync: this,
duration: const Duration(seconds: 3)
);
_colorAnimation = _colorTween.animate(_animationController);
_animatedModalBarrier = AnimatedModalBarrier(
color: _colorAnimation,
dismissible: true,
);
super.initState();
}
Now, we will add some functions to the buildList(context) method. In the onPressed function, we will add the setState() method and add _isLoading is true, then the animation will start. Also, we will add _animationController was reset and forward. We will add future delayed duration for five seconds and inside setState() we will add _isLoading is false. Then an animation will stop after five seconds.
onPressed: () {
setState(() {
_isLoading = true;
});
_animationController.reset();
_animationController.forward();
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Button is press'),
backgroundColor: Colors.black,),
);
Future.delayed(const Duration(seconds: 5), () {
setState(() {
_isLoading = false;
});
});
},
),
];
if (_isLoading) {
widgets.add(_animatedModalBarrier);
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class AnimatedDemoScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() => _AnimatedDemoScreenState();
}
class _AnimatedDemoScreenState extends State<AnimatedDemoScreen>
with SingleTickerProviderStateMixin {
bool _isLoading = false;
Widget _animatedModalBarrier;
AnimationController _animationController;
Animation<Color> _colorAnimation;
@override
void initState() {
ColorTween _colorTween = ColorTween(
begin: Color.fromARGB(200, 155, 120, 155),
end: Color.fromARGB(100, 127, 127, 127),
);
_animationController = AnimationController(
vsync: this,
duration: const Duration(seconds: 3)
);
_colorAnimation = _colorTween.animate(_animationController);
_animatedModalBarrier = AnimatedModalBarrier(
color: _colorAnimation,
dismissible: true,
);
super.initState();
}
List<Widget> buildList(BuildContext context) {
List<Widget> widgets = <Widget>[
RaisedButton(
padding: EdgeInsets.only(left: 40,right: 40),
color: Colors.teal[200],
child: Text('Press'),
onPressed: () {
setState(() {
_isLoading = true;
});
_animationController.reset();
_animationController.forward();
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Button is press'),
backgroundColor: Colors.black,),
);
Future.delayed(const Duration(seconds: 5), () {
setState(() {
_isLoading = false;
});
});
},
),
];
if (_isLoading) {
widgets.add(_animatedModalBarrier);
}
return widgets;
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey[100],
appBar: AppBar(
backgroundColor: Colors.black,
automaticallyImplyLeading: false,
title: Text('Flutter AnimatedModalBarrier Demo'),
),
body: Builder(
builder: (context) => Center(
child: Padding(
padding: EdgeInsets.all(15.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 100.0,
width: 250.0,
child: Stack(
alignment: AlignmentDirectional.center,
children: buildList(context),
),
),
],
),
),
),
),
);
}
}
Conclusion:
In the article, I have explained the basic structure of the AnimatedModalBarrier in a flutter; you can modify this code according to your choice. This was a small introduction toAnimatedModalBarrier On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the AnimatedModalBarrier in your flutter projects. We will show you what the AnimatedModalBarrier is?, some properties and conductor using in AnimatedModalBarrier, and make a demo program for working AnimatedModalBarrier and show when the user taps a button, then behind the button color will be animated and animation effect show and also the color was changing using the AnimatedModalBarrier class in your flutter applications, So please try it.
❤ ❤ 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.
find the source code of the Flutter Animated Modal Barrier Demo:
flutter-devs/flutter_animated_modal_barrier_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…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.
