https://github.com/bizz84/layout-demo-flutter
Super Useful Flutter Layouts - Right in Your Pocket. 😉
https://github.com/bizz84/layout-demo-flutter
android dartlang flutter flutter-layouts ios youtube
Last synced: 8 months ago
JSON representation
Super Useful Flutter Layouts - Right in Your Pocket. 😉
- Host: GitHub
- URL: https://github.com/bizz84/layout-demo-flutter
- Owner: bizz84
- License: mit
- Created: 2018-05-20T20:47:18.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-01-13T16:01:26.000Z (almost 2 years ago)
- Last Synced: 2025-04-01T08:34:09.501Z (8 months ago)
- Topics: android, dartlang, flutter, flutter-layouts, ios, youtube
- Language: Dart
- Homepage: https://codewithandrea.com/
- Size: 3.64 MB
- Stars: 1,404
- Watchers: 48
- Forks: 331
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
- awesome-flutter - Flutter Layouts Walkthrough: Row, Column, Stack, Expanded, Padding
README
## Super Useful Flutter Layouts - Right in Your Pocket. 😉
**Update**: Flutter web app preview here: [https://flutter-layouts-demo.web.app/](https://flutter-layouts-demo.web.app/)
YouTube video walkthroughs with explanations here:
[](https://www.youtube.com/watch?v=RJEnTRBxaSg)
[](https://www.youtube.com/watch?v=-zJ6CnOVndE)
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 [Coding With Flutter](https://codingwithflutter.com/).
# Table of Contents
- [Table of Contents](#table-of-contents)
- [Row / Column](#row--column)
- [Baseline](#baseline)
- [Stack](#stack)
- [Expanded](#expanded)
- [Padding](#padding)
- [PageView](#pageview)
- [ListView](#listview)
- [Slivers](#slivers)
- [Hero Image](#hero-image)
- [Nested Lists](#nested-lists)
- [For more articles and video tutorials, check out Code With Andrea.](#for-more-articles-and-video-tutorials-check-out-code-with-andrea)
- [License: MIT](#license-mit)
- [Attribution](#attribution)
## Row / Column
- [Row](https://docs.flutter.io/flutter/widgets/Row-class.html)
- [Column](https://docs.flutter.io/flutter/widgets/Column-class.html)
- [MainAxisAlignment](https://docs.flutter.io/flutter/rendering/MainAxisAlignment-class.html)
- [MainAxisSize](https://docs.flutter.io/flutter/rendering/MainAxisSize-class.html)
- [CrossAxisAlignment](https://docs.flutter.io/flutter/rendering/CrossAxisAlignment-class.html)
## Baseline
- [Baseline](https://docs.flutter.io/flutter/widgets/Baseline-class.html)
- [CrossAxisAlignment](https://docs.flutter.io/flutter/rendering/CrossAxisAlignment-class.html)
## Stack
- [Stack](https://docs.flutter.io/flutter/widgets/Stack-class.html)
- [AlignmentDirectional](https://docs.flutter.io/flutter/painting/AlignmentDirectional-class.html)
- [Positioned](https://docs.flutter.io/flutter/widgets/Positioned-class.html)
## Expanded
Wikipedia: [Golden Spiral](https://en.wikipedia.org/wiki/Golden_spiral) (also: Fibonacci, Golden Ratio).
- [Expanded](https://docs.flutter.io/flutter/widgets/Expanded-class.html)
- [LayoutBuilder](https://docs.flutter.io/flutter/widgets/LayoutBuilder-class.html)
## Padding
- [Expanded](https://docs.flutter.io/flutter/widgets/Expanded-class.html)
- [SizedBox](https://docs.flutter.io/flutter/widgets/SizedBox-class.html)
## PageView
- [PageView](https://docs.flutter.io/flutter/widgets/PageView-class.html)
## ListView
- [ListView](https://docs.flutter.io/flutter/widgets/ListView-class.html)
- [ListTile](https://docs.flutter.io/flutter/material/ListTile-class.html)
## Slivers
- [CustomScrollView](https://docs.flutter.io/flutter/widgets/CustomScrollView-class.html)
- [SliverAppBar](https://docs.flutter.io/flutter/material/SliverAppBar-class.html)
- [SliverGrid](https://docs.flutter.io/flutter/widgets/SliverGrid-class.html)
- [SliverFixedExtentList](https://docs.flutter.io/flutter/widgets/SliverFixedExtentList-class.html)
## Hero Image
- [Stack](https://docs.flutter.io/flutter/widgets/Stack-class.html)
- [Positioned](https://docs.flutter.io/flutter/widgets/Positioned-class.html)
- [SafeArea](https://docs.flutter.io/flutter/widgets/SafeArea-class.html)
- [SliverPersistentHeader](https://docs.flutter.io/flutter/widgets/SliverPersistentHeader-class.html)
- [SliverGrid](https://docs.flutter.io/flutter/widgets/SliverGrid-class.html)
## Nested Lists
- [ListView](https://docs.flutter.io/flutter/widgets/ListView-class.html)
### For more articles and video tutorials, check out [Code With Andrea](https://codewithandrea.com/).
### [License: MIT](LICENSE.md)
### Attribution
Youtube Play Icon by [Youtube Clipart](http://clipartmag.com/youtube-clipart).