Skip to content
Related Articles

Related Articles

Flutter – RFlutter Alerts

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 31 Jan, 2022

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.

Dart




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:

Dart




ElevatedButton(
       child: Text("Click Me"),
       onPressed: () {
          Alert(
               context: context,
               title: "RFlutter Alert",
               desc: "GeeksForGeeks is awesome.").show();
            },
 ),


Output:

Alert with Buttons:

Dart




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:

Dart




Alert(
       context: context,
       title: "GeeksForGeeks",
       desc: "Create Awesome alerts with RFlutter Alert.",
       image: Image.network("https://i.stack.imgur.com/xLOYo.png"),
 ).show();


Output:

Customized Alert:

Dart




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().

Dart




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:

Dart




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:
                          Image.network("https://i.stack.imgur.com/xLOYo.png"),
                    ).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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!