How to do a stacked widget with a scrollable widget and non scrollable widget

Question

I want to do a screen where there is a scrollable widget and a non-scrollable widget where the non-scrollable will be on top of the scrollable widget in dart flutter.

I have tried something this: pseudo-code:

Stacked(
  children: <Widget>[
    SingleChildScrollView(
      child: // scrollable widget 
    ),
    Align(
      alignment: Alignment.bottomCenter,
      child: // non-scrollable widget eg container
    ),
  ]
)

But the scrollable widget is not scrolling. No error with this implementation but scrolling not working

Does this answer your question? [How to send Pointer events to Lower children in Stack](https://stackoverflow.com/questions/57477802/how-to-send-pointer-events-to-lower-children-in-stack) — Madhawa Priyashantha, Jun 27 '20 at 18:59

score 1 · Accepted Answer · answered Jun 27 '20 at 19:12

The problem here is that the non scrollable widget is on top of the scrollable one and tends to block all the touch event to the bottom widget (the scrollable one.)

you have several ways to fix this, the first one is to wrap your non scrollable widget inside an IgnorePointer

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Stack(children: [
          ListView.builder(itemBuilder: (context, index) {
            return Text("item ${index + 1}");
          }),
          IgnorePointer(
            child: Align(
                alignment: Alignment.bottomCenter,
                child: Container(color: Colors.red.withAlpha(50))),
          ),
        ]));
  }

but this will prevent any input on the overlapping widget

If you want to achieve the same, but being able to interact with the overlapping widget, you may want to change the IgnorePointer with a GestureDetector, and play with the behaviors https://api.flutter.dev/flutter/widgets/GestureDetector/GestureDetector.html

How to do a stacked widget with a scrollable widget and non scrollable widget

1 Answers1