Flutter Alert Dialog with Icon

In today's tutorial we will make alert dialog with image(icon). We will modify alert dialog whole layout and Put Image then alert title and OK and Cancel button. AlertDialog widget has 3 main properties Title, Content and Actions. Title contains the main title of Alert dialog. We can even place multiple widgets inside it. Content has the 2nd sub text of alert dialog. Action contains buttons.

Flutter Alert Dialog with Icon

1. Creating a String variable and assign Image icon URL as String.

 String iconURL =
      "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmrD3a2NKbu8ciNIVpLr0EJWb-QvUhqUfSSqKDbxRSeQFqLjwcHYW62TEtuXTVZ9pPhyB95SmNzfuFQcNcfQ8-hzfkAmeesTmYFokGQA1a7DsTlrCmCLJ4vU0B28KlrT-ndz9ShbWQ4RTo3ZJYo3zOU7A314ZrnAdSxhgH1OxqVTlN1-1nI9ayg-_iSLjA/s256/exit.png";

2. Creating AlertDialog widget in showDialog() method.

• title
• content
• actions

Future<void> simpleAlert() async {
    await showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Row(children: [
            Image.network(
              iconURL,
              width: 50,
              height: 50,
              fit: BoxFit.contain,
            ),
            const Text('  Test Alert Dialog ')
          ]),
          content: const Text("Are You Sure Want To Exit?"),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('OK'),
            ),
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('CANCEL'),
            ),
          ],
        );
      },
    );
  }

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: MyApp()));
  }
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State {
  String iconURL =
      "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmrD3a2NKbu8ciNIVpLr0EJWb-QvUhqUfSSqKDbxRSeQFqLjwcHYW62TEtuXTVZ9pPhyB95SmNzfuFQcNcfQ8-hzfkAmeesTmYFokGQA1a7DsTlrCmCLJ4vU0B28KlrT-ndz9ShbWQ4RTo3ZJYo3zOU7A314ZrnAdSxhgH1OxqVTlN1-1nI9ayg-_iSLjA/s256/exit.png";

  Future<void> simpleAlert() async {
    await showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Row(children: [
            Image.network(
              iconURL,
              width: 50,
              height: 50,
              fit: BoxFit.contain,
            ),
            const Text('  Test Alert Dialog ')
          ]),
          content: const Text("Are You Sure Want To Exit?"),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('OK'),
            ),
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('CANCEL'),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.cyan,
          textStyle: const TextStyle(fontSize: 21),
        ),
        onPressed: simpleAlert,
        child: const Text('Show Alert'),
      ),
    );
  }
}

Screenshots: