Flutter - Making DataTable responsive according to screen orientation/size

Question

I am trying to make my data table in Flutter more responsive by adjusting the width according to screen resolution (eg: in browser, its the default width, and in phone screen, its sized smaller to fit the screen). I am unable to find anything conclusive online, and most of the flex and responsive table widgets options are only available in the Table widget in Flutter and not DataTable.

The following is a snippet of how my code is structured:

SizedBox(
          width: double.infinity,
          child: SingleChildScrollView(
            child: DataTable(
              columnSpacing: 0.0,
              columns: const [
                DataColumn(
                  label: Text(
                    "First Name",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                DataColumn(
                  label: Text(
                    "Last Name",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                DataColumn(
                  label: Text(
                    "Username",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                DataColumn(
                  label: Text(
                    "Email ID",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                DataColumn(
                  label: Text(
                    "DOB",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                DataColumn(
                  label: Text(
                    "Account Type",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                DataColumn(
                  label: Text(
                    "Actions",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                DataColumn(
                  label: Text(
                    "Posts",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ],
              rows: users
                  .map(
                    (user) => DataRow(
                      cells: <DataCell>[
                        DataCell(Text(user.first_name,
                            style: TextStyle(color: Colors.white))),
                        DataCell(Text(user.last_name,
                            style: TextStyle(color: Colors.white))),
                        DataCell(Text(user.username,
                            style: TextStyle(color: Colors.white))),
                        DataCell(Text(user.email,
                            style: TextStyle(color: Colors.white))),
                        DataCell(Text(user.date_of_birth,
                            style: TextStyle(color: Colors.white))),
                        DataCell(Text(user.account_type,
                            style: TextStyle(color: Colors.white))),
                        DataCell(
.
.
.
.

If possible I would like to continue working with DataTables for this application, as it is more suitable for the system than the Table widget.

score 1 · Answer 1 · answered Feb 17 '22 at 17:25

1

did you try with?

width: MediaQuery.of(context).size.width //to get the width of screen

it takes width as dynamic according to device

answered Feb 17 '22 at 17:25

Taqi Tahmid Tanzil

300
3
17

Could you provide a complete answer and why that will be it? As your way to measure the entire screen has no difference from double.infinity which matches the full width of the screen. – Mariano Zorrilla Feb 17 '22 at 17:49
As the above commentor mentioned, the answer is not complete, the table does not resize according to the screen orientation. – No_Name Feb 17 '22 at 18:26
as far as i get he wants "width according to screen resolution",so in reference to that, please check this : https://stackoverflow.com/questions/54489513/whats-the-difference-between-double-infinity-and-mediaquery another approach for the problem can be : https://stackoverflow.com/questions/61698700/datatable-column-width-issues – Taqi Tahmid Tanzil Feb 18 '22 at 05:18

score 1 · Answer 2 · answered May 11 '22 at 12:57

1

I had faced a similar problem a few weeks ago. The data_table_2 plugin allows me to solve this problem. Your column are more responsive according to screen resolution.

answered May 11 '22 at 12:57

Lapa Ny Aina Tanjona

1,138
1
9
19

This library worked for me. It has already abstracted a lot of the "busywork" required to make data tables responsive. – Martin Castellon Mar 31 '23 at 17:21

score 1 · Answer 3 · answered Jun 29 '22 at 06:55

1

I've wrapped the DataTable with FittedBox, Expanded and Row and it works.

Row(
  children: [
    Expanded(
      child: FittedBox(
        child: DataTable(
          columns: columns,
          rows: rows,
        ),
      ),
   ],
),

answered Jun 29 '22 at 06:55

Josep Mor

41
1
6

It works for me very well. Thanks a lot. – Kyaw Thura Jul 06 '23 at 08:45

Flutter - Making DataTable responsive according to screen orientation/size

3 Answers3