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

user_4651328 0
Viewed 4556

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.

enter image description here

dart flutter overlapping layout
2 Answers

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

output_layout

Let me know if it works

user_112305240

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.

user_106091520
Related