How to apply both horizontal and vertical scroll in `DataTable` using `SingleChildScrollView` widget in flutter?

user_11298133 0
Viewed 2671

I have a data table that it horizontally and vertically exceeds screen size and I need to use both vertical and horizontal scroll. I used this code:

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: SingleChildScrollView(
    scrollDirection: Axis.vertical,
    child: DataTable(
      columns: [
        DataColumn(label: Text('Vis_Code')),
        DataColumn(label: Text('Vis_Name')),
        DataColumn(label: Text('ID_Voucher')),
        DataColumn(label: Text('Voucher_Type_Title')),
        DataColumn(label: Text('Stock_Title')),
        DataColumn(label: Text('Date_Voucher')),
        DataColumn(label: Text('Customer_Name')),
        DataColumn(label: Text('Good_Title')),
        DataColumn(label: Text('Meghdar_F')),
        DataColumn(label: Text('Price_Kol_F')),
      ],
      rows:
          littlevouchers element
              .map(
                ((element) => DataRow(
                  cells: <DataCell>[
                    DataCell(Text(element["Vis_Code"])), 
                    DataCell(Text(element["Vis_Name"])),
                    DataCell(Text(element["ID_Voucher"])),
                    DataCell(Text(element["Voucher_Type_Title"])),
                    DataCell(Text(element["Stock_Title"])),
                    DataCell(Text(element["Date_Voucher"])),
                    DataCell(Text(element["Customer_Name"])),
                    DataCell(Text(element["Good_Title"])),
                    DataCell(Text(element["Meghdar_F"])),
                    DataCell(Text(element["Price_Kol_F"])),
                  ],
                )),
              )
              .toList(),
    ),
  ),
),

But flutter just applied horizontal scroll.

In addition, the DataTable overflowed the bottom of screen. and raises below error:

A RenderFlex overflowed by 30 pixels on the bottom.

Do you have any idea?

flutter
1 Answers

Try this one it is working you can replace the image widget with your widgets:

SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Image.asset("assets/Home.jpeg",)
  )
),
user_177263750
Related