CODEWITHSUNDEEP
flutter
Adrian Ani
Adrian Ani

Reputation: 21

Text width based on text length in flutter

I have this ListView.generator that returns such Containers 

Container(
  child: Row(
    children: <Widget>[
      Container(
        child: null,
        width: 10,
        height: 10,
        decoration: BoxDecoration(
          color: social[i].color,
          shape: BoxShape.circle,
        ),
        margin: EdgeInsets.only(right: 7, top: 1,),
      ),
      Text(
        social[i].name, 
        style: TextStyle(
          color: Colors.white, 
          fontFamily: 'Muli', 
          fontSize: 24.0, 
          fontWeight: FontWeight.w700
        ),
      )
    ],
  ), 
  width: social[i].name.length * 16.0,
)

Right know I'm making use of width to set it based on text length but it's giving me and inadequate result as spacing between twitter and instagram is bigger than it should be.

inadequate result

The result I want being this with an even space between them. adequate result

A Wrap widget with spacing set to even wouldn't help as I want this list to have a full width of the user resolution and to be aligned to the left.

Upvotes: 0

Views: 120

Answers (1)

Garry
Garry

Reputation: 534

you can use mainAxisAlignment: MainAxisAlignment.spaceEvenly for Row element like 

Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      Container(
        child: null,
        width: 10,
        height: 10,
        decoration: BoxDecoration(
          color: social[i].color,
          shape: BoxShape.circle,
        ),
        margin: EdgeInsets.only(right: 7, top: 1,),
      ),
      Text(
        social[i].name, 
        style: TextStyle(
          color: Colors.white, 
          fontFamily: 'Muli', 
          fontSize: 24.0, 
          fontWeight: FontWeight.w700
        ),
      )
    ],
  ), 
  width: social[i].name.length * 16.0,
)

In case you want to know more about it. https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041 you can check this article. I found it really helpful.

Upvotes: 1

Related Questions