Flutter list view with multiple scroll direction

Question

I have some kind of schedule table with hours by days

  Widget _buildSchedule(ScheduleLoaded state) {
    final List<Widget> days = state.range.days.map((DateTime day) {
      return Column(
        children:
          _buildTimeSlots(day, state.timeSlots.toList()),

      );
    }).toList();

    return ListView( scrollDirection: Axis.horizontal, children: days);
  }

Now I'm trying to make it scrollable by verticale as well (separately by day or all screen)

  Widget _buildSchedule(ScheduleLoaded state) {
    final List<Widget> days = state.range.days.map((DateTime day) {
      return ListView(
        shrinkWrap: true,
        physics: ClampingScrollPhysics(),
        children: _buildTimeSlots(day, state.timeSlots.toList())
      );
    }).toList();

    return ListView( scrollDirection: Axis.horizontal, children: days);
  }

According to related answers on SO nested ListView with shrinkWrap and ClampingScrollPhysics should work, but the second version can't be rendered with error 'constraints.hasBoundedWidth': is not true.

Answer 1

Here's how you can scroll in both directions using a SingleChildScrollView,

class MultiDirectionalScrollView extends StatefulWidget {
  const MultiDirectionalScrollView({Key? key}) : super(key: key);
  @override
  _MultiDirectionalScrollViewState createState() =>
      _MultiDirectionalScrollViewState();
}

class _MultiDirectionalScrollViewState
    extends State<MultiDirectionalScrollView> {
  Widget cell(int rowX, int colY) {
    return Container(
        width: 100,
        height: 100,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            border:
                Border.all(color: Colors.grey.withOpacity(0.45), width: 1.0)),
        child: Text('row $rowX\ncol $colY'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('multi Direction scroll'),
      ),
      body: InteractiveViewer( // Interactive viewer can be removed
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Column(
              children: List.generate(
                  100,
                  (indexX) => Row(
                      children: List.generate(
                          100, (indexY) => cell(indexX, indexY)))),
            ),
          ),
        ),
      ),
    );
  }
}

Heres a dartpad sample to try it out.

Output

Answer 2

Code below gives what you need if your time slots have fixed width. Correct me if i misunderstood what you need.

Widget _buildSchedule() {
        return ListView(
            scrollDirection: Axis.horizontal,
            children: List<int>.generate(10, (i) => i).map((i) {
                return Container(
                    width: 200.0,
                  child: ListView(
                      //shrinkWrap: true,
                      //physics: ClampingScrollPhysics(),
                      scrollDirection: Axis.vertical,
                      children: List<int>.generate(Random().nextInt(20) + 1, (i) => i).map((j) {
                          return Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                  color: Colors.grey,
                                  padding: const EdgeInsets.all(8.0),
                                  child: Text(
                                      "$j item of $i row"
                                  )
                              ),
                          );
                      }).toList()
                  ),
                );
            }).toList()
        );
    }