ducafecatFlutter ecosystem guide
FLUTTER ECOSYSTEM

bizz84/layout-demo-flutter

Super Useful Flutter Layouts - Right in Your Pocket. 😉

View on GitHub ↗
layout-demo-flutter project cover
Stars
1.4K
Forks
331
Last push (UTC)
Sep 17, 2026
Project status
Active
Andrea Bizzotto GitHub avatar
GITHUB User

Andrea Bizzotto ↗

Flutter GDE ❖ Creator of codewithandrea.com ❖ YouTube: nnbd.me/yt ❖ Complete Dart Course: nnbd.me/dart

https://codewithandrea.comLondonOfficial website ↗
LanguagesDartSwiftPythonHTMLShellKotlinObjective-C

Technical topics

# flutter# flutter-layouts# youtube# ios# android# dartlang

Dependencies used

Dependency list 5 items

Rankings

Popular#244

Original README

English project snapshot. Visit GitHub for the latest content.

Expand / collapse project README

Super Useful Flutter Layouts - Right in Your Pocket. 😉

Update: Flutter web app preview here: https://flutter-layouts-demo.web.app/

YouTube video walkthroughs with explanations here:

Flutter Layouts: Row, Column, Stack, Expanded, Padding

Flutter Layouts: PageView, ListView, GridView, Slivers, Hero Imaegs

This app shows you how to use the most common layouts in Flutter.

You can run this project on your simulator or device.

Oh, and the app itself is built with - guess what - a combination of Flutter layouts. So Meta! 😎

For more articles and video tutorials, check out Code with Andrea.

Table of Contents

Row / Column

https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/row-column.png

Baseline

https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/baseline.png

Stack

https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/stack.png

Expanded

Wikipedia: Golden Spiral (also: Fibonacci, Golden Ratio).

https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/expanded.png

Padding

https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/padding.png

PageView

https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/page-view.png

ListView

https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/list.png

Slivers

https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/slivers.png

Hero Image

https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/hero.jpg

Nested Lists

https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/nested.png
For more articles and video tutorials, check out Code With Andrea.
License: MIT
Attribution

Youtube Play Icon by Youtube Clipart.