[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9382":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":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":17,"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":18,"lastSyncTime":34,"discoverSource":35},9382,"styled_widget","ReinBentdal\u002Fstyled_widget","ReinBentdal","Simplifying widget style in Flutter. ","https:\u002F\u002Fpub.dev\u002Fpackages\u002Fstyled_widget",null,"Dart",1335,100,15,20,0,1,2,54.71,"MIT License",false,"master",true,[25,26,27,28,29,30],"dart","flutter","package","style","widget","widgets","2026-06-12 04:00:44","\u003Cp align=\"center\" >\n  \u003Ca href=\"https:\u002F\u002Fpub.dev\u002Fpackages\u002Fstyled_widget\">\n    \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fraw\u002Fmaster\u002Fdoc\u002Fassets\u002Flogo.png\"  width=\"500\">\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\" >\n  \u003Cstrong>Simplifying your widget tree structure by defining widgets using methods.\u003C\u002Fstrong>\n  \u003Cbr \u002F>\n  \u003Cbr \u002F>\n  \u003Ca href=\"https:\u002F\u002Fpub.dev\u002Fpackages\u002Fstyled_widget\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fstyled_widget?color=blue\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FReinBentdal\u002Fstyled_widget\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-purple.svg\" alt=\"License: MIT\">\u003C\u002Fa>\n  \u003Cbr \u002F>\n  \u003Cbr \u002F>\n  \u003Ca href=\"https:\u002F\u002Fwww.buymeacoffee.com\u002FtOTWBs7\" target=\"_blank\">\u003Cimg width=\"150px\" src=\"https:\u002F\u002Fcdn.buymeacoffee.com\u002Fbuttons\u002Fdefault-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 51px !important;width: 217px !important;\" >\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cbr \u002F>\n\nThanks to the introduction of [extension methods](https:\u002F\u002Fdart.dev\u002Fguides\u002Flanguage\u002Fextension-methods) in Dart 2.7.0, `styled_widget` makes it possible to build widget tree\\`s more readable and efficient.\n\n`styled_widget` is build as a tool to enhance your Flutter development experience and to seamlessly integrate with your codebase. \n\n### Showcase\n| [Design](https:\u002F\u002Fdribbble.com\u002Fshots\u002F6459693-Creative-layout-design),  [Code](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki\u002Fdemo_app) | [Design](https:\u002F\u002Fdribbble.com\u002Fshots\u002F4514354-Sign-up), [Code](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki\u002Fjapan-style-example) | [Design](https:\u002F\u002Fno.pinterest.com\u002Fpin\u002F403283341630104104\u002F), [Code](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki\u002Ftoggle) |\n|-|-|-|\n|\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FReinBentdal\u002Fstyled_widget\u002Fmaster\u002Fexample\u002Fassets\u002Fdemo_app.gif\"  width=\"250\">|\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fblob\u002Fmaster\u002Fexample\u002Fassets\u002Fjapan-style-example.gif?raw=true\" width=\"250\" \u002F>|\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fblob\u002Fmaster\u002Fexample\u002Fassets\u002Ftoggle.gif?raw=true\" width=\"250\">|\n\n### Basic example\n`styled_widget` has a **bottom up** approach to building widget\\`s. This means you start with the inner most element and layer widget\\`s on top. The following example is structured as follows:\nIcon -> blue circle -> light blue circle -> card -> background\n```dart\nIcon(OMIcons.home, color: Colors.white)\n  .padding(all: 10)\n  .decorated(color: Color(0xff7AC1E7), shape: BoxShape.circle)\n  .padding(all: 15)\n  .decorated(color: Color(0xffE8F2F7), shape: BoxShape.circle)\n  .padding(all: 20)\n  .card(\n    elevation: 10,\n    shape: RoundedRectangleBorder(\n      borderRadius: BorderRadius.circular(20),\n    ),\n  )\n  .alignment(Alignment.center)\n  .backgroundColor(Color(0xffEBECF1));\n```\n\u003Cdetails>\n  \u003Csummary>Raw Flutter (click to show)\u003C\u002Fsummary>\n\u003Cpre>\n\n```dart\nDecoratedBox(\n  decoration: BoxDecoration(\n    color: Color(0xffEBECF1),\n  ),\n  child: Align(\n    alignment: Alignment.center,\n    child: Card(\n      elevation: 10,\n      shape: RoundedRectangleBorder(\n        borderRadius: BorderRadius.circular(20),\n      ),\n      child: Padding(\n        padding: EdgeInsets.all(20),\n        child: DecoratedBox(\n          decoration: BoxDecoration(\n            color: Color(0xffE8F2F7),\n            shape: BoxShape.circle,\n          ),\n          child: Padding(\n            padding: EdgeInsets.all(15),\n            child: DecoratedBox(\n              decoration: BoxDecoration(\n                color: Color(0xff7AC1E7),\n                shape: BoxShape.circle,\n              ),\n              child: Padding(\n                padding: EdgeInsets.all(10),\n                child: Icon(\n                  OMIcons.home,\n                  color: Colors.white,\n                ),\n              ),\n            ),\n          ),\n        ),\n      ),\n    ),\n  ),\n);\n```\n\u003C\u002Fpre>\n\u003C\u002Fdetails>\n\u003Cimg width=\"400\" src=\"https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fblob\u002Fmaster\u002Fdoc\u002Fassets\u002Fsimple_demo.png?raw=true\" \u002F>\n\n### Docs\n\u003Cstrong>See the documentation at [styled_widget\u002Fwiki](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki)\u003C\u002Fstrong> for more information about using `styled_widget`!\n\n\u003Cstrong>Quicklinks\u003C\u002Fstrong>\n* [Home](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki)\n* [Core concept](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki\u002FCore-concept)\n* [Widgets](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki\u002FWidgets)\n* [Animations](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki\u002FAnimations)\n* [List of methods](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki\u002FList-of-methods)\n* [Examples](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki\u002FExamples)\n  * [demo app](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki\u002Fdemo_app)\n  * [japan style](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki\u002Fjapan-style-example)\n  * [toggle animation](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki\u002Ftoggle)\n  * [styled_widget logo](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki\u002Fstyled_widget-logo)\n  * [Basic text example](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki\u002Fbasic-text-example)\n* [Contributing](https:\u002F\u002Fgithub.com\u002FReinBentdal\u002Fstyled_widget\u002Fwiki\u002FContributing)\n","`styled_widget` 是一个用于简化 Flutter 中 widget 样式定义的 Dart 包。它通过引入扩展方法，使得构建 widget 树时代码更加简洁和易读，从而提高开发效率。核心功能包括链式调用方式来设置样式，支持从内到外层层叠加 widget，如图标、卡片等，并且可以轻松地调整布局和装饰。适用于需要快速迭代 UI 设计或希望保持代码整洁的 Flutter 项目中，无论是简单的页面还是复杂的交互界面都能有效提升开发体验。","2026-06-11 03:22:25","top_language"]