Question 215514 in Flutter Question posted in
The official Flutter documentation can be found here.

In Flutter, horizontal scroll bar not showing in Data Table

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,
),
),
],
),
],
),
),
);
}
}

Tags:

3

Answers


  1. 0

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

    ScrollBar(
    scrollbarOrientation: ScrollbarOrientation.bottom,
)
    Login or Signup to reply.
  2. 0

    You can use adaptive_scrollbar package. It will show multiple scrollbars

    Login or Signup to reply.
  3. 0

    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')),
            ]),
          ],
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search