In Flutter, horizontal scroll bar not showing in Data Table

Question

I am using data table with both vertical and horizontal scrollbar but vertical scrollbar indicator is showing but horizontal scrollbar indicator down not shows here is my code

class NewAppointments extends StatelessWidget {

const NewAppointments({super.key});

@override Widget build(BuildContext context) { return SingleChildScrollView( physics: const AlwaysScrollableScrollPhysics(), scrollDirection: Axis.vertical, child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: DataTable( columns: [ DataColumn( label: Expanded( child: Text( 'Date', style: fontStyleSemibold, ), ), ), DataColumn( label: Expanded( child: Text( 'Patient Name', style: fontStyleSemibold, ), ), ), DataColumn( label: Expanded( child: Text( 'Contact', style: fontStyleSemibold, ), ), ), DataColumn( label: Expanded( child: Text( 'Doctor', style: fontStyleSemibold, ), ), ) ], rows: [ DataRow( cells: [ DataCell( Text( '12-04-2023', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), DataCell( Row( children: [ CircularImage( height: 24, width: 24, imageUrl: 'assests/images/icon_person.png', onClick: () {}), const SizedBox( width: 4, ), Text( 'Muhammad Hasnain', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ], ), ), DataCell( Text( '03028983053', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), DataCell( Text( 'Dr Hasnain', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), ], ), DataRow( cells: [ DataCell( Text( '12-04-2023', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), DataCell( Row( children: [ CircularImage( height: 24, width: 24, imageUrl: 'assests/images/icon_person.png', onClick: () {}), const SizedBox( width: 4, ), Text( 'Muhammad Hasnain', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ], ), ), DataCell( Text( '03028983053', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), DataCell( Text( 'Dr Hasnain', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), ], ), DataRow( cells: [ DataCell( Text( '12-04-2023', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), DataCell( Row( children: [ CircularImage( height: 24, width: 24, imageUrl: 'assests/images/icon_person.png', onClick: () {}), const SizedBox( width: 4, ), Text( 'Muhammad Hasnain', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ], ), ), DataCell( Text( '03028983053', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), DataCell( Text( 'Dr Hasnain', maxLines: 1, style: fontStyleRegular.copyWith(fontSize: 14), overflow: TextOverflow.ellipsis, ), ), ], ), DataRow( cells: [ DataCell( Text( '12-04-2023', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), DataCell( Row( children: [ CircularImage( height: 24, width: 24, imageUrl: 'assests/images/icon_person.png', onClick: () {}), const SizedBox( width: 4, ), Text( 'Muhammad Hasnain', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ], ), ), DataCell( Text( '03028983053', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), DataCell( Text( 'Dr Hasnain', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), ], ), DataRow( cells: [ DataCell( Text( '12-04-2023', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), DataCell( Row( children: [ CircularImage( height: 24, width: 24, imageUrl: 'assests/images/icon_person.png', onClick: () {}), const SizedBox( width: 4, ), Text( 'Muhammad Hasnain', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ], ), ), DataCell( Text( '03028983053', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), DataCell( Text( 'Dr Hasnain', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), ], ), DataRow( cells: [ DataCell( Text( '12-04-2023', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), DataCell( Row( children: [ CircularImage( height: 24, width: 24, imageUrl: 'assests/images/icon_person.png', onClick: () {}), const SizedBox( width: 4, ), Text( 'Muhammad Hasnain', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ], ), ), DataCell( Text( '03028983053', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), DataCell( Text( 'Dr Hasnain', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), ], ), DataRow( cells: [ DataCell( Text( '12-04-2023', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), DataCell( Row( children: [ CircularImage( height: 24, width: 24, imageUrl: 'assests/images/icon_person.png', onClick: () {}), const SizedBox( width: 4, ), Text( 'Muhammad Hasnain', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ], ), ), DataCell( Text( '03028983053', maxLines: 1, style: fontStyleRegular.copyWith(fontSize: 14), overflow: TextOverflow.ellipsis, ), ), DataCell( Text( 'Dr Hasnain', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), ], ), DataRow( cells: [ DataCell( Text( '12-04-2023', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), DataCell( Row( children: [ CircularImage( height: 24, width: 24, imageUrl: 'assests/images/icon_person.png', onClick: () {}), const SizedBox( width: 4, ), Text( 'Muhammad Hasnain', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ], ), ), DataCell( Text( '03028983053', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), DataCell( Text( 'Dr Hasnain', style: fontStyleRegular.copyWith(fontSize: 14), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), ], ), ], ), ), ); } }

https://stackoverflow.com/a/72734055/10885244 This answer have solved my problem — Hasnain Bhatti, Jul 25 '23 at 14:05

score 1 · Answer 1 · answered Jul 25 '23 at 11:35

1

You can use adaptive_scrollbar package. It will show multiple scrollbars

answered Jul 25 '23 at 11:35

Moony-Stary

451
10

score 0 · Answer 2 · answered Jul 25 '23 at 11:08

0

Wrap your ScrollView with a ScrolBar and give the direction you want to show the scrolll bar.

ScrollBar(
    scrollbarOrientation: ScrollbarOrientation.bottom,
)

answered Jul 25 '23 at 11:08

Aakash

33
5

It only shows horizontal bar when I scroll horizontally at the end then scroll down vertically then it shows vertical var I want to show bot horizontal and vertical bars at the same time – Hasnain Bhatti Jul 25 '23 at 13:52
add `thumbVisibility:true` parameter in both scroll bar – Aakash Jul 25 '23 at 15:35

score 0 · Answer 3 · answered Jul 25 '23 at 11:38

Try this demo :

import 'package:flutter/material.dart';

class horizontalScroll extends StatefulWidget {
  const horizontalScroll({super.key});

  @override
  State<horizontalScroll> createState() => _horizontalScrollState();
}

class _horizontalScrollState extends State<horizontalScroll> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: DataTable(
          columns: [
            DataColumn(label: Text('Column 1')),
            DataColumn(label: Text('Column 2')),
            DataColumn(label: Text('Column 3')),
            DataColumn(label: Text('Column 1')),
            DataColumn(label: Text('Column 2')),
            DataColumn(label: Text('Column 3')),
          ],
          rows: [
            DataRow(cells: [
              DataCell(Text('Cell 1')),
              DataCell(Text('Cell 2')),
              DataCell(Text('Cell 3')),
              DataCell(Text('Cell 1')),
              DataCell(Text('Cell 2')),
              DataCell(Text('Cell 3')),
            ]),
          ],
        ),
      ),
    );
  }
}

In Flutter, horizontal scroll bar not showing in Data Table

3 Answers3