In Flutter, rflutter_alert is useful to create alerts in applications easily. It is a customizable and best way to create alerts in Flutter. In this article, we will see the different styles of alerts we can create with this awesome Flutter library. Follow the article to learn about it.
Adding the dependency:
To install rflutter_alert, add it under the dependency section of the pubspec.yaml file. Then configure it using pub get.
Import the dependency:
To use this package, import it in the main.dart file or any file in which we want to use the alert feature.
import 'package:rflutter_alert/rflutter_alert.dart' ;
|
Implementation:
To create an alert dialog we need to use Alert() widget. It requires a context argument and show() method is used to render the alert on the screen. The features this widget offers are:
- Context (Required)
- String? id
- AlertType? type
- AlertStyle style = const AlertStyle()
- EdgeInsets? padding
- Widget? image
- String? title
- String? desc
- Widget content = const SizedBox()
- List<DialogButton>? buttons
- Function? closeFunction
- Widget? closeIcon
- bool onWillPopActive = false
- Widget Function(BuildContext, Animation<double>, Animation<double>, Widget)? alertAnimation
- bool useRootNavigator = true,
Simple Alert:
ElevatedButton( child: Text( "Click Me" ),
onPressed: () {
Alert(
context: context,
title: "RFlutter Alert" ,
desc: "GeeksForGeeks is awesome." ).show();
},
),
|
Output:
Alert with Buttons:
Alert( context: context,
type: AlertType.info,
title: "GeeksForGeeks" ,
desc: "Create more awesome alerts with RFlutter Alert." ,
buttons: [
DialogButton(
child: Text(
"Done" ,
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () => Navigator.pop(context),
width: 120,
),
DialogButton(
child: Text(
"Cancel" ,
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () => Navigator.pop(context),
width: 120,
)
],
).show();
|
Output:
Alert with Image:
Alert( context: context,
title: "GeeksForGeeks" ,
desc: "Create Awesome alerts with RFlutter Alert." ,
).show();
|
Output:
Customized Alert:
Alert( context: context,
title: "Sign Up" ,
content: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
icon: Icon(Icons.email),
labelText: 'Email' ,
),
),
TextField(
obscureText: true ,
decoration: InputDecoration(
icon: Icon(Icons.lock),
labelText: 'Password' ,
),
),
],
),
buttons: [
DialogButton(
onPressed: () => Navigator.pop(context),
child: Text(
"SIGN UP" ,
style: TextStyle(color: Colors.white, fontSize: 20),
),
)
]).show();
|
Output:
Alert with Animation:
We can also add animation to the Alert() widget using animationType property. If we want the alert to pop from the top we can use AnimationType.fromTop and if from the bottom we use AnimationType.fromBottom. We can also give it animationDuration and customized style using AlertStyle().
Alert( title: "GeeksForGeeks" ,
context: context,
style: AlertStyle(
alertAlignment: Alignment.center,
animationType: AnimationType.fromBottom,
isCloseButton: false ,
isOverlayTapDismiss: false ,
descStyle: TextStyle(fontWeight: FontWeight.bold),
descTextAlign: TextAlign.start,
animationDuration: Duration(milliseconds: 300),
alertBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
side: BorderSide(
color: Colors.red,
),
),
titleStyle: TextStyle(
color: Colors.green,
),
)).show();
|
Full Source Code:
import 'package:flutter/material.dart' ;
import 'package:rflutter_alert/rflutter_alert.dart' ;
void main() {
runApp( const MyApp());
} class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
title: 'RFlutter Alert Tutorial' ,
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(),
);
}
} class MyHomePage extends StatefulWidget {
@override
State<MyHomePage> createState() => _MyHomePageState();
} class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text( "GeeksForGeeks" ),
centerTitle: true ,
),
body: Container(
child: Center(
child: Column(
children: [
SizedBox(height: 100),
ElevatedButton(
child: Text( "Click One" ),
onPressed: () {
Alert(
context: context,
title: "RFlutter Alert" ,
desc: "GeeksForGeeks is awesome." )
.show();
},
),
ElevatedButton(
onPressed: () {
Alert(
context: context,
type: AlertType.info,
title: "GeeksForGeeks" ,
desc: "Create more awesome alerts with RFlutter Alert." ,
buttons: [
DialogButton(
child: Text(
"Done" ,
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () => Navigator.pop(context),
width: 120,
),
DialogButton(
child: Text(
"Cancel" ,
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () => Navigator.pop(context),
width: 120,
)
],
).show();
},
child: Text( "Click Two" )),
ElevatedButton(
onPressed: () {
Alert(
context: context,
title: "GeeksForGeeks" ,
desc: "Create Awesome alerts with RFlutter Alert." ,
image:
).show();
},
child: Text( "Click Three" )),
ElevatedButton(
onPressed: () {
Alert(
context: context,
title: "Sign Up" ,
content: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
icon: Icon(Icons.email),
labelText: 'Email' ,
),
),
TextField(
obscureText: true ,
decoration: InputDecoration(
icon: Icon(Icons.lock),
labelText: 'Password' ,
),
),
],
),
buttons: [
DialogButton(
onPressed: () => Navigator.pop(context),
child: Text(
"SIGN UP" ,
style:
TextStyle(color: Colors.white, fontSize: 20),
),
)
]).show();
},
child: Text( "Click Four" )),
ElevatedButton(
onPressed: () {
Alert(
title: "GeeksForGeeks" ,
context: context,
style: AlertStyle(
alertAlignment: Alignment.center,
animationType: AnimationType.fromBottom,
isCloseButton: false ,
isOverlayTapDismiss: false ,
descStyle: TextStyle(fontWeight: FontWeight.bold),
descTextAlign: TextAlign.start,
animationDuration: Duration(milliseconds: 300),
alertBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
side: BorderSide(
color: Colors.red,
),
),
titleStyle: TextStyle(
color: Colors.green,
),
)).show();
},
child: Text( "Click Five" ))
],
),
),
),
);
}
} |
Output: