{"id":13549653,"url":"https://github.com/bizz84/layout-demo-flutter","last_synced_at":"2025-04-08T09:10:57.876Z","repository":{"id":41247870,"uuid":"134185462","full_name":"bizz84/layout-demo-flutter","owner":"bizz84","description":"Super Useful Flutter Layouts - Right in Your Pocket. 😉","archived":false,"fork":false,"pushed_at":"2024-01-13T16:01:26.000Z","size":3815,"stargazers_count":1404,"open_issues_count":1,"forks_count":331,"subscribers_count":48,"default_branch":"master","last_synced_at":"2025-04-01T08:34:09.501Z","etag":null,"topics":["android","dartlang","flutter","flutter-layouts","ios","youtube"],"latest_commit_sha":null,"homepage":"https://codewithandrea.com/","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bizz84.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":"bizz84"}},"created_at":"2018-05-20T20:47:18.000Z","updated_at":"2025-04-01T06:37:19.000Z","dependencies_parsed_at":"2024-01-17T07:08:32.924Z","dependency_job_id":"91eebf1a-ed93-4ab4-ac23-80b2476b3304","html_url":"https://github.com/bizz84/layout-demo-flutter","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizz84%2Flayout-demo-flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizz84%2Flayout-demo-flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizz84%2Flayout-demo-flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizz84%2Flayout-demo-flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bizz84","download_url":"https://codeload.github.com/bizz84/layout-demo-flutter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247809964,"owners_count":20999816,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","dartlang","flutter","flutter-layouts","ios","youtube"],"created_at":"2024-08-01T12:01:24.068Z","updated_at":"2025-04-08T09:10:57.854Z","avatar_url":"https://github.com/bizz84.png","language":"Dart","funding_links":["https://github.com/sponsors/bizz84"],"categories":["Articles, Tutorials, Blogs etc.","Dart"],"sub_categories":[],"readme":"## Super Useful Flutter Layouts - Right in Your Pocket. 😉\n\n**Update**: Flutter web app preview here: [https://flutter-layouts-demo.web.app/](https://flutter-layouts-demo.web.app/)\n\nYouTube video walkthroughs with explanations here: \n\n[![Flutter Layouts: Row, Column, Stack, Expanded, Padding](screenshots/video-poster.png)](https://www.youtube.com/watch?v=RJEnTRBxaSg)\n\n[![Flutter Layouts: PageView, ListView, GridView, Slivers, Hero Imaegs](screenshots/video-poster2.jpg)](https://www.youtube.com/watch?v=-zJ6CnOVndE)\n\nThis app shows you how to use the most common layouts in Flutter.\n\nYou can run this project on your simulator or device.\n\nOh, and the app itself is built with - guess what - a combination of Flutter layouts. So Meta! 😎\n\n### For more articles and video tutorials, check out [Coding With Flutter](https://codingwithflutter.com/).\n\n# Table of Contents\n\n- [Table of Contents](#table-of-contents)\n  - [Row / Column](#row--column)\n  - [Baseline](#baseline)\n  - [Stack](#stack)\n  - [Expanded](#expanded)\n  - [Padding](#padding)\n  - [PageView](#pageview)\n  - [ListView](#listview)\n  - [Slivers](#slivers)\n  - [Hero Image](#hero-image)\n  - [Nested Lists](#nested-lists)\n    - [For more articles and video tutorials, check out Code With Andrea.](#for-more-articles-and-video-tutorials-check-out-code-with-andrea)\n    - [License: MIT](#license-mit)\n    - [Attribution](#attribution)\n\n## Row / Column\n\n- [Row](https://docs.flutter.io/flutter/widgets/Row-class.html)\n- [Column](https://docs.flutter.io/flutter/widgets/Column-class.html)\n- [MainAxisAlignment](https://docs.flutter.io/flutter/rendering/MainAxisAlignment-class.html)\n- [MainAxisSize](https://docs.flutter.io/flutter/rendering/MainAxisSize-class.html)\n- [CrossAxisAlignment](https://docs.flutter.io/flutter/rendering/CrossAxisAlignment-class.html)\n\n\u003cimg src=\"https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/row-column.png\" width=\"320\"\u003e\n\n## Baseline\n\n- [Baseline](https://docs.flutter.io/flutter/widgets/Baseline-class.html)\n- [CrossAxisAlignment](https://docs.flutter.io/flutter/rendering/CrossAxisAlignment-class.html)\n\n\u003cimg src=\"https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/baseline.png\" width=\"320\"\u003e\n\n## Stack\n\n- [Stack](https://docs.flutter.io/flutter/widgets/Stack-class.html)\n- [AlignmentDirectional](https://docs.flutter.io/flutter/painting/AlignmentDirectional-class.html)\n- [Positioned](https://docs.flutter.io/flutter/widgets/Positioned-class.html)\n\n\u003cimg src=\"https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/stack.png\" width=\"320\"\u003e\n\n## Expanded\n\nWikipedia: [Golden Spiral](https://en.wikipedia.org/wiki/Golden_spiral) (also: Fibonacci, Golden Ratio). \n\n- [Expanded](https://docs.flutter.io/flutter/widgets/Expanded-class.html)\n- [LayoutBuilder](https://docs.flutter.io/flutter/widgets/LayoutBuilder-class.html)\n\n\u003cimg src=\"https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/expanded.png\" width=\"320\"\u003e\n\n## Padding\n\n- [Expanded](https://docs.flutter.io/flutter/widgets/Expanded-class.html)\n- [SizedBox](https://docs.flutter.io/flutter/widgets/SizedBox-class.html)\n\n\u003cimg src=\"https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/padding.png\" width=\"320\"\u003e\n\n## PageView\n\n- [PageView](https://docs.flutter.io/flutter/widgets/PageView-class.html)\n\n\u003cimg src=\"https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/page-view.png\" width=\"320\"\u003e\n\n## ListView\n\n- [ListView](https://docs.flutter.io/flutter/widgets/ListView-class.html)\n- [ListTile](https://docs.flutter.io/flutter/material/ListTile-class.html)\n\n\u003cimg src=\"https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/list.png\" width=\"320\"\u003e\n\n## Slivers\n\n- [CustomScrollView](https://docs.flutter.io/flutter/widgets/CustomScrollView-class.html)\n- [SliverAppBar](https://docs.flutter.io/flutter/material/SliverAppBar-class.html)\n- [SliverGrid](https://docs.flutter.io/flutter/widgets/SliverGrid-class.html)\n- [SliverFixedExtentList](https://docs.flutter.io/flutter/widgets/SliverFixedExtentList-class.html)\n\n\u003cimg src=\"https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/slivers.png\" width=\"320\"\u003e\n\n## Hero Image\n\n- [Stack](https://docs.flutter.io/flutter/widgets/Stack-class.html)\n- [Positioned](https://docs.flutter.io/flutter/widgets/Positioned-class.html)\n- [SafeArea](https://docs.flutter.io/flutter/widgets/SafeArea-class.html)\n- [SliverPersistentHeader](https://docs.flutter.io/flutter/widgets/SliverPersistentHeader-class.html)\n- [SliverGrid](https://docs.flutter.io/flutter/widgets/SliverGrid-class.html)\n\n\u003cimg src=\"https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/hero.jpg\" width=\"320\"\u003e\n\n## Nested Lists\n\n- [ListView](https://docs.flutter.io/flutter/widgets/ListView-class.html)\n\n\u003cimg src=\"https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/nested.png\" width=\"320\"\u003e\n\n\n### For more articles and video tutorials, check out [Code With Andrea](https://codewithandrea.com/).\n\n### [License: MIT](LICENSE.md)\n\n### Attribution\n\nYoutube Play Icon by [Youtube Clipart](http://clipartmag.com/youtube-clipart).\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbizz84%2Flayout-demo-flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbizz84%2Flayout-demo-flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbizz84%2Flayout-demo-flutter/lists"}