Flutter PaginatedDataTable causing overflow when browser is resized

Question

I have a webpage that is enclosed in a List with Scrollbar. The body is a SideNavigationBar and the content. The content portion is PagingatedDataTable. When I resize the browser, I see that scroll works. However, the PaginatedDataTable always throw overflow error and does not follow the scrolling of the parent. How should I layout my code to force include the PaginatedDataTable in the scroll area.

import 'package:edar_app/cubit/auth/auth_cubit.dart';
import 'package:edar_app/locator.dart';

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:side_navigation/side_navigation.dart';

void main() {
  setupLocator();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // scrollBehavior: MyCustomScrollBehavior(),
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),

      home: BlocProvider(
        create: (context) => AuthCubit(),
        child: HomePageScroll(),
      ),
    );
  }
}

class HomePageScroll extends StatefulWidget {
  HomePageScroll();

  @override
  _HomePageScrollState createState() => _HomePageScrollState();
}

class _HomePageScrollState extends State<HomePageScroll> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    // });

    List<DataColumn> dataColumns = [
      DataColumn(label: Text("Col 1")),
      DataColumn(label: Text("Col 2")),
    ];
    // Future.delayed(const Duration(milliseconds: 3000), () {
    var dataTable = PaginatedDataTable(
      columns: dataColumns,
      source: DataSource(),
      showCheckboxColumn: false,
      dataRowHeight: 40,
      columnSpacing: 40,
      horizontalMargin: 10,
      rowsPerPage: 10,
      showFirstLastButtons: true,
    );

    List<SideNavigationBarItem> menuList = [
      SideNavigationBarItem(icon: Icons.home, label: "Home"),
    ];

    List content = [
      SizedBox(
        height: MediaQuery.of(context).size.height,
        child: dataTable,
      )
    ];
    return MaterialApp(
      home: Scaffold(
        body: Scrollbar(
          child: ListView(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            children: [
              ConstrainedBox(
                constraints: BoxConstraints(
                  maxWidth: MediaQuery.of(context).size.width,
                  maxHeight: MediaQuery.of(context).size.height,
                ),
                child: Row(
                  children: [
                    SideNavigationBar(
                      // header: SideNavigationBarHeader(
                      //   title: Text(""),
                      //   subtitle: Text(""),
                      //   image: Column(
                      //       mainAxisAlignment: MainAxisAlignment.start,
                      //       crossAxisAlignment: CrossAxisAlignment.start,
                      //       children: [
                      //         Image.asset("/images/edar_logo.jpg"),
                      //         // Divider(),
                      //         // Text("login"),
                      //       ]),
                      // ),
                      theme: SideNavigationBarTheme(
                        backgroundColor: Colors.white,
                        togglerTheme: SideNavigationBarTogglerTheme.standard(),
                        itemTheme: SideNavigationBarItemTheme(
                          unselectedItemColor: Colors.grey[900],
                        ),
                        dividerTheme: SideNavigationBarDividerTheme.standard(),
                      ),
                      selectedIndex: selectedIndex,
                      items: menuList,
                      toggler: SideBarToggler(
                          expandIcon: Icons.keyboard_arrow_right,
                          shrinkIcon: Icons.keyboard_arrow_left,
                          onToggle: () {
                            print('Toggle');
                          }),
                      onTap: (int value) {},
                    ),
                    Expanded(
                      child: content[selectedIndex],
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class DataSource extends DataTableSource {
  @override
  DataRow? getRow(int index) {
    // TODO: implement getRow
    DataRow.byIndex(cells: [
      DataCell(Text("text 1")),
      DataCell(Text("text 2")),
    ]);
  }

  @override
  // TODO: implement isRowCountApproximate
  bool get isRowCountApproximate => false;

  @override
  // TODO: implement rowCount
  int get rowCount => 2;

  @override
  // TODO: implement selectedRowCount
  int get selectedRowCount => 0;
}

Before resizing up to PaginatedDataTable

After resizing up to PaginatedDataTable

have you tried setting shrinkWrap to true in your listView? – Kimiya Zargari Oct 30 '22 at 07:32 — Kimiya Zargari, Oct 30 '22 at 07:32
Yes, still got the overflow issue – NothingBox Oct 30 '22 at 09:42 — NothingBox, Oct 30 '22 at 09:42
It would be helpful if you provided screenshots – Kimiya Zargari Oct 30 '22 at 12:58 — Kimiya Zargari, Oct 30 '22 at 12:58
I added the images and complete runnable codes. – NothingBox Oct 30 '22 at 14:50 — NothingBox, Oct 30 '22 at 14:50

Kimiya Zargari · Accepted Answer · 2022-10-31T09:23:23.577

It's because you've added sizedBox with desktop height for your content. In fact, when you call MediaQuery.of(context).size.height, it returns your desktop height, not your browser height and that's why you experience the issue when you resize your browser. It would also be better if you removed your side navigation from inside your list view so scrolling on your page wouldn't scroll on your side navigation. I've also removed physics: const NeverScrollableScrollPhysics() from your listView so it would be scrollable. Below is the code (I've removed your bloc so I could test it, you can add it again as it was):


import 'package:flutter/material.dart';

import 'package:side_navigation/side_navigation.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // scrollBehavior: MyCustomScrollBehavior(),
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),

      home: HomePageScroll(),
    );
  }
}

class HomePageScroll extends StatefulWidget {
  HomePageScroll();

  @override
  _HomePageScrollState createState() => _HomePageScrollState();
}

class _HomePageScrollState extends State<HomePageScroll> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    // });
    List<SideNavigationBarItem> menuList = [
      SideNavigationBarItem(icon: Icons.home, label: "Home"),
    ];

    List<DataColumn> dataColumns = [
      DataColumn(label: Text("Col 1")),
      DataColumn(label: Text("Col 2")),
    ];
    // Future.delayed(const Duration(milliseconds: 3000), () {
    var dataTable = PaginatedDataTable(
      columns: dataColumns,
      source: DataSource(),
      showCheckboxColumn: false,
      dataRowHeight: 40,
      columnSpacing: 40,
      horizontalMargin: 10,
      rowsPerPage: 10,
      showFirstLastButtons: true,
    );

    List content = [dataTable];
    return MaterialApp(
      home: Scaffold(
        body: Row(
          children: [
            Container(
              width: 200,
              child: SideNavigationBar(
                // header: SideNavigationBarHeader(
                //   title: Text(""),
                //   subtitle: Text(""),
                //   image: Column(
                //       mainAxisAlignment: MainAxisAlignment.start,
                //       crossAxisAlignment: CrossAxisAlignment.start,
                //       children: [
                //         Image.asset("/images/edar_logo.jpg"),
                //         // Divider(),
                //         // Text("login"),
                //       ]),
                // ),
                theme: SideNavigationBarTheme(
                  backgroundColor: Colors.white,
                  togglerTheme: SideNavigationBarTogglerTheme.standard(),
                  itemTheme: SideNavigationBarItemTheme(
                    unselectedItemColor: Colors.grey[900],
                  ),
                  dividerTheme: SideNavigationBarDividerTheme.standard(),
                ),
                selectedIndex: selectedIndex,
                items: menuList,
                toggler: SideBarToggler(
                    expandIcon: Icons.keyboard_arrow_right,
                    shrinkIcon: Icons.keyboard_arrow_left,
                    onToggle: () {
                      print('Toggle');
                    }),
                onTap: (int value) {},
              ),
            ),
            Expanded(
              child: Scrollbar(
                child: ConstrainedBox(
                  constraints: BoxConstraints(
                    maxHeight: MediaQuery.of(context).size.height,
                  ),
                  child: ListView(
                    shrinkWrap: true,
                    children: [content[selectedIndex]],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class DataSource extends DataTableSource {
  @override
  DataRow? getRow(int index) {
    // TODO: implement getRow
    DataRow.byIndex(cells: [
      DataCell(Text("text 1")),
      DataCell(Text("text 2")),
    ]);
  }

  @override
  // TODO: implement isRowCountApproximate
  bool get isRowCountApproximate => false;

  @override
  // TODO: implement rowCount
  int get rowCount => 2;

  @override
  // TODO: implement selectedRowCount
  int get selectedRowCount => 0;
}

Hope this solves your issue.

Thanks! It did solve the issue. I still need to grasp my head around on these widgets — NothingBox, Oct 31 '22 at 10:47

Flutter PaginatedDataTable causing overflow when browser is resized

1 Answers1