Flutter Web App：类似 Twitter feed 的布局

Question

我是 Flutter 的新手，我正在开发一个网络应用程序（不是 phone 应用程序）。我正在尝试在计算机上创建类似于 Twitter 的布局（不是 phone）。它甚至类似于 Whosebug 本身。您有三列：

第 1 列：左侧有一些基本菜单项

第 2 列：居中且更宽，带有滚动提要

第 3 列：右侧的框中有 features/other 个有用的项目。

在 flutter 中，我见过使用侧边菜单的布局，但它们一直在左侧。他们不坚持中间一列。

我附上了一般骨架的图像。对于我什至从哪里开始，我很乐意提供任何帮助。我看过 SafeArea、Container 等。但由于这是基本布局，我不确定最佳做法是什么，我希望它是一个好的开始。即使我能被指出正确的方向，比如从这个小部件开始等等。我将不胜感激。

Answer 1

我会鼓励计算宽度并根据它更改视口 like I used to

 Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepOrange, // for  screen background
      body: Center(
        child: LayoutBuilder(
          builder: (context, constraints) {
            final maxWidth = constraints.maxWidth;

            return SizedBox(
              width: maxWidth * .8, //max viewPort
              child: Row(
                children: [
                  Container(
                    width: maxWidth * .2, //left part
                    color: Colors.blue,
                    child: Column(
                      crossAxisAlignment:
                          CrossAxisAlignment.start, // for alignment
                      children: [
                        ...List.generate(
                          8,
                          (index) => SizedBox(
                            height: 40,
                            child: Text("menu item $index "),
                          ),
                        )
                      ],
                    ),
                  ),
                  Expanded(
                    child: Container(
                        color: Colors.pinkAccent,
                        child: CustomScrollView(
                          slivers: [
                            SliverList(
                              // prefer builder
                              delegate: SliverChildListDelegate(
                                [
                                  ...List.generate(
                                    44,
                                    (index) => SizedBox(
                                      height: 100,
                                      child: Text("Body Element $index "),
                                    ),
                                  )
                                ],
                              ),
                            )
                          ],
                        )),
                  ),
                  Container(
                    width: maxWidth * .2, //right part features
                    color: Colors.deepPurple,
                    child: Column(
                      children: [
                        ...List.generate(
                          4,
                          (index) => SizedBox(
                            height: 40,
                            child: Text("features item $index "),
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }