title: How to align multiple row in Flutter?
body: <h1>Scenario</h1>
  <p>There is a column.</p>
  <p>There are 4 children in this colum</p>
  <p>The first 2 are Rows (R1 and R2)</p>
  <p>The 3rd is a Divider</p>
  <p>The last is a Row (R3)</p>
  <p>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.</p>
  <h1>Problem</h1>
  <p>The children of the sub-rows do not align as shown in the screenshot below</p>
  <p><a href="https://i.stack.imgur.com/dUTMF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dUTMF.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/M4Gdq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M4Gdq.png" alt="enter image description here" /></a></p>
  <h1>Question</h1>
  <p>How to make the children of the sub-rows in R1, R2, R3 align?</p>
  <p>The longest dynamic child should dictate the width</p>
  <h1>Reproducible code: (Hint just copy-paste on dartpad.dev  and hit run)</h1>
  <pre><code>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('-&gt;'),
                      padding: EdgeInsets.symmetric(horizontal: 20),
                    ),
                    Text('35000 USD'),
                  ],
                ),
              ],
            ),
  
            Row(
              children: [
                Expanded(child: Text('Credit Balance')),
                Row(
                  children: [
                    Text('350 Rs'),
                    Padding(
                      child: Text('-&gt;'),
                      padding: EdgeInsets.symmetric(horizontal: 20),
                    ),
                    Text('35 USD'),
                  ],
                ),
              ],
            ),
            Divider(),
            Row(
              children: [
                Expanded(child: Text('Total')),
                Row(
                  children: [
                    Text('350 Rs'),
                    Padding(
                      child: Text('-&gt;'),
                      padding: EdgeInsets.symmetric(horizontal: 20),
                    ),
                    Text('35000000 USD'),
                  ],
                ),
              ],
            ),
        ]
      );
    }
  }
  </code></pre>
  <h1>Attempt</h1>
  <p>I attempted to use 3 Columns instead of one Row, but then I faced another issue, WHERE DO I PUT THE DIVIDER ?</p>