Flutter 颤振如何创造像魔法师附设计

对于颤振，我想创建以下设计。顶部居中的标题并不重要

如何创建以下设计，如所附图像

使用堆栈会很好。

试试以下方法：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 25),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('SOME CENTERED TITLE'),
              SizedBox(
                height: 10,
              ),
              Container(
                height: 300,
                padding: EdgeInsets.only(left: 5),
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.black,
                    width: 4,
                  ),
                ),
                child: Column(
                  children: <Widget>[
                    Align(
                      alignment: Alignment.topLeft,
                      child: Container(
                        height: 60,
                        width: 120,
                        color: Colors.black,
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Text('SOME CENTERED TEXT'),
                    SizedBox(
                      height: 20,
                    ),
                    Text('SOME ANOTHER TEXT'),
                  ],
                ),
              ),
              SizedBox(
                height: 50,
              ),
              Row(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      height: 100,
                      color: Colors.red,
                      child: Center(
                        child: Text('Text'),
                      ),
                    ),
                  ),
                  SizedBox(width: 50),
                  Expanded(
                    child: Container(
                      height: 100,
                      color: Colors.red,
                      child: Center(
                        child: Text('Text'),
                      ),
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MyHomePage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：中(
孩子：填充(
填充：常量边集。对称（水平：25），
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
文本（“某些居中标题”），
大小盒子(
身高：10，
),
容器(
身高：300，
填充：仅限边缘设置（左：5），
宽度：MediaQuery.of（context）.size.width，
装饰：盒子装饰(
边界：边界(
颜色：颜色，黑色，
宽度：4，
),
),
子：列(
儿童：[
对齐(
对齐：alignment.topLeft，
子：容器(
身高：60，
宽度：120，
颜色：颜色，黑色，
),
),
大小盒子(
身高：20，
),
文本（“某些居中文本”），
大小盒子(
身高：20，
),
文本（“另一些文本”），
],
),
),
大小盒子(
身高：50，
),
划船(
儿童：[
扩大(
子：容器(
身高：100，
颜色：颜色，红色，
儿童：中心(
子项：Text（“Text”），
),
),
),
尺寸箱（宽度：50），
扩大(
子：容器(
身高：100，
颜色：颜色，红色，
儿童：中心(
子项：Text（“Text”），
),
),
)
],
),
],
),
),
),
);
}
}

输出：

---

添加您尝试的内容。