Flutter Question posted in
The official Flutter documentation can be found here.

How Do I Achieve This Interface In Flutter

I am trying to have a small section of the body of the App use a background colour having the same colour with the Appbar so that it looks like the UI on the attached image.

enter image description here

Tags:

2

Answers


  1. 0

    You can achieve with Stack widget, you need Container, and wrap Container with Positioned widget to position your container

    Login or Signup to reply.
  2. 0

    You can use Stack like this:

              Stack(
            children: [
              Positioned(
                top: 0,
                right: 0,
                left: 0,
                child: Container(
                  color: Colors.red,
                  height: 200,
                ),
              ),
              Positioned(
                top: 100,
                right: 20,
                left: 20,
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        color: const Color(0xFF000000).withOpacity(0.11),
                        spreadRadius: 0,
                        blurRadius: 16,
                        offset: const Offset(0, 2),
                      )
                    ],
                  ),
                  padding: EdgeInsets.fromLTRB(16, 12, 16, 12),
                  height: 200,
                  child: Column(
                    children: [
                      Text('title'),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text('content1'),
                          Text('content2'),
                          Text('content3'),
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ],
          )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search