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

Flutter – Widget without fixed width can constraint a Text widget?

Container(
   child: Row(
     children:[
       Container(  //icon in the left side
          height: 50,
          widget: 50,
          color: Colors.green,
          child: Icon...
       ),  
       Container( //container text
         //width:200, if I set this width
         child:Text('a long text inside here...',
           textAlign: TextAlign.justify,
         ),//long text here
       ), 
     ],

The code above is just a sample to explain my problem.
I call this widget inside a Column. So this column restrict the width of this widget. So far so good. The height of this widget is setted in the icon Container (50). This "long" text will fit inside this area so isn’t so big, just a description.For example if set the height in Icon Container to 80 and width in Container to 280 is enough. enough for fized layouts.

Like in this image:

enter image description here

The problem is that the long text isn’t restricted inside the Container (text). The text is overflowing the container in one single line. If I set the width of this container the text works fine including the justify.

No problem for fixed layouts but I am doing a responsive layout. So this widget need to be flexible to fit in my Column.

I really need to have this width fixed or we can do this work?
Thank you.

Tags:

2

Answers


  1. 0

    you can make use of the Expanded widget to make the text container take up the remaining width within the row, while allowing the text to wrap and be justified

    Container(
  child: Row(
    children: [
      Container(
        height: 50,
        width: 50,
        color: Colors.green,
        child: Icon(...),
      ),
      Expanded(
        child: Container(
          child: Text(
            'a long text inside here...',
            textAlign: TextAlign.justify,
          ),
        ),
      ),
    ],
  ),
)
    Login or Signup to reply.
  2. 0

    You don’t have to set the fixed width of the container

    just set the width according to the size of the screen

    for example

    final width = MediaQuery.of(context).size.width;

    this will give you the width of the screen

    now using this width you can set the width like width * 0.3 for the image
    and width * 0.6 of the text of the container.

    I think like this you can also give constraints while keeping the responsiveness.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search