Search code examples
flutterflutter-webflutter-listview

Flutter - How to overflow horizontal listview?


DartPad

I'm building a website using Flutter Web. I have a horizontal ListView that shows items. I have a ConstrainedBox that sets the maxWidth to 1200. This cuts the ListView on both sides.

When I add the OverflowBox, ListView starts at the beginning of the page. How can I overflow it correctly that ListView begins where it should be and the rest of the items won't cut, so the user can scroll and see the items outside of the ConstrainedBox?

enter image description here

with overflow: enter image description here


Solution

  • Thanks to ping (pixeltoast) from the Flutter discord server, it's answered here.

       return SizedBox(
          height: 663,
          child: LayoutBuilder(
            builder: (context, constraints) {
              return ScrollConfiguration(
                behavior: _MyCustomScrollBehavior(),
                child: ListView.separated(
                  padding: EdgeInsets.symmetric(horizontal: max(0.0, (constraints.maxWidth - 800) / 3)),
                  controller: _controller,
                  scrollDirection: Axis.horizontal,
                  itemCount: items.length,
                  separatorBuilder: (_, __) => const SizedBox(width: 16),
                  itemBuilder: (_, i) => items[i],
                ),
              );
            }
          ),
        );