How to add horizontal scroll in paginated Data Table in flutter web

user_12554339 0
Viewed 1731

I have used Paginated Data Table in flutter web. On smaller screen, the table adjust it's width but hides the data column, I want to scroll the Data table horizontally, so that I am able to go through the whole data columns, added in the Paginated Data Table. (don't want to use any package)

Thanks in advance

Here is my code

SingleChildScrollView(
      child: Container(
        padding: EdgeInsets.all(10),
        color: AppColors.grey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
               CustomIconButton(
                buttonText: "Add School",
                onTap: () {}
              ),
        
            SizedBox(height: 15),

            PaginatedDataTable(
              source: _schoolData,
              dragStartBehavior: DragStartBehavior.start,

              header: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(20),
                    child: CustomText(
                      text: "School Overview",
                      fontSize: 20,
                    ),
                  ),
                  Divider(height: 0),
                ],
              ),
              columns:  [
                _createDataColumn("ID"),
                _createDataColumn("Name"),
                _createDataColumn("User Name"),
                _createDataColumn("Email"),
                _createDataColumn("City"),
                _createDataColumn("Country"),
                _createDataColumn("Grading"),
                _createDataColumn("Archive"),
                _createDataColumn("Education Level"),
                _createDataColumn(""),
              ],
              columnSpacing: 100,
              horizontalMargin: 10,
              rowsPerPage: 8,
              showCheckboxColumn: false,
              dataRowHeight: 70,
              arrowHeadColor: AppColors.darkBlue,

            ),
          ],
        ),
      ),
    );
dart flutter scroll user-interface
2 Answers

On web You have to add custom MaterialScrollBehavior and call inside MaterialApp which will be help you to enable scroll in web.

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

main.dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: MyCustomScrollBehavior(), // <== add here
      title: 'Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Home Page'),
    );
  }
}
user_119387290

put SingleChildScrollView inside SingleChildScrollView with different scrollDirection for example:

SingleChildScrollView(
            scrollDirection : Axis.vertical
            child: Column(
              children: [
                SingleChildScrollView(
                  scrollDirection : Axis.horizontal,
                  child: Text(''),
                ),
                SingleChildScrollView(
                  scrollDirection : Axis.horizontal,
                  child: Text(''),
                ),
                SingleChildScrollView(
                  scrollDirection : Axis.horizontal,
                  child: Text(''),
                ),
              ],
            ),

          ),
user_148148780
Related