How to set width and make rows near to each other in data table using flutter

Question

I am trying to create a screen as the below one:

So I used here a DataTable as the below code:

import 'package:flutter/material.dart';
import 'package:catest/config/app_theme.dart';
import '../widgets/radio_btn_sim.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          SingleChildScrollView(
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.only(
                    top: 100,
                    left: 20,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Sim information',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(
                          left: 30,
                        ),
                        child: DataTable(
                          columns: [
                            DataColumn(label: Text('Sim operator')),
                            DataColumn(
                                label: Row(
                              children: <Widget>[
                                Text('Vodafone'),
                                Image.asset(
                                  'assets/images/vodic.png',
                                  width: 30,
                                  height: 30,
                                )
                              ],
                            )),
                          ],
                          rows: [
                            DataRow(cells: [
                              DataCell(Row(
                                children: <Widget>[
                                  Image.asset(
                                    'assets/images/sim_ic.png',
                                    width: 30,
                                    height: 30,
                                  ),
                                  Text('ICCID'),
                                ],
                              )),
                              DataCell(Text('123456789')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('IMEI')),
                              DataCell(Text('123456789')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('SIM IMSI')),
                              DataCell(Text('123456789')),
                            ]),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                //Network provider
                Padding(
                  padding: const EdgeInsets.only(
                    top: 20,
                    left: 20,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Network Provider',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(
                          left: 30,
                        ),
                        child: DataTable(
                          columns: [
                            DataColumn(label: Text('Operator')),
                            DataColumn(
                                label: Row(
                              children: <Widget>[
                                Text('Vodafone NL'),
                                Image.asset(
                                  'assets/images/vodic.png',
                                  width: 30,
                                  height: 30,
                                )
                              ],
                            )),
                          ],
                          rows: [
                            DataRow(cells: [
                              DataCell(Row(
                                children: <Widget>[
                                  Text('MCC'),
                                ],
                              )),
                              DataCell(Text('204')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('MNC')),
                              DataCell(Text('04')),
                            ]),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                //Serving Cell
                Padding(
                  padding: const EdgeInsets.only(
                    top: 20,
                    left: 20,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Serving Cell',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(
                          left: 30,
                        ),
                        child: DataTable(
                          columns: [
                            DataColumn(label: Text('Data Net')),
                            DataColumn(
                                label: Row(
                              children: <Widget>[
                                Text('LTE'),
                              ],
                            )),
                          ],
                          rows: [
                            DataRow(cells: [
                              DataCell(Row(
                                children: <Widget>[
                                  Text('Data type'),
                                ],
                              )),
                              DataCell(Text('LTE')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('TAC')),
                              DataCell(Text('62603')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('PCI')),
                              DataCell(Text('118')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('ECI')),
                              DataCell(Text('12315644(5465-567)')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('EARFCN')),
                              DataCell(Text('1300/19300')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('EARFCN')),
                              DataCell(Text('1300/19300')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('FREQ')),
                              DataCell(Text('1815/1720')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('BAND')),
                              DataCell(Text('3 FDD')),
                            ]),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Positioned(
            bottom: 0,
            child: SizedBox(
              width: MediaQuery.of(context).size.width,
              child: RadioBtnSim(
              ),
            ),
          ),
        ],
      ),
    );
  }
}

and the result is looks like the below image:

So I see that there's a different in text location in the out put they are in the middle, but i need to be at the start and at the end, the second point I see that there are spacing between every row, I need here to reduce the spacing aswell, and also I see here some padding when having a long text...

So how can I solve this..

Answer 1

Try wrapping your widgets in Align widget, which provides you alignment parameter in order to better align your child widgets.