
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 thePostOffice
, as long as lies below thePostOffice
widget in the widget tree. There is no dependency on theScaffold
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
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(),
),
);
}
}
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()));
},
),
),
),
);
}
}
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);
},
)
],
),
),
),
);
}
}
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)
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());
}
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);
},
)
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