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

Flutter – How to put two container over same stack with both having same height

I want to implement the following design in the flutter.
enter image description here

This is one item of the ListViewchildren.
Also the text mentioned in the image is dynamic and therefore i don’t want to give static heigh of the main Container that means the area in the left side that is the green one should automatically fit the second Container containing the text.

What i am trying to do right now is :

    Container(
                          child: Stack(
                            children: [
                              Container(
                                    width: 15,
                                    decoration: BoxDecoration(
                                        color: Colors.green,
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(5))),
                                
                              ),
                              Positioned(
                                  left: 10,
                                  top: 1,
                                  bottom: 1,
                                  child: Container(
                                    padding: Spacing.padding12,
                                    color: Colors.white,
                                    child: Text(
                                        'Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content'),
                                  ))
                            ],
                          ),
                        ),

Thanks in advance

Tags:

2

Answers


  1. 0

    Use boxShadow instead. Something like this:

    Container(
  padding: const EdgeInsets.all(10),
  decoration: const BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(5),
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.green,
        offset: Offset(-5.0, 0.0),
      ),
    ],
  ),
  child: const Text('...'),
),
    Login or Signup to reply.
  2. 0

    The following codeenter image description here works like what you want:

    Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: Colors.green),
                  padding: EdgeInsets.only(left: 6),
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(12),
                        color: Colors.white),
                    height: 150,
                    padding: EdgeInsets.all(8),
                    width: 300,
                    child: Text("Lorem text"),
                  ),
                ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search