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

how to get maximum length of Text of column in flutter to align in flutter

Here i need two kind of alignment…

first column should occupy width based on its child’s maximum string length and next column should be align based on decimal..

Map<String,dynamic> map={
'FootBall':200.30,
'Hockey':3.30
'Golf':30.400
};

and here is code

Container(
          color: Colors.grey,
          height: 200,
          width: 300,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children:
            map.keys.map((e) => Row(
              children: [
              Text(e.toString()),
              SizedBox(width: 10,),
              Text(map[e].toString()),
            ],)).toList()
          ,),
        )

I need following way alignment

FootBall : 200.30
Hockey   :   3.30
Golf     :  30.400
Tags:

2

Answers


  1. 0

    You can do like this

        Container(
color: Colors.grey,
height: 200,
width: 300,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:
map.entries.map((e) => Row(
   children: [
              Text("${e.key} : "),
              SizedBox(width: 10,),
              Text("${e.values}"),
            ],)).toList()
          ,),
        )`
    Login or Signup to reply.
  2. 0

    You can achieve it like this

    You just have to set a fixed width to your text widget by wrapping them from SizedBox

    Container(
      color: Colors.blue,
      height: 200,
      width: 300,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children:
        map.keys.map((e) => Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
          SizedBox(width:60,child: Text(e.toString())),
          const SizedBox(width: 10,),
            const Text(":"),
            const SizedBox(width: 10,),
          SizedBox(width:60,child: Text(map[e].toString())),
        ],)).toList()
      ,),
    );

    It looks like this
    enter image description here

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

Back To Top
Search