Flutter — Share One Layout in Multiple Screens

Bewar Salah
1 min readSep 26, 2022

--

Sharing a styled scaffold in all pages

Introduction

Sharing a layout across all screens is not a big deal. If you have a simple nice screen like bellow (It is just a Scaffold with some styling to its AppBar widget), in a few simple steps you can share it in all screens of your flutter app.

How to Do It

We create an extra Stateless Widget in our application. We render Scaffold and add some styling to the Scaffold’s AppBar.

Steps for building a layout for all screens.

1- Create a file named main_layout.dart.

main_layout.dart

2- In any screen you want to appear, make this Widget the most parent widget.

post_screen.dart

Conclusion

In most of the cases, you are using using the same style for all the screens. So there is no need to re-write the same styling in all the screens. A couple of shared layouts can do the stuff, and share the same code in multiple places.

--

--