#flutter UI,

for example like these

name : Yogi A W
company : PT XXX
company second : PT XXXX

i would like to implement on UI Flutter with precision 'variable : value'

expected

name           : Yogi A W
company        : PT XXX
company second : PT XXXX

reality

name           : Yogi A W
company        : PT XXX
company second  : PT XXXX

i have use with \t in Text widget

Text('Nama\t\t\t\t\t\t\t\t\t\t\t\t:'),
Text('Company\t\t\t\t\t\t\t\t\t\t\:'),
Text('Company second\t\t:'),

CodePudding user response：

You can try this code

Row(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text("Name"),
              Text("Company"),
              Text("Company Second"),
            ],
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(" : Yogi A W"),
              Text(" : PT ABC"),
              Text(" : PT CDE"),
            ],
          ),
        ],
      )

CodePudding user response：

You can use Table widget

Table(
      defaultVerticalAlignment: TableCellVerticalAlignment.middle,      
      children: <TableRow>[
        TableRow(
          children: <Widget>[
            
            TableCell(
              
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text("name"),
            ),
            TableCell(
              
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text(":"),
            ),
            TableCell(
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text("Yogi A W"),
            ),
          ],
        ),
        TableRow(
          children: <Widget>[
            
            TableCell(
              
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text("company"),
            ),
            TableCell(
              
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text(":"),
            ),
            TableCell(
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text("PT XXX"),
            ),
          ],
        ),
        TableRow(
          children: <Widget>[
            
            TableCell(
              
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text("company second"),
            ),
            TableCell(
              
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text(":"),
            ),
            TableCell(
              verticalAlignment: TableCellVerticalAlignment.top,
              child: Text("PT XXXX"),
            ),
          ],
        ),
      ],
    );

CodePudding user response：

Same way with @Arzak but add refactor for you

@override
  Widget build(BuildContext context) {
    const map = {
      'Name': 'Boxing',
      'Company': 'Apple',
      'Company second': 'Google',
    };

    return Scaffold(
      appBar: AppBar(
        title: Text('test screen'),
      ),
      body: Row(
        children: [
          _data(map.keys),
          _data(map.values, isValue: true),
        ],
      ),
    );
  }

  Widget _data(Iterable<String> list, {bool isValue = false}) {
    return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: list.map((e) => Text(isValue ? ': $e' : '$e\t')).toList());
  }