Blog

Top Flutter Choice and Confirmation Dialog Tutorial and Libraries

We want to explore some of the top flutter packages that you can use to create dialogs. Be it list dialogs, color dialogs or just simple alert dialogs.

What is a Dialog

Techopedia defines a dialog box or a dialog as a user interface element, a type of window that is used to enable communication and interaction between a user and a software program. That interaction can of course be inputing data whereby we use input dialogs, or just presentation of data either via simple textfields or via lists.

Dialogs are important in the following ways:

1. They allow us to present data to users on demand without leaving the current screen. All we do is overlay the dialog on top of the current screen.
2. Dialogs can provide us an easy way to input data without opening a new page. This is especially important when for you want to edit list items. You can simply display a dialog when the list is clicked with text property of that list item being shown in a textfield within a dialog.
3. ColorDialogs allow user to easily pick colors.
4. Dialogs can allow user present an item out of a number of items. These are always called choice dialogs.

Flutter Confirmation Dialog Example.

Let's start by looking at a confirmation dialog. This an open source example and is written by @payen83 and will serve as worthy introduction to a confirmation dialog before we look at some libraries. Three options(yes, no and maybe) are defined in a dart enum and are what the user will choose from.

import 'package:flutter/material.dart';
void main(){ runApp(new MaterialApp(
  home: new MyApp(),
));
}
enum MyDialogueAction{
  yes,
  no,
  maybe
}
class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => new MyAppState();
}
class MyAppState extends State<MyApp> {
  String _text = '';
  void _onChange(String value) {
    setState((){
      _text = value;
    });
  }
  void _dialogueResult(MyDialogueAction value){
    print('you selected $value');
    Navigator.pop(context);
  }
 void _showAlert(String value){
  showDialog(
    context: context,
    builder: (_) => new AlertDialog(
      title: new Text('Alert!'),
      content: new Text(value,
      style: new TextStyle(fontSize: 30.0),),
      actions: <Widget>[
        new FlatButton(onPressed: () {_dialogueResult(MyDialogueAction.yes);}, child: new Text('yes')),
        new FlatButton(onPressed: () {_dialogueResult(MyDialogueAction.no);}, child: new Text('no')),
      ],
    )
  );
}
  @override
  Widget build (BuildContext context){
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Alert Demo'),
      ),body: new Container(
        child: new Column(
          children: <Widget>[
            new TextField(onChanged: (String value){ _onChange(value);},),
            new RaisedButton(
              onPressed: (){_showAlert(_text);},
              child: new Text('Press me'),
            )
          ],
        ),
      ),
    );
  }
}

Let's look at maybe one or two third party libraries listing.

(a). Easy Dialogs

I would have probably called this library Easy Choice Dialogs. However Easy Dialogs as a name is still informative. These dialogs are easy to use. We use them to make choices.

Easy Dialogs come in three flavors:

1. SingleChoiceDialog

This dialog allows us make a choice but without confirmation.

SingleChoiceConfirmationDialog<String>(
            title: Text('Phone ringtone'),
            initialValue: _ringTone,
            items: _ringTones,
            onSelected: _onSelected,
            onSubmitted: _onSubmitted)

1. SingleChoiceConfirmationDialog

The dialog allows us to make choice but also provides of confirmation prompt.

SingleChoiceConfirmationDialog<Color>(
            title: Text('Color'),
            initialValue: _color,
            items: _colors,
            contentPadding: EdgeInsets.symmetric(vertical: 16.0),
            divider: Container(
              height: 1.0,
              color: Colors.blue,
            ),
            onSubmitted: (Color color) {
              setState(() => _color = color);
            },
            itemBuilder: (Color color) =>
                Container(height: 100.0, color: color))

Installation

In pubspec.yaml add the following dependency:

dependencies:
  easy_dialogs: ^1.0.0

Then you run flutter packages get to download it.

Download

No.	Location	Link
1.	GitHub	Download
2.	GitHub	Browse