Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article focuses on using RfFlutter to display the following dialog.

We’re going from left to right. The first thing to do is add packages

Rflutter_alert: ^ 1.0.2Copy the code

Basic alarm

RfFlutter has basic alarms that look good and are easy to use. We’ll set up a basic application with a HomeView stateless widget. I’ll use functional widgets so I don’t write too much code. You can use a normal stateless widget by defining an entire class. We’ll have our application with a simple HomeView widget. There is a button in the center that we will use throughout the tutorial.

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: HomeView('Home view Title')); } } @widget 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(); })));Copy the code

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

Custom widget styles

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;
Copy the code

Based on this, you can issue a very rounded alert that will not be cleared when you click outside the alert. And there is a blue overlay to indicate information notification.

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: color.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();Copy the code

Custom content

Not only can you change styles, you can also add your own content. Let’s add an alert pop-up window that displays when you want the user to log in 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();
Copy the code

An organization

If you plan to use alerts in multiple places and want different styles, I recommend that you create a dialog help file where you can store all the 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();
}
Copy the code

Now all you have to do in your code is

@widget
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
      },
    )));
Copy the code

When you have many alert styles, store them as const in a help file and reuse them. That’s it. Thanks for reading.