CODEWITHSUNDEEP
flutterflutter-layout
user13655419
user13655419

Reputation:

How to attain such UI in Flutter?

I want to have a card like Container on a plain background as shown in the picture.

enter image description here

This is what I have tried using Stack, but I am having trouble positioning it in the right place.

I am new to flutter, sorry to ask such a dumb question.

  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            color: Colors.grey,
          ),
          Positioned(
              child: Container(
            color: Colors.white,
            height: 400,
          ))
        ],
      ),
    );
  }

Upvotes: 0

Views: 48

Answers (1)

user321553125
user321553125

Reputation: 3246

Use Positioned.fill with Align as its child and give alignment as Alignment.bottomCenter. Then, You can decorate the stacked Container for the border radius.

Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: <Widget>[
        Container(
          color: Colors.grey,
        ),
        Positioned.fill(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(30),
                  topLeft: Radius.circular(30),
                ),
                color: Colors.white,
              ),
              height: 400,
            ),
          ),
        )
      ],
    ),
  );
}

Upvotes: 1

Related Questions