Tutorials

Snippets

Search

Tags

Subscribe on Youtube

Quick and Easy Dialogs in Flutter with RfFlutter

Cover image

In this tutorial we'll use RfFlutter to show dialogs like below.

All alerts for Tutorial

We'll go from left to right. First thing to do is add the package

rflutter_alert: ^1.0.2

RfFlutter has a decent looking basic alert and can be easily used. We'll setup a basic app with a HomeView stateless widget. I'm going to use functional widget so that I don't write too much code. You can use normal stateless widgets by defining the entire class. We'll have our app with a simple HomeView widget. We'll have one button in the center that we'll use throughout the entire tutorial.

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(home: HomeView('Home view Title'));
  }
}


Widget homeView(BuildContext context, String title) => Scaffold(
    body: Center(
        child: MaterialButton(
  color: Colors.yellow,
  child: Text('Show Alert'),
  onPressed: () {
    // Show a basic widget
    Alert(context: context, title: "FilledStacks", desc: "Flutter is awesome.")
        .show();
  },
)));

The code in the onPressed function call is all we need to show a basic widget.

The base widget can be styled and has the following properties.

  final AnimationType animationType;
  final Duration animationDuration;
  final ShapeBorder alertBorder;
  final bool isCloseButton;
  final bool isOverlayTapDismiss;
  final Color overlayColor;
  final TextStyle titleStyle;
  final TextStyle descStyle;
  final EdgeInsets buttonAreaPadding;

based on that you can make a very rounded alert, that doesn't dismiss when you tap outside of it. And has a blue overlay to indicated an info notice.

 var alertStyle = AlertStyle(
          overlayColor: Colors.blue[400],
          animationType: AnimationType.fromTop,
          isCloseButton: false,
          isOverlayTapDismiss: false,
          descStyle: TextStyle(fontWeight: FontWeight.bold),
          animationDuration: Duration(milliseconds: 400),
          alertBorder: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(50.0),
            side: BorderSide(
              color: Colors.grey,
            ),
          ),
          titleStyle: TextStyle(
            color: Color.fromRGBO(91, 55, 185, 1.0),
          ),
        );

        Alert(
          context: context,
          style: alertStyle,
          type: AlertType.info,
          title: "FilledStacks",
          desc: "FilledStacks.com has the best Flutter tutorials",
          buttons: [
            DialogButton(
              child: Text(
                "COOL",
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
              onPressed: () => Navigator.pop(context),
              color: Color.fromRGBO(91, 55, 185, 1.0),
              radius: BorderRadius.circular(10.0),
            ),
          ],
        ).show();

It's not only the styling that you can change but you can also add your own content. Let's add an alert popup that would show when you want the user to login again.

   Alert(
        context: context,
        title: "LOGIN",
        content: Column(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                icon: Icon(Icons.account_circle),
                labelText: 'Username',
              ),
            ),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                icon: Icon(Icons.lock),
                labelText: 'Password',
              ),
            ),
          ],
        ),
        buttons: [
          DialogButton(
            onPressed: () => Navigator.pop(context),
            child: Text(
              "LOGIN",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          )
        ]).show();

If you're going to use alerts in multiple places and you want different styles I'd recommend creating a dialog helper file where you can store all your styles and predefined widgets.

// dialog_helper.dart


showLoginDialog(
  BuildContext context, {
  TextEditingController usernameController,
  TextEditingController loginController,
  Function onLoginPressed
}) {
  Alert(
      context: context,
      title: "LOGIN",
      content: Column(
        children: <Widget>[
          TextField(
            decoration: InputDecoration(
              icon: Icon(Icons.account_circle),
              labelText: 'Username',
            ),
          ),
          TextField(
            obscureText: true,
            decoration: InputDecoration(
              icon: Icon(Icons.lock),
              labelText: 'Password',
            ),
          ),
        ],
      ),
      buttons: [
        DialogButton(
          onPressed: onLoginPressed,
          child: Text(
            "LOGIN",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        )
      ]).show();
}

Now in your code all you'll have to do is


Widget homeView(BuildContext context, String title) => Scaffold(
        body: Center(
            child: MaterialButton(
      color: Colors.yellow,
      child: Text('Show Alert'),
      onPressed: () {
        showLoginWidget(context,
        onLoginPressed: (){  /* Do stuff */ }); // <-- Much better readability
      },
    )));

When you have many alert styles store them as const in the helper file and reuse them. And that's it. Thanks for reading.

Checkout all the other snippets here. You might find some more Flutter magic.

Also check out

Cover image

A Responsive UI Architecture Solution with Provider

In this tutorial we add state management to our Responsive UI Architecture using Provider.

Link
Cover image

Building a Responsive UI Architecture in Flutter

In this tutorial I show you how to build responsive widgets for Flutter.

Link
Cover image

The Best Flutter Responsive UI Pattern

In this tutorial we go over how you can create a shared widget that provides all the sizing functionality for a responsive UI

Link