Double scroll sections in row - flutter

Question

I'm trying to achieve a scroll section containing a row which contains a list view and a details view. The goal is to have one scroll view that scroll both the list and the details view. From an UX perspective, both sections should always be seen, such as if one section is much larger than the other, the smaller section will always be seen.
I'm under the impression that this is the use case for NestedScrollView so ultimately what I'm after is something using it. I know it's possible to sync multiple controllers together programmatically, but I'm hoping for something simpler.
Like the following (this is just an example, my screen does not look anything like this):
The code below is where I got to. It throws an error that scrollController is used in multiple places. Another problem is that scrolling the left side till the end does not scroll the right side till the end.
Here is a full repro:
https://github.com/cedvdb/flutter_repros/tree/double_scroll
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) => [
SliverAppBar(
title: const Text('example'),
)
],
body: Row(
children: [
SizedBox(
width: 500,
child: ListView.builder(
itemCount: 30,
itemBuilder: (context, index) => ListTile(
title: Text('tile $index'),
),
),
),
const SizedBox(
width: 20,
),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
Container(height: 500, color: Colors.yellow),
Container(height: 500, color: Colors.orange),
Container(height: 500, color: Colors.blue),
Container(height: 500, color: Colors.yellow),
],
),
),
),
const SizedBox(
width: 20,
),
],
),
),
);
}
}

Answer 1

Try this one, it works for me.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) => [
SliverAppBar(
title: const Text('example'),
)
],
body: SingleChildScrollView (
child: Row(
crossAxisAlignment : CrossAxisAlignment.start,
children: [
SizedBox(
width: 500,
child: ListView.builder(
itemCount: 30,
shrinkWrap: true,
itemBuilder: (context, index) => ListTile(
title: Text('tile $index'),
),
),
),
const SizedBox(
width: 20,
),
Expanded(
// child: SingleChildScrollView(
child: Column(
children: [
Container(height: 500, color: Colors.yellow),
Container(height: 500, color: Colors.orange),
Container(height: 500, color: Colors.blue),
Container(height: 500, color: Colors.yellow),
],
// ),
),
),
const SizedBox(
width: 20,
),
],
),
),
),
);
}
}

Answer 2

So basically when you are using one scrollview with two scrollable widgets flutter can't decide how to draw the scrollbar. so if you disable scrollbar then your code will stop throwing error(if you are okay with no scrollbar it will scroll but no scrollbars will be displayed).
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
//this line added here!
scrollBehavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) => [
SliverAppBar(
title: const Text('example'),
)
],
body: Row(
children: [
SizedBox(
width: 500,
child: ListView.builder(
itemCount: 30,
itemBuilder: (context, index) => ListTile(
title: Text('tile $index'),
),
),
),
const SizedBox(
width: 20,
),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
Container(height: 500, color: Colors.yellow),
Container(height: 500, color: Colors.orange),
Container(height: 500, color: Colors.blue),
Container(height: 500, color: Colors.yellow),
],
),
),
),
const SizedBox(
width: 20,
),
],
),
),
);
}
}

Answer 3

What i understood is that there are two scrolls and items from one point to items in the other and you need a method to move the second one on a event (scroll) but by the example having different size lines i asume it's some kind of cursor in a array thing; if that is what you need you only have to implement the exact movement you want, the example just scrolls to the place of the line you click
import 'package:flutter/material.dart';
import 'dart:math';
void main() => runApp(const App());
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Page_Home(),
),
);
}
}
class List_Element {
String title;
String content;
final GlobalKey _key;
List_Element(
this.title,
this.content,
) : this._key = GlobalKey();
GlobalKey get_key() => _key;
}
class Page_Home extends StatefulWidget {
const Page_Home({Key? key}) : super(key: key);
#override
_Page_Home createState() => _Page_Home();
}
class _Page_Home extends State<Page_Home> {
late List<List_Element> elements;
final scroll_view = ScrollController();
double _get_heigth(key) {
final size = key.currentContext!.size;
if (size != null) {
return size.height;
} else {
return 0;
}
}
Widget build_list(BuildContext ctx) {
return SingleChildScrollView(
child: Column(
children: List<Widget>.generate(elements.length, (i) {
return InkWell(
onTap: () {
double pos = 0;
for (int e = 0; e < i; e++) {
pos += _get_heigth(elements[e].get_key());
}
scroll_view.animateTo(
pos,
duration: const Duration(seconds: 1),
curve: Curves.easeIn,
);
print("Jump $i to $pos");
},
child: Container(
margin: EdgeInsets.only(top: 10),
color: Colors.blueGrey,
width: double.infinity,
height: 30,
child: Center(child: Text("Line ${elements[i].title}")),
));
}),
),
);
}
Widget build_element_view(BuildContext ctx) {
return SingleChildScrollView(
controller: scroll_view,
child: Column(
children: List<Widget>.generate(elements.length, (i) {
return Container(
margin: EdgeInsets.only(top: 10),
color: Colors.blueGrey,
width: double.infinity,
child: Text(elements[i].content),
key: elements[i].get_key(),
);
}),
),
);
}
#override
void dispose() {
scroll_view.dispose();
super.dispose();
}
#override
Widget build(BuildContext ctx) {
Size vsize = MediaQuery.of(ctx).size;
this.elements = List<List_Element>.generate(
30,
(i) => List_Element(
i.toString(),
i.toString() * Random().nextInt(300),
));
return ConstrainedBox(
constraints: BoxConstraints.tight(vsize),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
width: vsize.width * 0.4,
height: vsize.height,
child: this.build_list(ctx),
),
SizedBox(
width: vsize.width * 0.5,
height: vsize.height,
child: this.build_element_view(ctx),
),
],
),
);
}
}

Answer 4

I could not get the behavior I wanted (and I'm not even sure it makes sens anymore) so I made 2 scroll in the row:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
ScrollController left = ScrollController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) => [
SliverAppBar.medium(
title: const Text('example'),
),
],
body: LayoutBuilder(builder: (context, constraints) {
return Row(
children: [
Container(
color: Colors.greenAccent,
height: constraints.maxHeight,
width: 400,
child: MyListView(controller: left),
),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
Container(height: 500, color: Colors.yellow),
Container(height: 500, color: Colors.orange),
Container(height: 500, color: Colors.blue),
Container(height: 500, color: Colors.yellow),
],
),
),
),
],
);
}),
),
);
}
}
class MyListView extends StatelessWidget {
final ScrollController? controller;
const MyListView({Key? key, this.controller}) : super(key: key);
#override
Widget build(BuildContext context) {
return CustomScrollView(
controller: controller,
slivers: [
SliverFixedExtentList(
itemExtent: 60,
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(
title: Text('tile $index'),
),
childCount: 30),
),
const SliverToBoxAdapter(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text('secon list'),
),
),
SliverFixedExtentList(
itemExtent: 60,
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(
title: Text('tile $index'),
),
childCount: 30,
),
),
],
);
}
}