如何在 Flutter 中使用 2 个不同的 colors 创建布局背景？

Question

I am trying to make a layout as seen in the image in Flutter, but I don't get how to create a background with two colors and an overlapping button. I don't know if there is a widget able to do this or need some code... Any suggest or help will be great, (this was my very first post ever. sorry if there is something wrong about it!!) Thanks.

Answer 1

Do something like this.

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: () {},
        ),
      )
    ],
  ),

you will get

Let me know if it works

Answer 2

One possible approach is to use a Stack. Set the background color to your grey (i think, color blind), add the white piece as an image positioned at the bottom. Lastly add your button, again positioned at the bottom.

On closer inspection of your image, I now see that what I thought was an image at the bottom was actuall just a color. All you need are two Container s and a button in a Stack. The first Container should fill the whole space, the second Container should have a height setting (be responsive here for multiple device sizes) and lastly add your RaisedButton.