How to Scroll two Horizontal ListView at the same time?

Question

1)I have three ListView.builder, one inside questionsListWidget which scrolls horizontally orange in color.

2)Second list i have in studentsListWidget which scrolls vertically which in blue(Network image) and yellow(ListView.builder).

3)Now my requirement is when i scroll orange part along with yellow part should get scrolled at same time Basically what i want to happen is:

a) studentsListWidget() should Scroll vertically keeping questionsListWidget() fixed.

b) If i scroll questionsListWidget() orange part, ListView in yellow part should get scrolled at a same time. The above all i have tried in my code, i am a newbie in flutter layout Any suggestion or idea how do i achieve these in flutter layout??

sample UI

import 'package:flutter/material.dart';

class TeacherReviewQuizSession extends StatefulWidget {
  @override
  TeacherReviewQuizSessionState createState() {
    return TeacherReviewQuizSessionState();
  }
}

class TeacherReviewQuizSessionState extends State<TeacherReviewQuizSession> {
  ScrollController _scrollController1, _scrollController2;
  int _itemCount = 50;

  @override
  void initState() {
    super.initState();
    _scrollController1 = ScrollController();
    _scrollController1.addListener(() {
      final offset = _itemCount *
          _scrollController1.offset /
          (_scrollController1.position.maxScrollExtent +
              _scrollController1.position.viewportDimension -
              8.0);
      setState(() {
        _scrollController2.animateTo(offset * 50,
            curve: Curves.ease, duration: Duration(milliseconds: 500));
      });
    });

    _scrollController2 = ScrollController();
    _scrollController2.addListener(() {
      final offset = _itemCount *
          _scrollController2.offset /
          (_scrollController2.position.maxScrollExtent +
              _scrollController2.position.viewportDimension -
              8.0);
      setState(() {
        _scrollController1.animateTo(offset * 0,
            curve: Curves.ease, duration: Duration(milliseconds: 500));
      });
    });
  }

  Widget questionsListWidget() {
    return Row(
      children: <Widget>[
        new Expanded(
          flex: 10,
          child: new Row(
            children: <Widget>[
              new Expanded(
                flex: 2,
                child: new Container(
                  height: 50.0,
                  color: Colors.green,
                  child: new Container(
                      margin: EdgeInsets.all(15.0),
                      child: new Text("Players",
                          style: new TextStyle(
                              fontSize: 15.0, fontWeight: FontWeight.bold))),
                ),
              ),
              new Expanded(
                flex: 8,
                child: new Container(
                    height: 50.0,
                    color: Colors.orange,
                    child: new ListView.builder(
                        controller: _scrollController1, //Question controller
                        itemCount: 50,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (context, index) {
                          return horizontalList(index);
                        })),
              )
            ],
          ),
        )
      ],
    );
  }

  Widget studentsListWidget() {
    return new ListView.builder(
      itemCount: 50,
      itemBuilder: (BuildContext context, int index) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Row(
              children: <Widget>[
                new Expanded(
                  flex: 10,
                  child: new Row(
                    children: <Widget>[
                      new Expanded(
                        flex: 2,
                        child: new Container(
                          height: 70.0,
                          color: Colors.green,
                          child: CircleAvatar(
                            backgroundImage: NetworkImage(''),
                          ),
                        ),
                      ),
                      new Divider(
                        height: 5.0,
                      ),
                      new Expanded(
                        flex: 8,
                        child: new Container(
                          height: 70.0,
                          color: Colors.yellow,
                          child: new ListView.builder(
                              itemCount: 50,
                              scrollDirection: Axis.horizontal,
                              itemBuilder: (context, index) {
                                return horizontalList(index);
                              }),
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
            new Divider(
              height: 5.0,
              color: Colors.black,
            )
          ],
        );
      },
    );
  }

  Widget horizontalList(int index) {
    return new Container(
      margin: EdgeInsets.all(5.0),
      height: 50.0,
      width: 50.0,
      decoration: new BoxDecoration(
        border: new Border.all(color: Colors.white, width: 2.0),
        shape: BoxShape.rectangle,
        borderRadius: new BorderRadius.circular(10.0),
      ),
      child: new Center(
        child: new Text(
          "$index",
          style: new TextStyle(fontSize: 18.0, color: Colors.white),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: Text(
          'Overview',
          style: Theme.of(context).textTheme.headline,
        ),
        centerTitle: true,
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 10,
            child: Column(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: questionsListWidget(),
                ),
                Expanded(
                  flex: 9,
                  child: studentsListWidget(),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

Why don't you simply put both items in a `ListTile` and a single list builder? — nonybrighto, Apr 03 '19 at 09:06
@nonybrighto Then how would i achieve both horizontal and vertical scrolling at same time...can u be please help me with some code snippet what u are trying to say?? — Rajesh Patil, Apr 03 '19 at 09:37
I think your solution will need to use `NestedScrollView`: https://docs.flutter.io/flutter/widgets/NestedScrollView-class.html — Felipe César, Apr 04 '19 at 01:13

Marco Galetta · Answer 1 · 2019-12-04T16:49:39.643

I think that you can use TrackingScrollController,

 PageView(
  children: <Widget>[
    ListView(
      controller: _trackingScrollController,
      children: List<Widget>.generate(100, (int i) => Text('page 0 item $i')).toList(),
    ),
    ListView(
      controller: _trackingScrollController,
      children: List<Widget>.generate(200, (int i) => Text('page 1 item $i')).toList(),
    ),
    ListView(
     controller: _trackingScrollController,
     children: List<Widget>.generate(300, (int i) => Text('page 2 item $i')).toList(),
    ),
  ],
)

take a look here https://api.flutter.dev/flutter/widgets/TrackingScrollController-class.html

How to Scroll two Horizontal ListView at the same time?

1 Answers1