Question 127435 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – 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.

Tags:

3

Answers


  1. 0

    did you try with?

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

    it takes width as dynamic according to device

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

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

    Row(
  children: [
    Expanded(
      child: FittedBox(
        child: DataTable(
          columns: columns,
          rows: rows,
        ),
      ),
   ],
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search