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

Using Flutter how we create below UI

enter image description here

I try to create using stack and other container but I am getting normal line.
enter image description here

Tags:

2

Answers


  1. 0

    You can try to make the color of the Container transparent and make the background color of the Scaffold instead.

    That way the line of the container will disappear.

    Login or Signup to reply.
  2. 0

    This code is just for the demo you will need to update it as per your requirement :

    
Scaffold(
      body: Center(
        child: Column(
          children: [
            SizedBox(height: 50),
            Container(
              height: 50,
              width: 250,
              decoration: BoxDecoration(
                color: Colors.blueGrey,
                borderRadius: BorderRadius.circular(30),
              ),
            ),
            Container(
              height: 100,
              width: double.infinity,
              color: Colors.blueGrey,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    height: 100,
                    width: Get.width * 0.43,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        bottomRight: Radius.circular(20),
                        topRight: Radius.circular(20),
                      ),
                      color: Colors.white,
                    ),
                  ),
                  Icon(Icons.calendar_month),
                  Container(
                    height: 100,
                    width: Get.width * 0.43,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(20),
                        topLeft: Radius.circular(20),
                      ),
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              height: 50,
              width: 350,
              decoration: BoxDecoration(
                color: Colors.blueGrey,
                borderRadius: BorderRadius.circular(30),
              ),
            ),
          ],
        ),
      ),
    );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search