How to create layout background with 2 different colors in Flutter?

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