FLUTTER scroll multiple widget - scroll

Question

if i have two (or more) scrollable widgets (say, SingleChildScrollView),
how do i make them BOTH scroll at the same time?
because i will be Stacking them on top of each other,
so one is covered by the other's Container.
i'm fairly new, so i dont have a lot of option right now.
i tried ScrollController but its not working.
i have no idea how to properly implement it in my codes.
also, please attach a simple code example if possible.
Here's what i tried:
class _MyHomePageState extends State<MyHomePage> {
final ScrollController _mycontroller = new ScrollController();
#override
Widget build(BuildContext context) {
body:
Container(
height: 100,
child:
Stack( children: <Widget>[
SingleChildScrollView(
controller: _mycontroller,
child: Column( children: <Widget>[
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
],)
),
SingleChildScrollView(
controller: _mycontroller,
child: Column(children: <Widget>[
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
],)
),
])
)
}
}
i want both to scroll together if i scroll either one.
but they still scroll independently even if they have the same controller.
im not sure if im using controller correctly.
please advise.

Answer 1

Try This code both the Column Scroll at same time use can use only one controller to scroll the Both Column.
class _ConfirmEmailState extends State<ConfirmEmail> {
final ScrollController _mycontroller = new ScrollController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("hello"),
),
body: Container(
height: 100,
child: ListView(children: <Widget>[
Stack(children: <Widget>[
SingleChildScrollView(
controller: _mycontroller,
child: Column(
children: <Widget>[
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
Text('LEFT '),
],
)),
Column(
children: <Widget>[
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
Text(' RIGHT'),
],
)
]),
]),
));
}
}

Answer 2

In flutter there are 11 different types of widgets available to achieve scrolling functionality with a different task. To create a simple vertical ScrollView which can contain a different type of widgets with different behavior we would use SingleChildScrollView widget. This widget can show multiple widgets inside it.
Create Scaffold widget -> Safe Area widget in widget build area
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child:
)
)
);
}
}
Create SingleChildScrollView widget in Safe Area widget. Now we would make a Column widget inside SingleChildScrollView and put all our multiple widgets inside Column widget. We are creating multiple container widget and image widgets inside SingleChildScrollView. The all will scroll easily here.
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
color: Colors.green, // Yellow
height: 120.0,
),
Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg',
width: 300, height: 200, fit: BoxFit.contain),
Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png',
width: 200, fit: BoxFit.contain),
Container(
color: Colors.pink, // Yellow
height: 120.0,
),
Text('Some Sample Text - 1', style: TextStyle(fontSize: 28)),
Text('Some Sample Text - 2', style: TextStyle(fontSize: 28)),
Text('Some Sample Text - 3', style: TextStyle(fontSize: 28)),
Container(
color: Colors.redAccent, // Yellow
height: 120.0,
),
Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg',
width: 300, height: 200, fit: BoxFit.contain),
],
),
),