How to reduce spacing between Items in data table and make texts align end using flutter

Question

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

and this is the below code I created:

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: 10,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Text(
                        'Sim information',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      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: 10,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Text(
                        'Network Provider',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      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: 10,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Text(
                        'Serving Cell',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      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 final output looks like the below image:

So now it's nearly looks like the design I created, but I need here to reduce spacing between rows and the right data should be align right....

I tried to use Align widget by wrapping the child and use the Alignment.centerRight but it doesn't work..

So is it able to solve this issue?

Answer 1

you can use the combination of Row and Column like this

Column(
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text("Name : "),
        Text(decodedToken['name'].toString()),
      ],
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text("Email : "),
        Text(decodedToken['email'].toString()),
      ],
    ),
  ],
),

Answer 2

in data table you can use dataRowHeight: double, to change the height.

from document in https://api.flutter.dev/flutter/material/DataTable/dataRowHeight.html

The height of each row (excluding the row that contains column headings).

This value defaults to kMinInteractiveDimension to adhere to the Material Design specifications.

and for control column space you can use columnSpacing

document of DataTable widget: https://api.flutter.dev/flutter/material/DataTable-class.html