Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ListView not scrolling in positioned Widget

I currently have a stack with a backdrop for my AppBar and the contents of my page.
I'm displaying a Container in the center of the page, positioned with the Positioned widget, which contains a grid/listview.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: VehicleScreenAppBar(
        title: title,
        context: context,
      ),
      body: LayoutBuilder(
        builder: (contxt, vehicleListConstraints) {
          return Stack(
            overflow: Overflow.visible,
            children: <Widget>[
              AppBarBackDrop(constraints: vehicleListConstraints),
              Positioned(
                top: vehicleListConstraints.maxHeight * .15,
                left: (vehicleListConstraints.maxWidth - vehicleListConstraints.maxWidth * .9) / 2,
                child: Container(
                  color: Colors.red,
                  height: vehicleListConstraints.maxHeight * .6,
                  width: vehicleListConstraints.maxWidth * .9,
                  child: ListView.builder(
                    itemCount: 20,
                    itemBuilder: (context, i) {
                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          height: 50,
                          color: Colors.blue,
                          child: Text('text'),
                        ),
                      );
                    },
                  ),
                ),
              )
            ],
          );
        },
      ),
    );
  }

Screenshot

The problem that I am running into is that the grid/listview do not scroll when I have Positioned widget AND I have explicitly named any BUT NOT ALL of its constructors, i.e. top:, bottom:, left:, right:. (I'm lazily building the grid/listview lazily via builder).

I have a work around/hack where I remove the Positioned and replace it with a PageView. The PageView then has a children: <Widget> [ Container() ] that I then position via the margin constructors' top: and left:.

This will work for now, but not something that I want to implement for production. How can I get the grid/listview to scroll within a Positioned widget WITHOUT naming all of its constructors?

like image 255
mrgnhnt96 Avatar asked Jan 27 '20 17:01

mrgnhnt96


People also ask

What is positioned in flutter?

Positioned is a widget that comes built-in with flutter SDK. Postioned does exactly what it sounds like, which is it arbitrarily positioned widgets on top of each other. It is usually used to position child widgets in Stack widget or similar. It only works for Stateless and Stateful widgets.


1 Answers

For scroll-able widgets wrapped inside the positioned widget, you should give all the parameters (left, right , top , bottom) of Positioned widget a value then it will work.

 Positioned(
              top: 20.0,
              left: 20.0,
              right:0.0,
               bottom:0.0

              child: SizedBox(
              //what ever code is)),
                )
                  )
like image 63
Ammar Zahid Avatar answered Nov 15 '22 09:11

Ammar Zahid