Flutter Flexible not wrapping text within a column

4,494

Solution 1

You can use Expanded Here. Expanded, which forces the child to expand to fill the available space. you can expand column here.

Here is code snippet for column:-

Expanded(
                  child: Container(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'My Title text',
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18.0,
                              color: Colors.black),
                        ),
                        Text(
                          'This is lower text',
                          style: TextStyle(
                              fontWeight: FontWeight.w200,
                              fontSize: 16.0,
                              color: Colors.black),
                        ),
                        Flexible(
                          child: Text(
                            'Here is some long text that I am expecting will go off of the screen.',
                            style: TextStyle(
                                fontWeight: FontWeight.normal,
                                fontSize: 16.0,
                                color: Colors.black),
                          ),
                        )
                      ],
                    ),
                  ),
                )

Here is what you expect:- enter image description here

Hope it will work.

Solution 2

you can try this approach by placing the width of the container to 70% and for an image 30%. There is no need for Flexible widget over here

Container(
 width:MediaQuery.of(context).size.width*0.7
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        'Here is some long text that I am expecting will go off of the screen.',
        style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 18.0,
            color: Colors.black),
      ),
      Text(
        'Here is some long text that I am expecting will go off of the screen.',
        style: TextStyle(
            fontWeight: FontWeight.w200,
            fontSize: 16.0,
            color: Colors.black),
      ),
      Text(
          'Here is some long text that I am expecting will go off of the screen.',
          style: TextStyle(
              fontWeight: FontWeight.normal,
              fontSize: 16.0,
              color: Colors.black
         )
    ],
  ),
),

Solution 3

You need to put the Container to Expanded inside Row widget Like this


child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Icon(
                    Icons.cake,
                    size: 60.0,
                  ),
                ),
                Expanded(child: Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'My Title text',
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 18.0,
                            color: Colors.black),
                      ),
                      Text(
                        'This is lower text',
                        style: TextStyle(
                            fontWeight: FontWeight.w200,
                            fontSize: 16.0,
                            color: Colors.black),
                      ),
                      Flexible(
                        child: Text(
                          'Here is some long text that I am expecting will go off of the screen.',
                          softWrap: true,
                          style: TextStyle(
                              fontWeight: FontWeight.normal,
                              fontSize: 16.0,
                              color: Colors.black),
                        ),
                      )
                    ],
                  ),
                ),
             ) ],
            ),

The problem is if you didn't put the Container into Expanded, the Row widget keeps expand itself to horizontal and it would overflow.

Share:
4,494
thalacker
Author by

thalacker

I am a .NET developer. Currently working with Web API. Also develop iOS apps on the side.

Updated on December 15, 2022

Comments

  • thalacker
    thalacker over 1 year

    I am trying to make a widget that may have some long text that I would want to wrap a few lines.

    I am trying to use the "Flexible" widget to wrap my Text but it is still overflowing and I do not know what is going wrong.

    Here is what is happening: enter image description here

    Here is my code for the Columns which will be relevant to the Text:

    Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'My Title text',
            style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 18.0,
                color: Colors.black),
          ),
          Text(
            'This is lower text',
            style: TextStyle(
                fontWeight: FontWeight.w200,
                fontSize: 16.0,
                color: Colors.black),
          ),
          Flexible(
            child: Text(
              'Here is some long text that I am expecting will go off of the screen.',
              style: TextStyle(
                  fontWeight: FontWeight.normal,
                  fontSize: 16.0,
                  color: Colors.black),
            ),
          )
        ],
      ),
    ),
    
    

    And in case it is relevant, here is the whole widget:

    Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Material(
            color: Colors.transparent,
            child: Container(
              height: 100.0,
              child: Padding(
                padding: EdgeInsets.all(8.0),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Padding(
                      padding: EdgeInsets.all(16.0),
                      child: Icon(
                        Icons.cake,
                        size: 60.0,
                      ),
                    ),
                    Container(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'My Title text',
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 18.0,
                                color: Colors.black),
                          ),
                          Text(
                            'This is lower text',
                            style: TextStyle(
                                fontWeight: FontWeight.w200,
                                fontSize: 16.0,
                                color: Colors.black),
                          ),
                          Flexible(
                            child: Text(
                              'Here is some long text that I am expecting will go off of the screen.',
                              style: TextStyle(
                                  fontWeight: FontWeight.normal,
                                  fontSize: 16.0,
                                  color: Colors.black),
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }