Best practice for Flutter widget hierarchy

Question

From reading https://api.flutter.dev/flutter/material/Scaffold-class.html and various examples online, I get the impression that the "best practice" layout hierarchy for Flutter is as follows:

MaterialApp
⮡ Scaffold
  ⮡ AnnotatedRegion (optional)
    ⮡ SafeArea (optional)

My question:

Considering performance (if any) and best practice, where should I put eg FutureBuilder , OrientationBuilder and MobX's Observer if they happen to be global wrappers?

Answer 1

I usually put my global wrappers between MaterialApp and Scaffold, reason being that MaterialApp is your router, and if the app has authentication, I put that stream in front of global wrappers. So I find best practice to look like this:

MaterialApp (Theme and Route)
⮡ Router (Optional - something like Fluro Router)
  ⮡  AuthStream (Using StreamProvider - Checks whether user is logged in or not, if not returns to Login)
    ⮡ Wrapper (Holds my Future Builders)
      ⮡  Scaffold

Fluro Router

StreamProvider