[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9367":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":17,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":18,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":34,"discoverSource":35},9367,"layout-demo-flutter","bizz84\u002Flayout-demo-flutter","bizz84","Super Useful Flutter Layouts - Right in Your Pocket. 😉","https:\u002F\u002Fcodewithandrea.com\u002F",null,"Dart",1412,332,47,2,0,1,3,20.57,"MIT License",false,"master",true,[25,26,27,28,29,30],"android","dartlang","flutter","flutter-layouts","ios","youtube","2026-06-12 02:02:06","## Super Useful Flutter Layouts - Right in Your Pocket. 😉\n\n**Update**: Flutter web app preview here: [https:\u002F\u002Fflutter-layouts-demo.web.app\u002F](https:\u002F\u002Fflutter-layouts-demo.web.app\u002F)\n\nYouTube video walkthroughs with explanations here: \n\n[![Flutter Layouts: Row, Column, Stack, Expanded, Padding](screenshots\u002Fvideo-poster.png)](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=RJEnTRBxaSg)\n\n[![Flutter Layouts: PageView, ListView, GridView, Slivers, Hero Imaegs](screenshots\u002Fvideo-poster2.jpg)](https:\u002F\u002Fwww.youtube.com\u002Fwatch?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 [Code with Andrea](https:\u002F\u002Fcodewithandrea.com\u002F).\n\n# Table of Contents\n\n- [Table of Contents](#table-of-contents)\n  - [Row \u002F 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 \u002F Column\n\n- [Row](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FRow-class.html)\n- [Column](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FColumn-class.html)\n- [MainAxisAlignment](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Frendering\u002FMainAxisAlignment-class.html)\n- [MainAxisSize](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Frendering\u002FMainAxisSize-class.html)\n- [CrossAxisAlignment](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Frendering\u002FCrossAxisAlignment-class.html)\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fbizz84\u002Flayout-demo-flutter\u002Fraw\u002Fmaster\u002Fscreenshots\u002Frow-column.png\" width=\"320\">\n\n## Baseline\n\n- [Baseline](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FBaseline-class.html)\n- [CrossAxisAlignment](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Frendering\u002FCrossAxisAlignment-class.html)\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fbizz84\u002Flayout-demo-flutter\u002Fraw\u002Fmaster\u002Fscreenshots\u002Fbaseline.png\" width=\"320\">\n\n## Stack\n\n- [Stack](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FStack-class.html)\n- [AlignmentDirectional](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fpainting\u002FAlignmentDirectional-class.html)\n- [Positioned](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FPositioned-class.html)\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fbizz84\u002Flayout-demo-flutter\u002Fraw\u002Fmaster\u002Fscreenshots\u002Fstack.png\" width=\"320\">\n\n## Expanded\n\nWikipedia: [Golden Spiral](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGolden_spiral) (also: Fibonacci, Golden Ratio). \n\n- [Expanded](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FExpanded-class.html)\n- [LayoutBuilder](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FLayoutBuilder-class.html)\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fbizz84\u002Flayout-demo-flutter\u002Fraw\u002Fmaster\u002Fscreenshots\u002Fexpanded.png\" width=\"320\">\n\n## Padding\n\n- [Expanded](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FExpanded-class.html)\n- [SizedBox](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FSizedBox-class.html)\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fbizz84\u002Flayout-demo-flutter\u002Fraw\u002Fmaster\u002Fscreenshots\u002Fpadding.png\" width=\"320\">\n\n## PageView\n\n- [PageView](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FPageView-class.html)\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fbizz84\u002Flayout-demo-flutter\u002Fraw\u002Fmaster\u002Fscreenshots\u002Fpage-view.png\" width=\"320\">\n\n## ListView\n\n- [ListView](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FListView-class.html)\n- [ListTile](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fmaterial\u002FListTile-class.html)\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fbizz84\u002Flayout-demo-flutter\u002Fraw\u002Fmaster\u002Fscreenshots\u002Flist.png\" width=\"320\">\n\n## Slivers\n\n- [CustomScrollView](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FCustomScrollView-class.html)\n- [SliverAppBar](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fmaterial\u002FSliverAppBar-class.html)\n- [SliverGrid](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FSliverGrid-class.html)\n- [SliverFixedExtentList](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FSliverFixedExtentList-class.html)\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fbizz84\u002Flayout-demo-flutter\u002Fraw\u002Fmaster\u002Fscreenshots\u002Fslivers.png\" width=\"320\">\n\n## Hero Image\n\n- [Stack](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FStack-class.html)\n- [Positioned](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FPositioned-class.html)\n- [SafeArea](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FSafeArea-class.html)\n- [SliverPersistentHeader](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FSliverPersistentHeader-class.html)\n- [SliverGrid](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FSliverGrid-class.html)\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fbizz84\u002Flayout-demo-flutter\u002Fraw\u002Fmaster\u002Fscreenshots\u002Fhero.jpg\" width=\"320\">\n\n## Nested Lists\n\n- [ListView](https:\u002F\u002Fdocs.flutter.io\u002Fflutter\u002Fwidgets\u002FListView-class.html)\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fbizz84\u002Flayout-demo-flutter\u002Fraw\u002Fmaster\u002Fscreenshots\u002Fnested.png\" width=\"320\">\n\n\n### For more articles and video tutorials, check out [Code With Andrea](https:\u002F\u002Fcodewithandrea.com\u002F).\n\n### [License: MIT](LICENSE.md)\n\n### Attribution\n\nYoutube Play Icon by [Youtube Clipart](http:\u002F\u002Fclipartmag.com\u002Fyoutube-clipart).\n\n\n","bizz84\u002Flayout-demo-flutter 是一个展示 Flutter 布局用法的示例应用。该项目通过多种布局组件如 Row、Column、Stack 和 Expanded 等，帮助开发者理解和掌握如何在 Flutter 中构建复杂且美观的用户界面。每个布局都有详细的代码示例和 YouTube 视频教程，便于学习者跟随实践。此外，项目本身也使用了这些布局技术进行开发，为学习提供了实际案例参考。此项目非常适合初学者入门 Flutter 开发以及有一定基础的开发者深入研究 UI 设计技巧。","2026-06-11 03:22:20","top_language"]