CODEWITHSUNDEEP
flutter
anta40
anta40

Reputation: 6743

How to automatically wrap text after N characters?

I'm displaying items with ListView.builder like this

enter image description here

As you can see, if really long names like "Speedy Motor Services 1234567890" is used, then the text beside it will be severely squeezed.

Code:

return ListView.builder(
  itemBuilder: (context, position) {
    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.fromLTRB(12.0, 12.0, 12.0, 6.0),
                  child: FittedBox(
                    fit:BoxFit.fitWidth,
                    child: Text(_displayedList[position].name,
                      style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold)), 
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
                  child: Text(_displayedList[position].location,
                    style: TextStyle(fontSize: 16.0),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
                  child: Text(_displayedList[position].distance.toString()+" KM",                    style: TextStyle(fontSize: 16.0),
                  ),
                ),
              ],
            ),
            Expanded(
              child:Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  //Expanded(),
                  Text(_displayedList[position].services.toString(),
                    style: TextStyle(color: Colors.grey), softWrap: true,
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: IconButton(
                      onPressed: () {},
                      icon: Icon(Icons.phone, size: 20, color: Colors.green[700],),
                    ),
                  ),
                ],
              ),
            )
          ),
        ],
      ),
      Divider(
        height: 2.0,
        color: Colors.grey,
      )
    ],
  );
},
itemCount: _displayedList.length);
},))]),)

I tried using FittedBox, it didn't perform like I expect. Is there any way to, say wrap the text each 15 characters?

What I want is something like this:

enter image description here

Upvotes: 0

Views: 368

Answers (1)

Sunny
Sunny

Reputation: 3265

You just need to wrap the content with the expanded and use flex

Here is the code snnipet inside the column

Expanded(
            flex : 2,
            child :Row(
                       mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.fromLTRB(12.0, 12.0, 12.0, 6.0),
              child: FittedBox(
                fit:BoxFit.fitWidth,
                child: Text(_displayedList[position].name,
                  style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold)), 
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
              child: Text(_displayedList[position].location,
                style: TextStyle(fontSize: 16.0),
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
              child: Text(_displayedList[position].distance.toString()+" KM",                    style: TextStyle(fontSize: 16.0),
              ),
            ),
          ],
                 ),
           ),Expanded(
               flex :1,
              child:Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  //Expanded(),
                  Text(_displayedList[position].services.toString(),
                    style: TextStyle(color: Colors.grey), softWrap: true,
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: IconButton(
                      onPressed: () {},
                      icon: Icon(Icons.phone, size: 20, color: Colors.green[700],),
                    ),
                  ),
                ],
              ),
            )
          ),
        ],
      ),

Now you need to just adjust the flex to the UI requirement.

Upvotes: 1

Related Questions