Having a container fit the size of the context flutter?

user_5771844 0
Viewed 1873

I was wondering if anyone can help me try to figure out how to make the chat boxes responsive based on the text. As seen below in the picture. How the chat bubbles are supposed to look

Below is the code to attempt to make the chat bubble. I don't mind changing widget type to achieve the container fitting o the size of the text. I just do not want compromise the design. I can also include other attempts in the comments if needed! Thanks for the help in advance.

   return Container(
     child: Padding(
             padding: EdgeInsets.only(left:5), 
            child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Padding(
             padding: const EdgeInsets.only(left:10),
             child: new CircleAvatar(
               radius: (17.5),
               backgroundImage: AssetImage(
                                      user.profilePic,),
             ),
           ), 
         SizedBox(width: 10,),
         Container(
           width: MediaQuery.of(context).size.width,
           constraints: BoxConstraints(//minWidth:125,
           maxWidth: 290, //275
           ),
          
           child:Material(
           //color:Color(0x00000000) ,  TRANSPARENT
           color:const Color(0xf2ffffff),///Color(0xe6ffffff)  // ! REVISIT Change color of boxes??? 
           borderRadius: BorderRadius.only(
                                    topRight: Radius.circular(16.0),
                                    bottomRight: Radius.circular(16.0),
                                    bottomLeft: Radius.circular(16.0),
                                  ),
         child: Padding(
           padding: const EdgeInsets.only(left:10.0), //Revisit
           child: Column(
             mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          SizedBox(height: 5,),
                          Row(
                             children: [
                               Text(user.name,       ///0xd9343f4b
                                                style: TextStyle(
                                                    fontFamily: 'Lato',
                                                  fontSize: (13/8.12)*SizeConfig.textMultiplier,
                                                  color: const Color(0xd9343f4b),
                                                  fontWeight: FontWeight.w700,
                                                ),
                                              textAlign: TextAlign.left,),
                              SizedBox(width:8),
                              Text(message.time, 
                                style: TextStyle(
                                        fontFamily: 'Lato',
                                        fontSize: 10,
                                        color: const Color(0xd9343f4b),
                                      ),
                                      textAlign: TextAlign.left,
                                      ),
                             ],
                           ),
                                SizedBox(height: 5,),
                                Container(
                                  
                                  margin: EdgeInsets.only( right:10,),
                                  child: Text(message.text, 
                                  style: TextStyle(
                                          fontFamily: 'Lato',   
                                          fontSize: 13,
                                          color: const Color(0xd9343f4b),
                                         
                                        ),
                                        textAlign: TextAlign.left,
                                        ),
                                ),

                       //SizedBox(height: 10,),//if(message.imageUrl!='') {
                      SizedBox(height: 10,),
                      _isPhoto(message),
                       
                      //},
                      
                      //}
                        ],
           ),
         ),
         ),
         ),
         
         ],

       ),
     ) 
   );
   
   
                    
 }  ```
dart flutter media-queries responsive containers
1 Answers

You are on the right track for implementing the design, the only problem you have is that the column inside your chat bubble has an unbounded height which is why it seems that it does not fit to its contents size. To fix this simply tell the Column to fit to its children by passing mainAxisSize.

child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [],
),

According to the documentation for main axis size

How much space should be occupied in the main axis.

During a flex layout, available space along the main axis is allocated to children. After allocating space, there might be some remaining free space. This value controls whether to maximize or minimize the amount of free space, subject to the incoming layout constraints.

What this means is that when laying out its children, this property determines how much space is provided to its children in the main axis (Vertical for columns) and it defaults to an unbounded vertical space (as per the documentation for Column)

Layout each child a null or zero flex factor (e.g., those that are not Expanded) with unbounded vertical constraints

A working sample of the solution can be found here on codepen

I also changed your code slightly to replace the SizedBox with padding in a few places (Note that I had to replace function calls and variables because your code did not have their implementations). The sample output for the pen is

enter image description here

EDIT

After making the above changes you will notice that the bubble takes more width than it needs, to fix this you need to understand 2 things.

First you are specifying that your container should take the width from a MediaQuery width: MediaQuery.of(context).size.width, so that line should be removed. After adding the minWidth you have provided in your question you will notice that the container always tries to take the midWidth as its width.

This is because by default Rows have unbounded width (double.INFINITY) and therefore your container tries to layout at its max possible width (i.e 290 according to your question). To fix this all you need to do is add a mainAxisSize to the Row where you display the user's name.

child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              
              children: [
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [

This will make sure that the container always takes the width of its children and will never exceed the width of 290. NOTE: if your children exceed the fixed with of 290 your layout will overflow, I suggest looking into the Wrap widget.

I have updated the pen with the width changes as well so you can play around with it there.

user_91221740
Related