Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 25 days 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 6 years ago)
Default Branch: master
Last Pushed: 2024-01-13T16:01:26.000Z (10 months ago)
Last Synced: 2024-09-26T23:22:36.200Z (about 1 month ago)
Topics: android, dartlang, flutter, flutter-layouts, ios, youtube
Language: Dart
Homepage: https://codewithandrea.com/
Size: 3.64 MB
Stars: 1,378
Watchers: 49
Forks: 325
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: 

[![Flutter Layouts: Row, Column, Stack, Expanded, Padding](screenshots/video-poster.png)](https://www.youtube.com/watch?v=RJEnTRBxaSg)

[![Flutter Layouts: PageView, ListView, GridView, Slivers, Hero Imaegs](screenshots/video-poster2.jpg)](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).