Manage scrolling for SingleChildScrollView inside a SingleChildScrollView - flutter?

Question

I have a parent SCS View(SingleChildScrollView) and a child SCS View. Inside the child SCS View there is a Data Table, and the Data Table starts at around bottom quarter of the screen.

Now, I want to scroll the parent SCS View when the user scrolls to the top of Data Table inside child SCS View.

This works naturally in web, but does not work in iOS or anroid. I tried using same Scrollcontroller for both parent & child SCS View and played around with ScrollPhysics. But nothing seem to work. Can you please help me with a solution.

Here is the code:

    import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Report'),
        ),
      ),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final ScrollController scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Text('Some Data', style: TextStyle(fontSize: 30)),
          Text('Some Data', style: TextStyle(fontSize: 30)),
          Text('Some Data', style: TextStyle(fontSize: 30)),
          Text('Some Data', style: TextStyle(fontSize: 30)),
          Text('Some Data', style: TextStyle(fontSize: 30)),
          Text('Some Data', style: TextStyle(fontSize: 30)),
          ConstrainedBox(
            constraints: BoxConstraints(
              maxHeight: 400,
            ),
            child: Scrollbar(
              controller: scrollController,
              child: SingleChildScrollView(
                controller: scrollController,
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: DataTable(
                    columns: [
                      DataColumn(label: Text('Sl. No.')),
                      DataColumn(label: Text('Resource Name')),
                      DataColumn(label: Text('Score at 1')),
                      DataColumn(label: Text('Score at 2')),
                      DataColumn(label: Text('Final Score')),
                    ],
                    rows: [
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Thank you.

can you share your code ? – Jahidul Islam Aug 29 '21 at 06:34 — Jahidul Islam, Aug 29 '21 at 06:34
Added code. Please check it once. – ar3 Aug 29 '21 at 06:53 — ar3, Aug 29 '21 at 06:53

yellowgray · Accepted Answer · 2021-09-15T01:41:08.503

You can use NotificationListener to listen OverscrollNotification to detect the upper boundary hit of the nested list and scroll to the outer Scrollview by controlling it.

I simplify your problem to a example code below:

class MyNestedListView extends StatefulWidget {
  const MyNestedListView({Key? key}) : super(key: key);

  @override
  _MyNestedListViewState createState() => _MyNestedListViewState();
}

class _MyNestedListViewState extends State<MyNestedListView> {
  final _controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return ListView(
      controller: _controller,
      children: [
        Placeholder(fallbackHeight: 400),
        Placeholder(fallbackHeight: 400),
        Placeholder(fallbackHeight: 400),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 20),
          height: 400,
          child: NotificationListener(
            onNotification: (notification) {
              // disable overscroll indicator
              // if (notification is OverscrollIndicatorNotification) {
              //   if (notification.leading) {
              //     notification.disallowGlow();
              //   }
              // }
              if (notification is OverscrollNotification) {
                final dy = notification.overscroll;
                if (dy < 0) {
                  _controller.position.jumpTo(_controller.offset + dy);
                }
              }
              return true;
            },
            child: ListView(
              children: [
                Placeholder(fallbackHeight: 200),
                Placeholder(fallbackHeight: 200),
                Placeholder(fallbackHeight: 200),
                Placeholder(fallbackHeight: 200),
              ],
            ),
          ),
        )
      ],
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}

Jahidul Islam · Answer 2 · 2021-08-29T07:45:18.027

Edited

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:so_test/screen/video_player.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  UniqueKey _key = UniqueKey();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Test(),
    );
  }
}

class Test extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TestState();
  }
}

class _TestState extends State<Test> {
  final ScrollController scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          shrinkWrap: true,
          physics: ScrollPhysics(),
          children: [
            Text('Some Data', style: TextStyle(fontSize: 30)),
            Text('Some Data', style: TextStyle(fontSize: 30)),
            Text('Some Data', style: TextStyle(fontSize: 30)),
            Text('Some Data', style: TextStyle(fontSize: 30)),
            Text('Some Data', style: TextStyle(fontSize: 30)),
            Text('Some Data', style: TextStyle(fontSize: 30)),
            Text('Some Data', style: TextStyle(fontSize: 30)),
            Text('Some Data', style: TextStyle(fontSize: 30)),
            Text('Some Data', style: TextStyle(fontSize: 30)),
            Text('Some Data', style: TextStyle(fontSize: 30)),
            Text('Some Data', style: TextStyle(fontSize: 30)),
            Text('Some Data', style: TextStyle(fontSize: 30)),
            Scrollbar(
              controller: scrollController,
              child: SingleChildScrollView(
                controller: scrollController,
                physics: NeverScrollableScrollPhysics(),
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: DataTable(
                    columns: [
                      DataColumn(label: Text('Sl. No.')),
                      DataColumn(label: Text('Resource Name')),
                      DataColumn(label: Text('Score at 1')),
                      DataColumn(label: Text('Score at 2')),
                      DataColumn(label: Text('Final Score')),
                    ],
                    rows: [
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Text('1')),
                          DataCell(Text('Person 1')),
                          DataCell(Text('5')),
                          DataCell(Text('2')),
                          DataCell(Text('8')),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

When I reach at the top of data table and keep scrolling, the List View scrolling does not start. There is no error, but the functioning is same with SCS View. — ar3, Aug 29 '21 at 07:45
Oh I think you removed the Constrained Box!! Basically, I wanted the Data Table to only take max height of 400 so I added this. If this was not required, then I would not have encountered this requirement at all in first place. Also, physics: NeverScrollableScrollPhysics(), , this stops horizontal scrolling!! — ar3, Aug 29 '21 at 07:49
just remove your constraintBox height, this not stop horizontal scrolling. i tried to keep your height but it's not work — Jahidul Islam, Aug 29 '21 at 07:54
Yes that's the question I want the solution for: keep height and also make the scrolling work, which works on web. If I did not want to keep height, I do not have this problem at all. But thanks for the quick reverts -:) — ar3, Aug 29 '21 at 08:02

Manage scrolling for SingleChildScrollView inside a SingleChildScrollView - flutter?

2 Answers2