如何在Flutter中创建具有2种不同颜色的布局背景？

Question

我正在尝试按照Flutter中的图像进行布局，但是我不知道如何创建具有两种颜色和重叠按钮的背景。我不知道是否有一个小部件可以执行此操作或需要一些代码...任何建议或帮助都会很棒！ （这是我有史以来的第一篇文章，对不起，如果有问题！）谢谢。

Answer 1

执行类似的操作。

body: Stack(
    children: <Widget>[
      Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width,
            height: 300,
            color: Colors.grey,
          ),
        ],
      ),
      Positioned(
        top: 280,
        left: 50,
        right: 50,
        child: RaisedButton(
          color: Colors.white,
          child: Text("Your Button"),
          onPressed: () {},
        ),
      )
    ],
  ),

您会得到

让我知道是否可行

Answer 2

一种可能的方法是使用堆栈。将背景色设置为灰色（我认为是色盲），将白色添加为位于底部的图像。最后添加您的按钮，再次将其放置在底部。

通过仔细检查您的图像，现在我发现我认为底部的图像实际上只是一种颜色。您只需要两个Container和一个Stack中的按钮。第一个容器应填满整个空间，第二个容器应具有高度设置（此处可响应多种设备尺寸），最后添加RaisedButton。