7

I have a PageView in my app homepage and I want:

  1. The AppBar changes according to the page
  2. The BottomAppBar is fixed

The 2 solutions I imagined are:

  1. The hard one: have one Scaffold with appBar, body and bottomNavigationBar; use the PageView's PageController to animate the AppBar content.
  2. Have 2 nested Scaffold: the main one with body and bottomNavigationBar, and a second one in each PageView's page, with the AppBar.

So, I was wondering, it works, but is it "correct" syntactically to have nested Scaffolds?

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
Galactose
  • 175
  • 3
  • 8

2 Answers2

14

Go here: https://api.flutter.dev/flutter/material/Scaffold-class.html

There is a section named Troubleshooting and inside it, you will find this:

Nested Scaffolds

The Scaffold was designed to be the single top level container for a MaterialApp and it's typically not necessary to nest scaffolds. For example in a tabbed UI, where the bottomNavigationBar is a TabBar and the body is a TabBarView, you might be tempted to make each tab bar view a scaffold with a differently titled AppBar. It would be better to add a listener to the TabController that updates the AppBar.

Akshar Patel
  • 8,998
  • 6
  • 35
  • 50
  • Thanks for your help, I did not see these guidelines. I choosed to keep one single Scaffold with body and bottom, and the body defines the AppBar in a Column. This option is much easier than animating the AppBar to follow the PageController... – Galactose Nov 01 '20 at 12:45
1

I think so. Scaffold is just like any other widget imo. It's just so convenient as it provides you with an app bar, body, etc. I usually put it as a child of SafeArea widget so that the app takes into account the notches on the modern smartphones.

Daniel
  • 21
  • 2