Is it bad to have MaterialApp's home be a MaterialApp?-CodePudding

I'm working on a multi-page application, and currently have this:

void main() {
  runApp(const MaterialApp(
      title: "App", debugShowCheckedModeBanner: false, home: HomePage()));
}

And over in HomePage, I return a Material App

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(); //My home page
  }
}

I looked online for if the home property of a MaterialApp should return another MaterialApp, as HomePage currently does, or if it should return a Scaffold, and I couldn't really find anything. I would think that a Scaffold makes a bit more sense, since that's what I would typically do in a single-page app, but the only thing that gives me pause is that in terms of syntax, making a new "MaterialApp" for each page and changing which is displayed sounds pretty nice-but I could very well be wrong.

Thanks!

CodePudding user response：

A material app is used to define theme, route etc. So for the whole app it is good to have just one material app. Define all themes etc in it and have all other classes return a scaffold that way you have better control over the app..

More about material app https://api.flutter.dev/flutter/material/MaterialApp-class.html

More about scaffold

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

CodePudding user response：

First of all, I don't recommend you to have two MaterialApp widgets, since you set properties in the first MaterialApp, meaning that the BuildContext of Flutter will not get those properties since there is a second MaterialApp widget lower in the widget tree.

What I would recommend you, is to directly pass your HomePage widget in the runApp function. That will allow you more clarity and visibility of your widgets:

void main() {
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "App", debugShowCheckedModeBanner: false, home: HomePage())
  }
}

Then, in HomePage and all other pages that are views, you can return a Scaffold.