一个颤振项目的结构

Question

如何构建像这样的颤振项目： Example restaurant pos image

你觉得这个树结构的开头正确吗：

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

您可能希望将该 MaterialApp 放入单独的父小部件中（我认为在同一 MediaQuery 方法中使用 Theme 和 build 时会导致问题）。将每个部分（菜单、正文、ListProducts）提取到单独的小部件中也可能更简洁。

另外，我建议您看看 LayoutBuilder 小部件， 以及 this page 上的资源（如果该应用旨在在较窄的屏幕上运行）。

哦，如果您不了解状态管理，那么绝对check this out。