CODEWITHSUNDEEP
flutterdartlayoutoverlapping
Pablo Neutrino Insaurralde
Pablo Neutrino Insaurralde

Reputation: 45

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

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

Upvotes: 4

Views: 8561

Answers (2)

Shanto
Shanto

Reputation: 619

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

Upvotes: 4

JonnyH
JonnyH

Reputation: 368

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.

Upvotes: 1

Related Questions