SimpleDialog Widget – Flutter Widget Guide By Flutter Agency

· 4 min read
SimpleDialog Widget - Flutter Widget Guide By Flutter Agency
SimpleDialog Widget - Flutter Widget Guide By Flutter Agency

Earlier we have learned about AlertDialog Widget so now in this article we will learn about Simple Dialog Widget.

What is SimpleDialog Widget?

SimpleDialog Widget generally can provide users with several options using multiple SimpleDialogOption.

SimpleDialog Widget displays a list of items that take immediate effect when selected. Users can select between several available options.

Constructor for it will have Code Snippet like below :

SimpleDialog({
  Key key,
  this.title,
  this.titlePadding = const EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 0.0),
  this.children,
  this.contentPadding = const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 14.0),
  this.backgroundColor,
  this.elevation,
  this.semanticLabel,
  this.shape,
});

Example :

SimpleDialog(
              title: Text("Do you like flutter?"),
              children: [
                Text("Yes"),
              ],
            ),

The titlePadding and contentPadding arguments must not be null.

Properties:

  • title: User can display the title to a dialog using this parameter. Code Snippet will look like below :
SimpleDialog(
          title: new Text('Do you like Flutter?'),
          children: <Widget>[
          ]
)
  • backgroundColor:backgroundColor used to set the background color of the background. Code Snippet will look like below :
backgroundColor: Colors.redAccent,
  • elevation: Users can make use of elevation to show Shadow to Container. The bigger the value, the bigger the shadow distance.
  • Shape: Shape is used to apply the Shape to the Container. Code Snippet will look like below :
shape: StadiumBorder(
            side: BorderSide(
              style: BorderStyle.none,
            ),
          ),

Available options are represented as an enum. Code Snippet to show enum will look like below :

enum Answers { YES, NO, MAYBE }

User can display Simple dialogs using Code Snippet as below :

The showDialog method here returns a Future that completes the value of that enum. If the user cancels the dialog e.g. by hitting the back button on Android or tapping on the mask behind the dialog then the future completes with the null value

Now create an _askUser function like below

  Future _askUser() async {
    switch (await showDialog(
        context: context,
        child: new SimpleDialog(
          title: new Text('Do you like Flutter?'),
          shape: StadiumBorder(
            side: BorderSide(
              style: BorderStyle.none,
            ),
          ),

          backgroundColor: Colors.orangeAccent,
          elevation: 4,
          children: <Widget>[
            new SimpleDialogOption(
              child: new Text('Yes!!!'),
              onPressed: () {
                Navigator.pop(context, Answers.YES);
              },
            ),
            new SimpleDialogOption(
              child: new Text('NO :('),
              onPressed: () {
                Navigator.pop(context, Answers.NO);
              },
            ),
            new SimpleDialogOption(
              child: new Text('Maybe :|'),
              onPressed: () {
                Navigator.pop(context, Answers.MAYBE);
              },
            ),
          ],
        ))) {
      case Answers.YES:
        _setValue('Yes');
        break;
      case Answers.NO:
        _setValue('No');
        break;
      case Answers.MAYBE:
        _setValue('Maybe');
        break;
    }
  }

Now in a build() method implement like below. Code Snippet will look like below :

 return Scaffold(
      body: Container(
        padding: EdgeInsets.all(32.0),
        child: Center(
          child: Column(
            children: <Widget>[
              Text(_value),
              RaisedButton(
                onPressed: _askUser,
                child: Text('Simple Dialog'),
              )
            ],
          ),
        ),
      ),
    );

Above Code will give us output like below :

SimpleDialogScreen

Simple Dialog Widget

Thanks for reading.

Do let us know if you still need assistance with Flutter Development?

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply