Two direction scrolling in data table flutter

Question

I made a DataTable in flutter and it has about 10 columns and that's more than what the screen can handle so I wrapped the DataTable inside a SingleChildScrollView widget and this solution worked fine until the rows inside the DataTable grew up and exceeded the screen height and I couldn't scroll down because of the scroll direction is set to horizontal in the SingleChildScrollView widget! And as a temporary solution, I wrapped the DataTable inside a fittedBox inside the SingleChildScrollView but this doesn't solve the whole problem and still, there is some responsibility issues. What I need is a way to make the DataTable scrollable in both directions horizontally and vertically.

This is my code

 @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(16),
      child: Card(
        child: Container(
          padding: const EdgeInsets.all(16),
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: FutureBuilder(
              future: getCategories(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                } else {
                  return FittedBox(
                    child: DataTable(
                      headingRowColor: MaterialStateProperty.resolveWith(
                          (states) => Colors.grey.shade900),
                      columns: _columns,
                      rows: _rows,
                    ),
                  );
                }
              },
            ),
          ),
        ),
      ),
    );
  }

Answer 1

The easiest solution I know, is to wrap the SingleChildScrollView in a second SingleChildScrollView.

https://stackoverflow.com/a/57539405/1151983

But there are also other approaches:

https://stackoverflow.com/a/63546017/1151983