How to automatically wrap text after N characters? - flutter

Question

I'm displaying items with ListView.builder like this
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:

Answer 1

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.