Flutter Pro Design

Small details that build taste in Flutter.

curated by Kamran BekirovKamran Bekirov

Newsletter? Nah, I hate them.

Follow me on and catch new details.

Don't clip horizontal lists with page padding

If you add horizontal padding to a page's scrollable widget like this:

SingleChildScrollView(
  padding: const EdgeInsets.symmetric(horizontal: 24),
  child: Column(
    children: [
      ...
      NewArrivalProducts(),
      ...
    ],
  ),
),

That padding will clip horizontal lists:

Instead, drop the padding from the page and add it to each widget, so the horizontal list controls its own padding:

SizedBox(
  height: 318,
  child: ListView.separated(
    itemCount: products.length,
    scrollDirection: Axis.horizontal,
    padding: const EdgeInsets.symmetric(horizontal: 16),
    itemBuilder: (_, int index) => ProductItem(product: products[index]),
    separatorBuilder: (_, _) => const SizedBox(width: 8),
  ),
),

Then it will look like this:

The rule: horizontally scrollable widgets should reach the edges. Keep the page's scrollable widget edge to edge (no padding), and give each child its own horizontal padding.