New
Small details that build taste in Flutter.
curated by 
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.