Creating an Information Popup, Alert with Flutter.

Reading time: 2 minutes

To create a popup window, alerts, or information in Flutter, it is very simple by following the following steps:

First, we will create the design of the popup window:

The code for the widget is as follows:

class Alert extends StatelessWidget {

  Alert({Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  AlertDialog(
        title: Text("DevCodeLight"),
        content: Text("Content of the popup window for DevCodeLight"),
        backgroundColor: Colors.greenAccent,
        actions: <Widget>[
          TextButton(
            onPressed: () {
              // Write the route you want to navigate to after pressing the OK button
              Navigator.pushNamed(context, '/login');
            },
            child: const Text('OK'),
          ),
        ]
    );
  }
}

Then, we make the call to this popup window or widget wherever we need it, for example, as a result of pressing a button:

class Login extends StatelessWidget {
  Login({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print("entered Login");
    return Scaffold(
      appBar: AppBar(
        title: Text("Login"),
      ),
      body:Center(
        child:Container(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) => Alert(),
            );
          },
          child: Padding(
            padding: EdgeInsets.all(15),
            child: Text('Open popup window'),
          ),
        ),
      ),
      ),
    );
  }
}

Once the popup window is added within the onPressed action of a button, the result is as follows:

I hope this helps you. Have a great day!

DevCodeLight