Flutter | What is the best way to designed a Data Table to fit the full screen in Vertical View?

Question

What are the best views in Flutter or best practice to implement a better UX?

The Vertical text View looks too small:

 SingleChildScrollView bodyData() =>
   SingleChildScrollView(
  scrollDirection: Axis.vertical,
       padding: EdgeInsets.all(1.2),
  child: FittedBox(fit:BoxFit.fill,

  child:
   DataTable(

          sortColumnIndex: 1,
          sortAscending: true,

          columns: <DataColumn>[
            DataColumn(

              label: Text("Company"),
              onSort: (_, __) {
                setState(() {
                  widget.photos.sort((a, b) =>
                      a.data["quote"]["companyName"]
                          .compareTo(b.data["quote"]["companyName"]));
                });
              },
            ),
            DataColumn(

              label: Text("ttmDivRate"),
              numeric: true,
              onSort:   (_,__) {
                setState(() {
                  widget.photos.sort((a, b) =>
                      a.data["stats"]["ttmDividendRate"]
                          .compareTo(b.data["stats"]["ttmDividendRate"]));

View code: The Horizontal view is fine:

Answer 1

Try wrapping the DataTable with another SingleChildScrollView and set the scrollDirection to Axis.horizontal. That way you can increase the text size, and still be able to scroll horizontally to see everything.

Here is an example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black54,
        appBar: AppBar(),
        body: Center(
          child: Container(
            color: Colors.white,
            height: 130,
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: DataTable(
                  columns: <DataColumn>[
                    DataColumn(
                      label: Text('Column 1'),
                    ),
                    DataColumn(
                      label: Text('Column 2'),
                    ),
                    DataColumn(
                      label: Text('Column 3'),
                    ),
                    DataColumn(
                      label: Text('Column 4'),
                    ),
                    DataColumn(
                      label: Text('Column 5'),
                    ),
                    DataColumn(
                      label: Text('Column 6'),
                    ),
                  ],
                  rows: <DataRow>[
                    DataRow(
                      cells: <DataCell>[
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                      ],
                    ),
                    DataRow(
                      cells: <DataCell>[
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                      ],
                      ),
                    DataRow(
                      cells: <DataCell>[
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                      ],
                      ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

We can use a FittedBox to fit height of the data table and let it scroll horizontally.

SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child:
    FittedBox(
                          fit: BoxFit.fitHeight,
                          child: DataTable(

                              //sortAscending: false,
                              //sortColumnIndex: 2,
                              columns: <DataColumn>[
                          DataColumn(
                          label: Text("No",textScaleFactor: 1,),
                          numeric: false,
                          ),
                          DataColumn(
                            label: Text("Name",textScaleFactor: 1,),
                            numeric: false,
                          ),
                          DataColumn(
                            label: Text("Delay\nMinutes",textScaleFactor: 1,),
                            numeric: false,
                          ),
                      ],
                            rows: TrainDelayedList.map((t) =>
                                DataRow(cells: [
                                  DataCell(
                                    Text(t.trainno,textScaleFactor: 1,),
                                  ),
                                  DataCell(
                                      Text(t.trainname,maxLines: 3,textScaleFactor: 1,)
                                  ),
                                  DataCell(
                                      Text(t.delayatstn.toString(),textScaleFactor: 1,)
                                  ),
                                ])).toList()

                          ),
                        ))