Flutter Dialogs
Flutter dialogs box is a kind of screen widget that can appear on a window or screen and ask for a decision or display important information. Once a dialog box appears, all further actions will be disabled until you either close it or answer its questions. An alarm message, a simple notification with many alternatives displayed, or even a tab for displaying.
The dialog box are all examples of conditions that could call for the usage of a dialog box. Regarding the contents of the dialog, this widget does not hold any opinion. You might want to look into AlertDialog or SimpleDialog instead, they both implement different types of Material Design in Flutter Dialogs in flutterforums.
Types of Flutter Dialogs
- Alert Dialog: The alert text box lets the user know about any situation that needs to be noticed. You can choose to have a title and a list of options in the alert dialog box. We need a different number of acts to meet our needs. Flutter Dialogs the information is sometimes too big for the screen, we might need to use the expanded class to fix this issue.
Example:
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AlertExample(),
    );
  }
}
class AlertExample extends StatelessWidget {
  void _showAlertDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Important Notice'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Expanded(
                child: SingleChildScrollView(
                  child: ListBody(
                    children: <Widget>[
                      Text('This is a detailed explanation of a situation that requires your attention.'),
                      Text('Here are the details:'),
                      Text('1. Detail one'),
                      Text('2. Detail two'),
                      Text('3. Detail three'),
                      Text('4. Detail four'),
                      Text('5. Detail five'),
                      Text('6. Detail six'),
                      Text('7. Detail seven'),
                      Text('8. Detail eight'),
                      Text('9. Detail nine'),
                      Text('10. Detail ten'),
                      Text('11. Detail eleven'),
                      Text('12. Detail twelve'),
                      // Add more content if needed
                    ],
                  ),
                ),
              ),
            ],
          ),
          actions: <Widget>[
            TextButton(
              child: Text('Option 1'),
              onPressed: () {
                // Handle Option 1
                Navigator.of(context).pop();
              },
            ),
            TextButton(
              child: Text('Option 2'),
              onPressed: () {
                // Handle Option 2
                Navigator.of(context).pop();
              },
            ),
            TextButton(
              child: Text('Close'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Alert Dialog Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showAlertDialog(context),
          child: Text('Show Alert Dialog'),
        ),
      ),
    );
  }
}When the user hits the “Show Alert Dialog” button, the alert dialog will show up with the title, content, and options that were chosen in Flutter Dialogs. The SingleChildScrollView in the Expanded widget makes sure that the user can scroll through the information even if it’s too big for the screen.
Properties of AlertDialog
- Title: It is possible to change the heading or title of the AlertDialog and Flutter Dialogs widget by setting its title value. It is best to keep this title short and to the point so that it is easy for the user to understand. The example’s title is
title: Text(‘Important Notice’),
Content
The main part of the AlertDialog is set by the content property. Here is where you put the main message or point you want to make to the person in Flutter Dialogs. The content in the example is a Column widget that holds an Expanded widget and a SingleChildScrollView to make sure that the content can be scrolled down if it’s too big:
content: Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Expanded(
      child: SingleChildScrollView(
        child: ListBody(
          children: <Widget>[
            Text('This is a detailed explanation of a situation that requires your attention.'),
            Text('Here are the details:'),
            Text('1. Detail one'),
            Text('2. Detail two'),
            // Additional details
          ],
        ),
      ),
    ),
  ],
),Actions
The buttons or actions that the user can do in reaction to the Flutter Dialogs are set by the actions property. Most of the time, these actions are buttons that say “Cancel,” “OK,” or other options that make sense for the goal of the Flutter Dialogs. In this case, the steps are described as
actions: <Widget>[
  TextButton(
    child: Text('Option 1'),
    onPressed: () {
      // Handle Option 1
      Navigator.of(context).pop();
    },
  ),
  TextButton(
    child: Text('Option 2'),
    onPressed: () {
      // Handle Option 2
      Navigator.of(context).pop();
    },
  ),
  TextButton(
    child: Text('Close'),
    onPressed: () {
      Navigator.of(context).pop();
    },
  ),
],Shape
The Flutter Dialogs box’s shape is set by the shape value. This feature lets you change how the text box looks, like making it round, curved, or any other shape. The given example doesn’t have the shape value, but you could add it like this:
AlertDialog(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  title: Text('Important Notice'),
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Expanded(
        child: SingleChildScrollView(
          child: ListBody(
            children: <Widget>[
              Text('This is a detailed explanation of a situation that requires your attention.'),
              Text('Here are the details:'),
              Text('1. Detail one'),
              Text('2. Detail two'),
              // Additional details
            ],
          ),
        ),
      ),
    ],
  ),
  actions: <Widget>[
    TextButton(
      child: Text('Option 1'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
    TextButton(
      child: Text('Option 2'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
    TextButton(
      child: Text('Close'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
  ],
)SimpleDialog
The user can select options via simple dialog. It has the title, which is not required and is shown above the options in Flutter Dialogs. We can also use the padding to show choices. Widgets can bend more when they have padding around them.
Example:
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SimpleDialogExample(),
    );
  }
}
class SimpleDialogExample extends StatelessWidget {
  void _showSimpleDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return SimpleDialog(
          title: Text('Select an Option'),
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: SimpleDialogOption(
                onPressed: () {
                  Navigator.of(context).pop();
                  print('Option 1 selected');
                },
                child: const Text('Option 1'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: SimpleDialogOption(
                onPressed: () {
                  Navigator.of(context).pop();
                  print('Option 2 selected');
                },
                child: const Text('Option 2'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: SimpleDialogOption(
                onPressed: () {
                  Navigator.of(context).pop();
                  print('Option 3 selected');
                },
                child: const Text('Option 3'),
              ),
            ),
          ],
        );
      },
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Dialog Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showSimpleDialog(context),
          child: Text('Show Simple Dialog'),
        ),
      ),
    );
  }
}Properties of simple Dialog
- Title: The heading of the Flutter Dialogs box is shown by the title value of the SimpleDialog widget. It is best to keep the title short and to the point so that the user can easily understand it. The example’s title is:
title: Text(‘Select an Option’),
- Shape: You can change the shape of the Flutter Dialogs box with the shape option. You can change how the dialog looks by doing things like rounding the sides, adding a curve, or making other shapes. The example doesn’t have the shape value, but you could add it like this:
shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(10.0),
),Background Color
Change the Flutter Dialogs box’s background color with the backgroundColor setting. You can use this property to make the dialog look like the rest of your app’s style. This feature isn’t shown in the example, but you could add it like this:
backgroundColor: Colors.white,
TextStyle
Because of the TextStyle property, you can change how the text looks in the window. This covers things like font size, color, weight, and more. TextStyle is used on the Text widgets inside the SimpleDialogOption widgets in this case. This is how you can choose a TextStyle:
Text(
  'Select an Option',
  style: TextStyle(
    fontSize: 18.0,
    fontWeight: FontWeight.bold,
    color: Colors.black,
  ),
),showDialog in Flutter Dialogs
The main thing it did was change the app’s present screen to show the Flutter Dialogs box. You have to call before the pop-up window appears. There is a new image on the screen after the current one ends. We make a front tab to show the background process or use this dialog box to show a tab that will open any kind of dialog box.
Example:
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}
class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }
  void _showSimpleDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return SimpleDialog(
          title: Text('Select an Option'),
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: SimpleDialogOption(
                onPressed: () {
                  Navigator.of(context).pop();
                  print('Option 1 selected');
                },
                child: const Text('Option 1'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: SimpleDialogOption(
                onPressed: () {
                  Navigator.of(context).pop();
                  print('Option 2 selected');
                },
                child: const Text('Option 2'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: SimpleDialogOption(
                onPressed: () {
                  Navigator.of(context).pop();
                  print('Option 3 selected');
                },
                child: const Text('Option 3'),
              ),
            ),
          ],
        );
      },
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tab Dialog Example'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: 'Home'),
            Tab(text: 'Profile'),
            Tab(text: 'Dialog'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Center(child: Text('Home Screen')),
          Center(child: Text('Profile Screen')),
          Center(
            child: ElevatedButton(
              onPressed: () => _showSimpleDialog(context),
              child: Text('Show Simple Dialog'),
            ),
          ),
        ],
      ),
    );
  }
}Properties of showDialog
- Builder: The builder property is a required callback code that gives you the widget tree to show in the dialog. You don’t pass the child widget directly; instead, you give a method that returns the child widget. This means that the dialog can be updated if needed, so it always shows the current state. In this example:
builder: (BuildContext context) {
  return SimpleDialog(
    title: Text('Select an Option'),
    children: [
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: SimpleDialogOption(
          onPressed: () {
            Navigator.of(context).pop();
            print('Option 1 selected');
          },
          child: const Text('Option 1'),
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: SimpleDialogOption(
          onPressed: () {
            Navigator.of(context).pop();
            print('Option 2 selected');
          },
          child: const Text('Option 2'),
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: SimpleDialogOption(
          onPressed: () {
            Navigator.of(context).pop();
            print('Option 3 selected');
          },
          child: const Text('Option 3'),
        ),
      ),
    ],
  );
},BarrierColor
The barrierColor property sets the color of the modal barrier that darkens everything behind the dialog. This creates a focus effect on the Flutter Dialogs by dimming the background. You can customize this color to match your app’s theme.
In the example, if you want to change the barrier color, you would add the barrierColor property:
showDialog(
  context: context,
  barrierColor: Colors.black.withOpacity(0.5), // Darken the background
  builder: (BuildContext context) {
    return SimpleDialog(
      title: Text('Select an Option'),
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: SimpleDialogOption(
            onPressed: () {
              Navigator.of(context).pop();
              print('Option 1 selected');
            },
            child: const Text('Option 1'),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: SimpleDialogOption(
            onPressed: () {
              Navigator.of(context).pop();
              print('Option 2 selected');
            },
            child: const Text('Option 2'),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: SimpleDialogOption(
            onPressed: () {
              Navigator.of(context).pop();
              print('Option 3 selected');
            },
            child: const Text('Option 3'),
          ),
        ),
      ],
    );
  },
);useSafeArea
The useSafeArea property makes sure that the Flutter Dialogs box stays in the safe area of the screen, away from things like the status bar, notch, and menu bar. This is very important for things that have notches or sides that are rounded.
You would add the useSafeArea property to the example to make sure the conversation stays out of the safe area:
showDialog(
  context: context,
  useSafeArea: true, // Ensure the dialog respects the safe area
  builder: (BuildContext context) {
    return SimpleDialog(
      title: Text('Select an Option'),
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: SimpleDialogOption(
            onPressed: () {
              Navigator.of(context).pop();
              print('Option 1 selected');
            },
            child: const Text('Option 1'),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: SimpleDialogOption(
            onPressed: () {
              Navigator.of(context).pop();
              print('Option 2 selected');
            },
            child: const Text('Option 2'),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: SimpleDialogOption(
            onPressed: () {
              Navigator.of(context).pop();
              print('Option 3 selected');
            },
            child: const Text('Option 3'),
          ),
        ),
      ],
    );
  },
);Key Differences of Flutter Dialogs
- AlertDialog
Purpose: Used to show any type of alert notification.
User Interaction: Provides options for users to react to the alert, such as accept or reject buttons.
Use Case: Ideal for critical messages that require immediate user attention and action.
- SimpleDialog
Purpose: Used to show simple options as a Flutter Dialogs box.
User Interaction: Presents multiple options for the user to choose from, allowing different actions based on the selection.
Use Case: Suitable for non-critical choices, like selecting from a list of emails or settings.
- ShowDialog
Purpose: Used to create an option that will pop up a dialog box.
Functionality: Can be used to display various types of dialog boxes, such as AlertDialog and SimpleDialog, as sub-widgets.
Use Case: Acts as a flexible function to invoke different dialog types based on the context.
