Reputation: 20386

How to align multiple row in Flutter?

Scenario

There is a column.

There are 4 children in this colum

The first 2 are Rows (R1 and R2)

The 3rd is a Divider

The last is a Row (R3)

Each of the Row contains a text that should expand all available space in the left and a sub-rows that contains 3 children each of dynamic width. These 3 children should align (on the vertical axis) with the other children in R1, R2 and R3.

Problem

The children of the sub-rows do not align as shown in the screenshot below

Question

How to make the children of the sub-rows in R1, R2, R3 align?

The longest dynamic child should dictate the width

Reproducible code: (Hint just copy-paste on dartpad.dev and hit run)

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children:[
           Row(
            children: [
              Expanded(child: Text('Main Balance')),
              Row(
                children: [
                  Text('350 Rs'),
                  Padding(
                    child: Text('->'),
                    padding: EdgeInsets.symmetric(horizontal: 20),
                  ),
                  Text('35000 USD'),
                ],
              ),
            ],
          ),

          Row(
            children: [
              Expanded(child: Text('Credit Balance')),
              Row(
                children: [
                  Text('350 Rs'),
                  Padding(
                    child: Text('->'),
                    padding: EdgeInsets.symmetric(horizontal: 20),
                  ),
                  Text('35 USD'),
                ],
              ),
            ],
          ),
          Divider(),
          Row(
            children: [
              Expanded(child: Text('Total')),
              Row(
                children: [
                  Text('350 Rs'),
                  Padding(
                    child: Text('->'),
                    padding: EdgeInsets.symmetric(horizontal: 20),
                  ),
                  Text('35000000 USD'),
                ],
              ),
            ],
          ),
      ]
    );
  }
}

Attempt

I attempted to use 3 Columns instead of one Row, but then I faced another issue, WHERE DO I PUT THE DIVIDER ?

Upvotes: 2

Answers (3)

Wehid Behrami

Reputation: 266

use DataTable widget to show your data

class MyWidget extends StatelessWidget {
    @override
Widget build(BuildContext context) {
return SafeArea(
  child: DataTable(
    columns: [
      DataColumn(label: Text('Explain')),
      DataColumn(label: Text('Column 1')),
      DataColumn(label: Text('Column 2')),
    ],
    rows: [
      DataRow(cells: [
        DataCell(Text('Main Balance')),
        DataCell(Text('350 Rs')),
        DataCell(Text('35000 USD')),
      ]),
      DataRow(cells: [
        DataCell(Text('Credit Balance')),
        DataCell(Text('350 Rs')),
        DataCell(Text('35 USD')),
      ]),
      DataRow(cells: [
        DataCell(Text('Total')),
        DataCell(Text('350 Rs')),
        DataCell(Text('35000000 USD')),
      ]),
    ],
  ),
);

} }

Upvotes: 0

Guillermo De La Cruz

Reputation: 449

Try this solution.

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Row(
        children: [
          Expanded(flex: 1, child: Text('Main Balance')),
          Expanded(
            flex: 1,
            child: Row(
              children: [
                Expanded(
                  child: Text('350 Rs'),
                ),
                Expanded(
                  child: Padding(
                    child: Text('->'),
                    padding: EdgeInsets.symmetric(horizontal: 20),
                  ),
                ),
                Expanded(
                  child: Text('35000 USD', textAlign: TextAlign.end),
                ),
              ],
            ),
          ),
        ],
      ),
      Row(
        children: [
          Expanded(flex: 1, child: Text('Credit Balance')),
          Expanded(
            flex: 1,
            child: Row(
              children: [
                Expanded(
                  child: Text('350 Rs'),
                ),
                Expanded(
                  child: Padding(
                    child: Text('->'),
                    padding: EdgeInsets.symmetric(horizontal: 20),
                  ),
                ),
                Expanded(
                  child: Text('35 USD', textAlign: TextAlign.end),
                ),
              ],
            ),
          ),
        ],
      ),
      Divider(),
      Row(
        children: [
          Expanded(flex: 1, child: Text('Total')),
          Expanded(
            flex: 1,
            child: Row(
              children: [
                Expanded(
                  child: Text('350 Rs'),
                ),
                Expanded(
                  child: Padding(
                    child: Text('->'),
                    padding: EdgeInsets.symmetric(horizontal: 20),
                  ),
                ),
                Expanded(
                  child: Text('35000000 USD', textAlign: TextAlign.end),
                ),
              ],
            ),
          ),
        ],
      ),
    ]);
  }
}

Upvotes: 0

farouk osama

Reputation: 2529

try this:

use the Table Widget, and you can customize as you wish

Table(
        columnWidths: {2: FlexColumnWidth(0.2)},
        children: [
          TableRow(children: [
            Text('Main Balance'),
            Text('350 Rs'),
            Text('->'),
            Text('35000 USD'),
          ]),
          TableRow(children: [
            Text('Credit Balance'),
            Text('350 Rs'),
            Text('->'),
            Text('35 USD'),
          ]),
          TableRow(children: [
            Divider(),
            Divider(),
            Divider(),
            Divider(),
          ]),
          TableRow(children: [
            Text('Total'),
            Text('350 Rs'),
            Text('->'),
            Text('35000000 USD'),
          ]),
        ],
      ),

the result code is:

Upvotes: 4