AlertDialog widget in Flutter:An AlertDialog widget displays a popup on top of the content.

You can use it to notify user about an information or warning and allow the user to take an action. you will use it to get input from user, like letting user choose from options, or providing text input.

Single Choice Dialog:

The given code defines two classes, SingleChoiceDialog and SingleChoiceDialogState.

SingleChoiceDialog is a stateful widget that creates an instance of SingleChoiceDialogState.

SingleChoiceDialogState extends the State class and it’s responsible for building the UI of the single choice dialog.

The class maintains a state variable selectedRingtone which holds the current selected ringtone. Another list ringtone holds the available options to choose from.

The build method of the SingleChoiceDialogState class returns a SimpleDialog widget. The dialog has a title  and a list of options represented by RadioListTile widgets. The RadioListTile widgets is creates by mapping the elements in the ringtone list and creating a RadioListTile for each of the elements.

The RadioListTile widget is to display a single choice item in a list, it has a titleproperty that displays the ringtone name. The groupValue property is set to the current selected ringtone and the selected property indicates whether this ringtone is currently selected or not. The onChanged property is a callback that is called when the radio button is selected, it sets the selectedRingtone .

This code will create a single choice dialog that allows the user to choose a ringtone from the available options. The current selected ringtone will be displays in the dialog.

..onTap: () {
                  showDialog(context: context,builder: (_) => const SingleChoiceDialog() );
                },

This code shows a dialog when a widget is taps. The dialog to be display the SingleChoiceDialog widget, which pass as a constant to the showDialog method. 

The showDialog method takes the context and the builder parameter, which returns the SingleChoiceDialog widget. 

The context parameter provides the context of the widget that is tap, and the builder parameter is a function that returns the widget to be displays in the dialog.

class SingleChoiceDialog extends StatefulWidget {

  const SingleChoiceDialog({Key? key}) : super(key: key);

  @override
  SingleChoiceDialogState createState() => SingleChoiceDialogState();
}
class SingleChoiceDialogState extends State<SingleChoiceDialog>{

  String? selectedRingtone = "None";
  List<String> ringtone = [
    "None", "Classic rock", "Monophonic", "Luna"
  ];

  @override
  Widget build(BuildContext context){
    final textTheme = Theme.of(context)
        .textTheme
        .apply(displayColor: Theme.of(context).colorScheme.onSurface);

    return SimpleDialog(
      //title: Text('Phone Ringtone',style : textTheme.titleMedium!.copyWith(color: MyColors.black, fontWeight: FontWeight.bold)),
      title: Text('Phone Ringtone',style : textTheme.titleMedium!),
      children: ringtone.map((r) => RadioListTile(
        title:  Text( r ,style : textTheme.titleSmall!),
        groupValue: selectedRingtone,
        selected: r == selectedRingtone,
        value: r,
        onChanged: (dynamic val) {
          setState(() {
            selectedRingtone = val;
              // Navigator.of(context).pop();
          });
        },
      )).toList(),
    );
  }
}

Multiple choice dialog:

This is a Flutter code for a multi-choice dialog widget. The widget extends from StatefulWidget and implements MultiChoiceDialogState class to define the state of the dialog.

MultiChoiceDialog is a member variable colors which is a list of strings representing the color options to be displays in the dialog. Another member variable status is a list of booleans indicating the selected status of each color option.

The build method of the MultiChoiceDialogState class creates the dialog’s visual structure and appearance. It sets the title of the dialog to “Your prefers color”. The content of the dialog is a wrap widget containing an inkwell widget for each color option. The inkwell widget consists of a row widget with a checkbox and the color name.

The getValue method retrieves the status of a color option. The toggleValue method changes the status of a color option. The onPressed event of the “OK” button closes the dialog. The onPressed event of the “Cancel” button also closes the dialog.

The dialog shows by calling showDialog and passing in the context and the MultiChoiceDialog widget as the builder argument.

AlertDialog widget in Flutter:

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class MultiChoiceDialog extends StatefulWidget {
  const MultiChoiceDialog({Key? key}) : super(key: key);

  @override
  MultiChoiceDialogState createState() => MultiChoiceDialogState();
}

class MultiChoiceDialogState extends State<MultiChoiceDialog> {
  List<String> colors = ["Red", "Green", "Blue", "Purple", "Orange"];

  List<bool> status = [true, false, false, false, false, false];

  bool getValue(String val) {
    int index = colors.indexOf(val);
    if (index == -1) return false;
    return status[index];
  }

  void toggleValue(String name) {
    int index = colors.indexOf(name);
    if (index == -1) return;
    status[index] = !status[index];
  }

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context)
        .textTheme
        .apply(displayColor: Theme.of(context).colorScheme.onSurface);

    return AlertDialog(
      title: Text('Your preferred color', style: textTheme.titleLarge!),
      contentPadding: const EdgeInsets.fromLTRB(15, 15, 15, 0),
      content: Wrap(
        direction: Axis.vertical,
        children: colors
            .map((c) => InkWell(
                  child: Row(
                    children: <Widget>[
                      Checkbox(
                          value: getValue(c),
                          onChanged: (value) {
                            setState(() {
                              toggleValue(c);
                            });
                          }),
                      Text(
                        c,
                        style: textTheme.titleSmall!,
                      ),
                    ],
                  ),
                  onTap: () {
                    setState(() {
                      toggleValue(c);
                    });
                  },
                ))
            .toList(),
      ),
      actions: <Widget>[
        TextButton(
          child: Text('Cancel', style: textTheme.labelLarge!),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        TextButton(
          //child:  TextStyleExample(name : 'OK',style : textTheme.labelLarge!.copyWith(color: MyColors.accentDark)),
          child: Text('OK', style: textTheme.labelLarge!),
          onPressed: () {
            Navigator.of(context).pop();
          },
        )
      ],
    );
  }
}

For more: To know about Custom Tabbar in Flutter