Tutorial: Simple Info Messages with PostOffice

Displaying info messages in Flutter is usually done by showing a Snackbar. Unfortunately, to display a Snackbar, it is necessary to have access to the BuildContext of the Scaffold the Snackbar is going to be displayed in.

One example for when the usage of a Snackbar is cumber some is the following: Imagine you have an app with a login and a registration screen. You can navigate from login to registration to create a new account. Once the registration is complete you typically want to navigate back to the login page. Also you want to display a message that the registration was successful.

The login page should not care about the registration process. So how to display the success message?

To solve this issue, I decided to implement the PostOffice package. It basically consists of two important widgets:

• PostOffice: This widget is responsible for receiving and distributing the info messages.
• PostBox: This widget receives the messages from the PostOffice, as long as lies below the PostOffice widget in the widget tree. There is no dependency on the Scaffold widget.

Let’s implement the example I mentioned above and look how PostOffice can solve this problem. The complete example is also available on Github.

Example: Login and Register Flow with Info Messages

First of all we need add PostOffice as our dependency in pubspec.yaml.

dependencies:
  post_office: ^0.1.0
Code language: YAML (yaml)

The example will consist of three classes: PostOfficeApp, LoginPage and RegisterPage. For the sake of simplicity in the example all three classes are implemented in the main.dart file. Anyway, feel free to create a separate file for each class.

PostOfficeApp

class PostOfficeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PostOffice(
      child: MaterialApp(
        home: LoginPage(),
      ),
    );
  }
}
Code language: Dart (dart)

What is important here, is that we wrap our MaterialApp widget in a PostOffice widget. This way, the PostOffice widget is available throughout the widget tree by implementing an InheritedWidget behind the scenes.

LoginPage

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Login"),
      ),
      body: PostBox(
        child: Center(
          child: RaisedButton(
            child: Text("Start registration"),
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => RegisterPage()));
            },
          ),
        ),
      ),
    );
  }
}
Code language: Dart (dart)

Here we have a closer look at line 8. Altogether, we are building a rather classic Scaffold here. But by wrapping the body content in a PostBox widget, we setup the LoginPage to display any message that is sent to our PostOffice widget. We will see how this works on the RegisterPage.

RegisterPage

class RegisterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Registration"),
      ),
      body: PostBox(
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              RaisedButton(
                child: Text("Invalid Registration"),
                onPressed: () => PostOffice.of(context)
                    .send("Invalid Registration", type: MessageType.error),
              ),
              RaisedButton(
                child: Text("Valid Registration"),
                onPressed: () {
                  Navigator.pop(context);
                  PostOffice.of(context)
                      .send("Valid Registration", type: MessageType.success);
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}
Code language: Dart (dart)

Like on the RegisterPage, we wrap our body content in a PostBox widget. This is necessary to show an error message on this page, if the registration was unsucessful.

To simulate successful and unsuccessful registration, we add two buttons: one for a valid and one for an invalid registration.

When clicking on the”invalid registration” button, following line is called:

PostOffice.of(context).send("Invalid Registration", type: MessageType.error)
Code language: Dart (dart)

This displays the message “Invalid Registration” with the Type error to all PostBox widgets available. In this case the PostBox widget on the RegistrationPage will display this message.

When the “valid registration” button is pressed, we pop our RegisterPage from the navigation stack and send the message “Valid Registration” of type success to the PostOffice.

Since we have popped the RegisterPage, the LoginPage is now displayed on the screen. Now the LoginPage‘s PostBox widget receives the Message and tells the user that the registration has been successful.

To run the example, don’t forget to add a main function to your main.dart file:

void main() {
  runApp(PostOfficeApp());
}
Code language: JavaScript (javascript)

The PostBoxBuilder class

To allow you to customize how the message is displayed in your app the PostBox package also offers a PostBoxBuilder widget. This is a simple builder widget that – additionally to the BuildContext – provides you with a Message that you can display as you wish.

PostBoxBuilder(
  builder: (context, message){
    return Text(message.text);
  },
)
Code language: Dart (dart)

Conclusion

Using a Snackbar to display an info message is not always easy to integrate in your app flow. With the PostOffice package it is really simple to post info messages and display them anywhere in the app, independent from the Scaffold‘s context.

Feedback

The PostBox package is the first I have published to https://pub.dev/. Thus, I would really appreciate your kind feedback. In case you have any questions feel free to post them in the comments below.

For bug reports and feature requests please use the issue tracker at the package’s Github issue tracker.

Other Flutter Tutorials

• 
  Tutorial: Simple Info Messages with PostOffice
• 
  Tutorial: Super Simple Hero Animation in Flutter
• 
  Tutorial: Simple Responsive Master-Detail View in Flutter