Flutter. Difference between Dialog vs RawDialogRoute vs DialogRoute vs PopupRoute vs ModalRoute?

Question

I can't understand the difference between all those classes. I found several examples and all they use different classes with no visual difference in result. For example custom route can extends PopupRoute or ModalRoute without any additional changes, because of inheritance of course. If anybody can explain the difference between all those classes and when use one over another I will be happy)! Thanks for your attention!

Solution

Dailog class

This dialog widget does not have any opinion about the contents of the dialog. Rather than using this widget directly, consider using AlertDialog or SimpleDialog, which implement specific kinds of material design dialogs.

Types of dialogs in a flutter

1. AlertDialog
2. SimpleDialog
3. showDialog

Example:

AlertDialog(
            title: Text('Message!'), // To display the title it is optional
            content: Text('Hello World!!'), // Message which will be pop up on the screen
            // Action widget which will provide the user to acknowledge the choice
                actions: [
                FlatButton(      // FlatButton widget is used to make a text to work like a button
                textColor: Colors.black,
                onPressed: () {},    // function used to perform after pressing the button
                child: Text('CANCEL'),
                ),
                FlatButton(
                textColor: Colors.black,
                onPressed: () {},
                child: Text('ACCEPT'),
                ),
            ],
            ),

RawDialogRoute class

A general dialog route which allows for customization of the dialog popup.

It is used internally by showGeneralDialog or can be directly pushed onto the Navigator stack to enable state restoration.

This function takes a pageBuilder, which typically builds a dialog. Content below the dialog is dimmed with a ModalBarrier. The widget returned by the builder does not share a context with the location that showDialog is originally called from. Use a StatefulBuilder or a custom StatefulWidget if the dialog needs to update dynamically.

The barrierDismissible argument is used to indicate whether tapping on the barrier will dismiss the dialog. It is true by default and cannot be null.

The barrierColor argument is used to specify the color of the modal barrier that darkens everything below the dialog. If null, the default color Colors.black54 is used.

The settings argument define the settings for this route.

DialogRoute class

A dialog route with Material entrance and exit animations, modal barrier color, and modal barrier behavior (dialog is dismissible with a tap on the barrier).

It is used internally by showDialog or can be directly pushed onto the Navigator stack to enable state restoration.

This function takes a builder which typically builds a Dialog widget. Content below the dialog is dimmed with a ModalBarrier. The widget returned by the builder does not share a context with the location that showDialog is originally called from. Use a StatefulBuilder or a custom StatefulWidget if the dialog needs to update dynamically.

The context argument is used to look up MaterialLocalizations.modalBarrierDismissLabel, which provides the modal with a localized accessibility label that will be used for the modal's barrier. However, a custom barrierLabel can be passed in as well.

The barrierDismissible argument is used to indicate whether tapping on the barrier will dismiss the dialog. It is true by default and cannot be null.

The barrierColor argument is used to specify the color of the modal barrier that darkens everything below the dialog. If null, the default color Colors.black54 is used.

The useSafeArea argument is used to indicate if the dialog should only display in 'safe' areas of the screen not used by the operating system. It is true by default, which means the dialog will not overlap operating system areas. If it is set to false the dialog will only be constrained by the screen size. It can not be null.

The settings argument define the settings for this route.

PopupRoute class

A modal route that overlays a widget over the current route.

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

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

class _MyAppState extends State<MyApp> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    content: Stack(
                      overflow: Overflow.visible,
                      children: <Widget>[
                        Positioned(
                          right: -40.0,
                          top: -40.0,
                          child: InkResponse(
                            onTap: () {
                              Navigator.of(context).pop();
                            },
                            child: CircleAvatar(
                              child: Icon(Icons.close),
                              backgroundColor: Colors.red,
                            ),
                          ),
                        ),
                        Form(
                          key: _formKey,
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              Padding(
                                padding: EdgeInsets.all(8.0),
                                child: TextFormField(),
                              ),
                              Padding(
                                padding: EdgeInsets.all(8.0),
                                child: TextFormField(),
                              ),
                              Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: RaisedButton(
                                  child: Text("Submitß"),
                                  onPressed: () {
                                    if (_formKey.currentState.validate()) {
                                      _formKey.currentState.save();
                                    }
                                  },
                                ),
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  );
                });
          },
          child: Text("Open Popup"),
        ),
      ),
    );
  }
}

ModalRoute

A route that blocks interaction with previous routes.

MaterialApp(
  title: "Routing Demonstration",
  onGenerateRoute: _generateRoute
  routes: {
    '/': (context) => RoutingHomePage(),
    MySecondScreen.routeName: (context) => MySecondScreen(),
  }
),
...

Route _generateRoute( RouteSettings settings ) {
  switch (settings.name) {
    case MyPopupScreen.routeName:
      return MyPopupRoute();
      break;
  }
  return null;
}

...
// In some other method use the named route
  Navigator.pushNamed( context, MyPopupRoute.routeName );

class MyPopupRoute extends PopupRoute {
  static const String routeName = "/mypopup";

  Widget buildPage ( BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation ) {
        return Placeholder();
    }
 }

Hope that explains...

Comments

[Parafin]

thanks for the answer. I read the docs but cant figure out whic use and when. For example Popup "A modal route that overlays a widget over the current route." but as I understand the ModalRoute does the same.. and I saw example whic uses one and another with same result, so the question is why these two. Also DialogRoute and RawDialogRoute - docs have a lot of word but unclear the cocncrete differens and usecases for me.. Anyway thanks for your help!

[GOKU]

PopupRoute class A modal route that overlays a widget over the current route. ModalRoute A route that blocks interaction with previous routes. means for example when you press back button in your android phone (device button not app button) it is possible in PopupRoute but not in ModalRoute.

[GOKU]

RawDialogRoute: A general dialog route which allows for customization of the dialog popup. DialogRoute: A dialog route with Material entrance and exit animations, modal barrier color, and modal barrier behavior. RawDailogRoute is generally used everywhere but DailogRoute is use when you are fetching some data online during which animation is displayed (like circle revolving commonly seen in apps).

[GOKU]

Just an advice.. When you want to understand a concept try to relate it to the real app that you are using in your daily life. It helps..

[Parafin]

Thanks GOKU !! Now it is much more clear for me! The problem is that Im new not only to Flutter and Dart but actually in Mobile and Programming in general and docs ane not clear for me as for example I cant fully understand the sense if "routes" "modal" etc. But with your new example explanation it seems I get the direction Thaanks a lot!