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

Flutter – BackgroundColor of the Container only wrap the text inside Expanded Widget

I have a design like Pic 1,and my problem is that the text will be wrapped in a Container with background gradient, but since i’m using the Expanded to wrap this Container, so it’s always get all the empty space like picture 2,which won’t match the design.

If i’m using the Flexible,how can i align the arrow icon to the end of row as show in picture 3.
Please help me to find a solution, tks.

  Container(
              width: 400,
              height: 300,
              color: Colors.blue,
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Row(
                      children: [
                        Flexible(
                            child: Container(
                                color: Colors.white,
                                child: Text("Công thực tế:21 công"))),
                        Align(
                            alignment: Alignment.topRight,
                            child: Icon(Icons.arrow_circle_right))
                      ],
                    ),
                  )
                ],
              ),
           ),

[Pic 1](https://i.stack.imgur.com/2HWAZ.png)
[Pic 2](https://i.stack.imgur.com/m5aQy.png)
[pic 3](https://i.stack.imgur.com/XUrrR.png)

Find a solution for this code

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ah, nevermind, i just found a solution, using the Flexible and MainAxisAlignment.spaceBetween, i will put my code below, thanks for your help.

    Container(
            margin: EdgeInsets.fromLTRB(16, 16, 16, 0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Flexible(
                  child: Container(
                    color: Colors.white,
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Flexible(
                          child: Text("Công thực tế: 21 công"),
                        )
                      ],
                    ),
                  ),
                ),
                Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(24),
                      border: Border.all(
                          width: 1, color: Colors.black.withOpacity(0.45))),
                  child: Icon(Icons.expand_more_outlined,
                      color: Colors.black.withOpacity(0.45)),
                ),
              ],
            ),
          )

  2. 0

    you can try this:
    output

    child: Container(
       height: 200,
       width: 300,
       decoration: BoxDecoration(
         color: Colors.blue,
         borderRadius: BorderRadius.only(
           topRight: Radius.circular(10.0),
           bottomRight: Radius.circular(10.0),
           topLeft: Radius.circular(10.0),
           bottomLeft: Radius.circular(10.0),
         ),
       ),
       child: Padding(
         padding: const EdgeInsets.all(12.0),
         child: Column(
           children: [
             Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
                 Container(
                   height: 50,
                   width: 200,
                   decoration: BoxDecoration(
                     color: Colors.blue.shade900,
                     borderRadius: BorderRadius.only(
                         topRight: Radius.circular(40.0),
                         bottomRight: Radius.circular(40.0),
                         topLeft: Radius.circular(40.0),
                         bottomLeft: Radius.circular(40.0),
                    ),
                   ),
                   child:
                   Center(child: Text('Text',style: TextStyle(color: Colors.white))),

  ),
                 CircleAvatar(
                   backgroundColor: Colors.blue.shade900,
                   radius: 20,
                   child: IconButton(
                     padding: EdgeInsets.zero,
                     icon: Icon(Icons.keyboard_arrow_up),
                     color: Colors.white,
                     onPressed: () {},
                   ),
                 ),
               ],
             ),
           ],
         ),
       ),
     ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search