Member-only story

Awesome Way To Center Flutter Scrollables

Fred Grott
2 min readDec 17, 2022

--

This is a recipe not in the Flutter Cookbook docs, namely how to center scrollables. This technique uses the Scrollbar, the Center widget, and a ConstrainedBox widget to center scrollables and not scrollable content. Onward to the magic.

What Are We Building

Each screen of content is centered, nice. I borrowed this technique from the author of the Flex Color Scheme package, RydMike. So let me describe how the code works:

The key part is that we take a scrollbar and put a constrained box centered that receives the screen content as a child. That means the scrollable will be on the outside of content, while the content will expand to the box constraints.

And to call it is:

Typography screen

--

--

Fred Grott
Fred Grott

No responses yet