Alignment of content inside Dialog in flutter?

Question

Here the dialog appears which contains some boxes . 1.I dont know how these boxes(I dnt know what are they known as) will be aligned like this.

And how to give title to Dialog box?

import 'package:flutter/material.dart';

Dialog leadDialog = Dialog(
  child: Container(
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(15.0),
            child: Text(
              'BUY TICKETS',
              style: TextStyle(color: Colors.black, fontSize: 22.0),
            ),
          ),
          Divider(color: Colors.redAccent),
          Row(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
            Padding(
              padding: EdgeInsets.all(15.0),
            ),
            RaisedButton(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 15.0),
              textColor: Colors.black,
              child: Text(
                '02:00PM',
                style: TextStyle(),
              ),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0)),
            ),
            RaisedButton(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 15.0),
              textColor: Colors.black,
              child: Text(
                '10:00PM',
                style: TextStyle(),
              ),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0)),
            )
          ]),
          Divider(color: Colors.redAccent),
          Row(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
            Padding(
              padding: EdgeInsets.all(15.0),
            ),
            RaisedButton(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 15.0),
              textColor: Colors.black,
              child: Text(
                '02:00PM',
                style: TextStyle(),
              ),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0)),
            ),
            RaisedButton(
              color: Colors.grey,
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 15.0),
              textColor: Colors.black,
              child: Text(
                '10:00PM',
                style: TextStyle(),
              ),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0)),
            )
          ]),
        ],
      )),
);

Current:

Expected:

Help me out with the divider line too it is not that bold as shown as image when I do that.

Answer 1

Dialog leadDialog = Dialog(
  elevation: 12,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
  child: Padding(
    padding: const EdgeInsets.all(12.0),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.all(15.0),
          child: Text(
            'BUY TICKETS',
            style: TextStyle(color: Colors.blue, fontSize: 26.0, fontWeight: FontWeight.bold),
          ),
        ),
        Container(color: Colors.redAccent, height: 2),
        SizedBox(height: 8),
        Text(
          "Select your time zone",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 8),
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            RaisedButton(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 12.0),
              textColor: Colors.black,
              child: Text('02:00PM', style: TextStyle(fontSize: 16)),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
              onPressed: () {},
            ),
            Spacer(),
            RaisedButton(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 12.0),
              textColor: Colors.white,
              color: Colors.yellow[800],
              child: Text('10:00PM', style: TextStyle(fontSize: 16)),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
              onPressed: () {},
            )
          ],
        ),
        Container(
          color: Colors.redAccent,
          height: 2,
          margin: EdgeInsets.symmetric(vertical: 12),
        ),
        Text(
          "Select your Ticket",
          style: TextStyle(color: Colors.black),
        ),
        Table(
          columnWidths: {
            0: FlexColumnWidth(0.4),
            1: FlexColumnWidth(0.2),
            2: FlexColumnWidth(0.4),
          },
          children: [
            TableRow(
              children: [
                RaisedButton(
                  onPressed: () {},
                  child: Text("#15", style: TextStyle(fontSize: 16)),
                ),
                SizedBox(),
                RaisedButton(
                  onPressed: () {},
                  child: Text("#20", style: TextStyle(fontSize: 16)),
                ),
              ],
            ),
            TableRow(
              children: [
                RaisedButton(
                  onPressed: () {},
                  child: Text("#25", style: TextStyle(fontSize: 16)),
                ),
                SizedBox(),
                RaisedButton(
                  onPressed: () {},
                  child: Text("#50", style: TextStyle(fontSize: 16)),
                ),
              ],
            ),
          ],
        ),
        Container(
          color: Colors.redAccent,
          height: 2,
          margin: EdgeInsets.symmetric(vertical: 12),
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            RaisedButton(
              padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 12.0),
              textColor: Colors.white,
              color: Colors.red,
              child: Text('Cancel', style: TextStyle(fontSize: 16)),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
              onPressed: () {},
            ),
            Spacer(),
            RaisedButton(
              padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 12.0),
              textColor: Colors.white,
              color: Colors.yellow[800],
              child: Text('Confirm', style: TextStyle(fontSize: 16)),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
              onPressed: () {},
            )
          ],
        ),
        SizedBox(height: 8),
        Text(
          "*You can buy max 2 tickets",
          style: TextStyle(color: Colors.grey),
        ),
      ],
    ),
  ),
);