Aligning Text in Card under Column and Row

Issue

I want to achieve the UI like this. The Title, SubTitle and BottomText are all neatly aligned.

What I have gotten so far by myself is this, it is a Card containing all the widgets. How to I do so that the Subtitle and the BottomText aligns with the Title?

Here is my code:

return ListView(
  padding: EdgeInsets.all(8.0),
  scrollDirection: Axis.vertical,
  shrinkWrap: true,
  children: <Widget>[
    Container(
      child: Card(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15.0)
        ),
        color: Colors.white,
        elevation: 10,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.fromLTRB(20.0, 8.0, 8.0, 8.0),
              child: Text('Title', style: TextStyle(fontWeight: FontWeight.bold),),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Column(
                  children: <Widget>[
                    Text('Text2'),
                    Text('Text2'),
                  ],
                ),
                Column(
                  children: <Widget>[
                    Text('Text2'),
                    Text('Text2'),
                  ],
                ),
                Column(
                  children: <Widget>[
                    Text('Text2'),
                    Text('Text2'),
                  ],
                )
              ],
            ),
            Container(
              padding: EdgeInsets.all(8.0),
              color: Colors.orange,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text('Text2'),
                  Text('Text2'),
                  Checkbox(value: false,)
                ],
              ),
            )
          ],
        ),
      ),
    )
  ],
);

Solution

Just a little improvement, and you will achieve want you want to achieve.

Final solution:

      return ListView(
          padding: EdgeInsets.all(8.0),
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          children: <Widget>[
            Container(
              child: Card(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(40.0), topRight: Radius.circular(40.0), bottomLeft: Radius.circular(15.0), bottomRight: Radius.circular(15.0))
                ),
                color: Colors.white,
                elevation: 10,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.fromLTRB(20.0, 30.0, 8.0, 8.0),
                      child: Text(
                        'Title',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                    ),
                    Container(
                        padding: EdgeInsets.all(20.0),
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Column(
                                children: <Widget>[
                                  Text('Text2'),
                                  Text('Text2'),
                                ],
                              ),
                              Column(
                                children: <Widget>[
                                  Text('Text2'),
                                  Text('Text2'),
                                ],
                              ),
                              Column(
                                children: <Widget>[
                                  Text('Text2'),
                                  Text('Text2'),
                                ],
                              )
                            ])),
                    Container(
                      padding:
                          EdgeInsets.symmetric(vertical: 8.0, horizontal: 20.0),
                      decoration: BoxDecoration(
                          color: Colors.orange,
                          borderRadius: BorderRadius.circular(15.0)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text('Text2'),
                          Text('Text2'),
                          Checkbox(
                            value: false,
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            )
          ],
        );

And here how your result will look like:

Answered By - Alok