Structure of a flutter project

Question

How to structure a flutter project like this one: Example restaurant pos image

Do you find this beginning of the tree structure correct:

class HomePageState extends State<HomePage>{
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
              debugShowCheckedModeBanner: false,
              home: Scaffold(
                body: Row(
                  children: [
                    Container( // menu
                      width:60,
                      color: Colors.white,
                    ),
                    Expanded( // body
                      child: Container(
                      color: Colors.red,
                      ),
                    ),
                    Container( // ListProducts
                      width:300,
                      color: Colors.green,
                    ),

                  ],
                ),
                backgroundColor: Color.fromARGB(255 , 244 , 246, 250),
              )

          );
        }
    }

code preview

Answer 1

You might want to place that MaterialApp into a separate parent widget (I think it will cause issues when using MediaQuery and Theme inside the same build method). It also might be cleaner down the line to extract every part (menu, body, ListProducts) into separate widgets.

Also, I would advise you to take a look at the LayoutBuilder widget, and the ressources on this page if the app is meant to work on narrower screens.

Oh and if you don't know about state management, definitely check this out .