'Flutter - Making DataTable responsive according to screen orientation/size

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.

Solution 1:^[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

Solution 2:^[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Taqi Tahmid Tanzil
Solution 2	Lapa Ny Aina Tanjona

'Flutter - Making DataTable responsive according to screen orientation/size

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]