FLUTTER scroll multiple widget

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.

Solution 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'),
                ],
              )
            ]),
          ]),
        ));
  }
}

Solution 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.

1. 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: 
        )
       )
      );
   }
 }

2. 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),

  ],
  ),
 ),

Comments

[Farhana Naaz Ansari]

post your code so that people can help you

[Chris]

@farhana hey, i've added some codes. does that help?

[Farhana Naaz Ansari]

hey why are you taking stack, you should use Row widgets to keep your colum left or right with scraolable

[Chris]

@farhana but then i'll be scrolling the WHOLE Row. what if the scrollables are in a different Row or Column, as one of their children?

[Farhana Naaz Ansari]

as I'm understanding that you have two columns left and right both are scrollable.

[Chris]

@farhana i am trying to make something similar of this. i just oversimplify the problem to "scrolling two widgets at the same time".

[Chris]

hey! thanks for the answer. i dont think this is what im looking for. in your example, the whole stack is moving. what i wanted was, as a separate list, they can both scroll together, even if they were not put together. that way i can place these lists in any way i want where convenient, but still scroll together because they will share information.