[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9370":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":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":40,"readmeContent":41,"aiSummary":42,"trendingCount":16,"starSnapshotCount":16,"syncStatus":43,"lastSyncTime":44,"discoverSource":45},9370,"ResponsiveFramework","Codelessly\u002FResponsiveFramework","Codelessly","Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple. Demo: https:\u002F\u002Fgallery.codelessly.com\u002Fflutterwebsites\u002Fminimal\u002F","https:\u002F\u002Fcodelessly.com",null,"Dart",1397,159,20,40,0,1,55.21,"MIT License",false,"master",true,[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"android","bootstrap","bootstrap4","demo","flutter","flutter-plugin","flutter-ui","framework","ios","responsive","responsive-layout","webapp","website","website-builder","website-development","website-template","2026-06-12 04:00:44","![Screenshots](packages\u002FResponsive%20Cover.png)\n# Responsive Framework\n[![Flutter Responsive](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fflutter-responsive-brightgreen.svg?style=flat-square)](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework) [![Pub release](https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fresponsive_framework.svg?style=flat-square)](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fresponsive_framework) [![GitHub Release Date](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Frelease-date\u002FCodelessly\u002FResponsiveFramework.svg?style=flat-square)](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework) [![GitHub issues](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002FCodelessly\u002FResponsiveFramework.svg?style=flat-square)](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework\u002Fissues) [![GitHub top language](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flanguages\u002Ftop\u002FCodelessly\u002FResponsiveFramework.svg?style=flat-square)](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework) [![GitHub code size in bytes](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flanguages\u002Fcode-size\u002FCodelessly\u002FResponsiveFramework.svg?style=flat-square)](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework) [![Awesome Flutter](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAwesome-Flutter-blue.svg?longCache=true&style=flat-square)](https:\u002F\u002Fgithub.com\u002FSolido\u002Fawesome-flutter) [![Libraries.io for GitHub](https:\u002F\u002Fimg.shields.io\u002Flibrariesio\u002Fgithub\u002FCodelessly\u002FResponsiveFramework.svg?style=flat-square)](https:\u002F\u002Flibraries.io\u002Fgithub\u002FCodelessly\u002FResponsiveFramework) [![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-BSD%200--Clause-orange.svg?style=flat-square)](https:\u002F\u002Fopensource.org\u002Flicenses\u002F0BSD)\n\n![Screenshots](packages\u002FResponsive%20Demo.gif)\n\n> ### Responsiveness made simple\n\nThe Responsive Framework includes widgets that help developers build responsive apps for mobile, desktop, and website layouts.\n\n## Demo\n\n### [Minimal Website](https:\u002F\u002Fgallery.codelessly.com\u002Fflutterwebsites\u002Fminimal\u002F?utm_medium=link&utm_campaign=demo)\n\nA demo website built with the Responsive Framework. [View Code](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FFlutterMinimalWebsite)\n\n### [Flutter Website](https:\u002F\u002Fgallery.codelessly.com\u002Fflutterwebsites\u002Fflutterwebsite\u002F?utm_medium=link&utm_campaign=demo)\n\nThe flutter.dev website recreated in Flutter. [View Code](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FFlutterWebsite)\n\n### [Pub.dev Website](https:\u002F\u002Fgallery.codelessly.com\u002Fflutterwebsites\u002Fpub\u002F?utm_medium=link&utm_campaign=demo)\n\nThe pub.dev website recreated in Flutter. [View Code](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FFlutterPubWebsite)\n\n## Quick Start\n\n[![Pub release](https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fresponsive_framework.svg?style=flat-square)](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fresponsive_framework)\n\nImport this library into your project:\n\n```yaml\nresponsive_framework: ^latest_version\n```\n\nAdd `ResponsiveBreakpoints.builder` to your MaterialApp or CupertinoApp. Define your own breakpoints and labels.\n```dart\nimport 'package:responsive_framework\u002Fresponsive_framework.dart';\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      builder: (context, child) => ResponsiveBreakpoints.builder(\n        child: child!,\n        breakpoints: [\n          const Breakpoint(start: 0, end: 450, name: MOBILE),\n          const Breakpoint(start: 451, end: 800, name: TABLET),\n          const Breakpoint(start: 801, end: 1920, name: DESKTOP),\n          const Breakpoint(start: 1921, end: double.infinity, name: '4K'),\n        ],\n      ),\n      initialRoute: \"\u002F\",\n    );\n  }\n}\n```\n\nUse the labels you defined for layouts and values.\n\n```dart\n\u002F\u002F Example: if the screen is bigger than the Mobile breakpoint, build full width AppBar icons and labels.\nif (ResponsiveBreakpoints.of(context).largerThan(MOBILE))\n    FullWidthAppBarItems()\n\n\u002F\u002F Booleans\nResponsiveBreakpoints.of(context).isDesktop;\nResponsiveBreakpoints.of(context).isTablet;\nResponsiveBreakpoints.of(context).isMobile;\nResponsiveBreakpoints.of(context).isPhone;\n\n\u002F\u002F Conditionals\nResponsiveBreakpoints.of(context).equals(DESKTOP)\nResponsiveBreakpoints.of(context).largerThan(MOBILE)\nResponsiveBreakpoints.of(context).smallerThan(TABLET)\nResponsiveBreakpoints.of(context).between(MOBILE, TABLET)\n...\n```\n\n### Customization\nYou can define your own breakpoint labels and use them in your conditionals.\n\nFor example, if you're building a Material 3 Navigation Rail and want to expand the menu to full width once there is enough room, you can add a custom `EXPAND_SIDE_PANEL` breakpoint.\n\n```dart\nbreakpoints: [\n  ...\n  const Breakpoint(start: 801, end: 1920, name: DESKTOP),\n  const Breakpoint(start: 900, end: 900, name: 'EXPAND_SIDE_PANEL') \u003C- Custom label.\n  const Breakpoint(start: 1921, end: double.infinity, name: '4K'),\n  ...\n]\n```\n\nThen, in your code, show the Rail based on the breakpoint condition.\n\n> expand: ResponsiveBreakpoints.of(context).largerThan('EXPAND_SIDE_PANEL')\n\n### Responsive Framework Widgets\nThe ResponsiveFramework includes a few custom widgets that supplement Flutter's responsive capabilities. Their usages are showcased in the demo projects.\n\n- *[ResponsiveValue](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework\u002Fblob\u002Fmaster\u002Flib\u002Fsrc\u002Fresponsive_value.dart)*\n  - *[ResponsiveVisibility](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework\u002Fblob\u002Fmaster\u002Flib\u002Fsrc\u002Fresponsive_value.dart)*\n  - *[ResponsiveConstraints](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework\u002Fblob\u002Fmaster\u002Flib\u002Fsrc\u002Fresponsive_value.dart)*\n- *[ResponsiveRowColumn](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework\u002Fblob\u002Fmaster\u002Flib\u002Fsrc\u002Fresponsive_row_column.dart)*\n- *[ResponsiveGridView](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework\u002Fblob\u002Fmaster\u002Flib\u002Fsrc\u002Fresponsive_grid.dart)*\n- *[ResponsiveScaledBox](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework\u002Fblob\u002Fmaster\u002Flib\u002Fsrc\u002Fresponsive_scaled_box.dart)*\n- *[MaxWidthBox](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework\u002Fblob\u002Fmaster\u002Flib\u002Fsrc\u002Fmax_width_box.dart)*\n\n\n## Legacy ReadMe (v0.2.0 and below)\n\n### ResponsiveWrapper Migration\n[v1.0.0 Migration Guide](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework\u002Fblob\u002Fmaster\u002Fmigration_0.2.0_to_1.0.0.md)\n\n### The remainder of the legacy ReadMe is preserved below as the concepts are still useful and used by the new widgets. ResponsiveWrapper has been deprecated and removed.\n\n### The Problem\nSupporting multiple display sizes often means recreating the same layout multiple times. Under the traditional _Bootstrap_ approach, building responsive UI is time consuming, frustrating and repetitive. Furthermore, getting everything pixel perfect is near impossible and simple edits take hours.\n\n![Screenshots](packages\u002FBad%20Viewport%20Selector%20Animated.gif)\n\n### The Solution\nUse Responsive Framework to automatically scale your UI.\n\n> **ResponsiveBreakpoint.autoScale(600);**\n\n\n## AutoScale\n\n![Screenshots](packages\u002FScale%20Resize%20Comparison.gif)\n\nAutoScale shrinks and expands your layout *proportionally*, preserving the exact look of your UI.\nThis eliminates the need to manually adapt layouts to mobile, tablet, and desktop.\n\n```dart\nResponsiveBreakpoint.autoScale(600);\n```\n\nFlutter's default behavior is resize which Responsive Framework respects. AutoScale is off by default and can be enabled at breakpoints by setting `autoScale` to `true`.\n\n## Breakpoints\n\n![Screenshots](packages\u002FDevice%20Preview.gif)\n\nBreakpoints control responsive behavior at different screen sizes.\n\n```dart\nResponsiveWrapper(\n    child,\n    breakpoints: [\n        ResponsiveBreakpoint.resize(600, name: MOBILE),\n        ResponsiveBreakpoint.autoScale(800, name: TABLET),\n        ResponsiveBreakpoint.autoScale(1200, name: DESKTOP),\n    ],\n)\n```\nBreakpoints give you fine-grained control over how your UI displays.\n\n## Introductory Concepts\n\nThese concepts helps you start using the Responsive Framework and build an responsive app quickly.\n\n### Scale vs Resize\n\nFlutter's default behavior is to resize your layout when the screen dimensions change. Resizing a layout stretches it in the direction of an unconstrained width or height. Any constrained dimension stays fixed which is why mobile app UIs look tiny on desktop. The following example illustrates the difference between resizing and scaling.\n\n![Screenshots](packages\u002FAppBar%20Scale%20vs%20Resize%20Comparison.png)\n\nAn AppBar widget looks correct on a phone. When viewed on a desktop however, the AppBar is too short and the title looks too small.\nHere is what happens under each behavior: \n1. Resizing (default) - the AppBar's width is double.infinity so it stretches to fill the available width. The Toolbar height is fixed and stays 56dp.\n2. Scaling - the AppBar's width stretches to fill the available width. The height scales proportionally using an aspect ratio automatically calculated from the nearest `ResponsiveBreakpoint`. As the width increases, the height increases proportionally.\n\nWhen scaled, the AppBar looks correct on desktop, up to a certain size. Once the screen becomes too wide, the AppBar starts to appear too large. This is where breakpoints come in.\n\n### Breakpoint Configuration\n\nTo adapt to a wide variety of screen sizes, set breakpoints to control responsive behavior.\n\n```dart\nResponsiveWrapper(\n    child,\n    maxWidth: 1200,\n    minWidth: 480,\n    defaultScale: true,\n    breakpoints: [\n        ResponsiveBreakpoint.resize(480, name: MOBILE),\n        ResponsiveBreakpoint.autoScale(800, name: TABLET),\n        ResponsiveBreakpoint.resize(1000, name: DESKTOP),\n        ResponsiveBreakpoint.autoScale(2460, name: '4K'),\n    ],\n)\n```\n\nAn arbitrary number of breakpoints can be set. Resizing\u002Fscaling behavior can be mixed and matched.\n- below 480: resize on small screens to avoid cramp and overflow errors.\n- 480-800: resize on phones for native widget sizes.\n- 800-1000: scale on tablets to avoid elements appearing too small.\n- 1000+: resize on desktops to use available space. \n- 2460+: scale on extra large 4K displays so text is still legible and widgets are not spaced too far apart.\n\n## Additional Resources\n\n### Resocoder Tutorial\n\nThe wonderful people at Resocoder created a great tutorial video and article walking through the usage of the Responsive Framework at the link below.\n\n[View Responsive Framework Tutorial](https:\u002F\u002Fresocoder.com\u002F2021\u002F10\u002F03\u002Fcreate-responsive-flutter-apps-with-minimal-effort\u002F)\n\n### Project Wiki\n\nNo project wiki exists yet unfortunately. That means this is an opportunity for you to create and maintain the wiki for one of the most popular Flutter packages. This package needs **your** help with documentation!\n\nPlease reach out via the contact links below if you are interested.\n\n## About\n\nResponsive Framework was created out of a desire for a better way to manage responsiveness. The ability to automatically adapt UI to different sizes opens up a world of possibilities. Here at Codelessly, we're building a Flutter app UI and website builder, development tools, and UI templates to increase productivity. If that sounds interesting, you'll want to subscribe to updates below 😎\n\nResponsive Framework is licensed under Zero-Clause BSD and released as Emailware. If you like this project or it helped you, please subscribe to updates. Although it is not required, you might miss the goodies we share!\n\n\u003Ca href=\"https:\u002F\u002Fcodelessly.com\u002F?utm_medium=banner&utm_campaign=newsletter_subscribe\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FCodelessly\u002FResponsiveFramework\u002Fmaster\u002Fpackages\u002FEmail%20Newsletter%20Signup.png\">\u003C\u002Fa>\n\n## Badges 🏆\n\nNow you can proudly display the time and headache saved by using Responsive Framework with a supporter's badge.\n\n[![Pub release](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fflutter-responsive-brightgreen.svg?style=flat-square)](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework) \n\n```\n[![Flutter Responsive](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fflutter-responsive-brightgreen.svg?style=flat-square)](https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework)\n```\n\u003Cimg alt=\"Built Responsive\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FCodelessly\u002FResponsiveFramework\u002Fmaster\u002Fpackages\u002FBuilt%20Responsive%20Badge.png\"\u002F>\n\n```html\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework\">\n  \u003Cimg alt=\"Built Responsive\"\n       src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FCodelessly\u002FResponsiveFramework\u002Fmaster\u002Fpackages\u002FBuilt%20Responsive%20Badge.png\"\u002F>\n\u003C\u002Fa>\n```\n\u003Cimg alt=\"Built with Responsive Framework\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FCodelessly\u002FResponsiveFramework\u002Fmaster\u002Fpackages\u002FBuilt%20with%20Responsive%20Badge.png\"\u002F>\n\n```html\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FCodelessly\u002FResponsiveFramework\">\n  \u003Cimg alt=\"Built with Responsive Framework\"\n       src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FCodelessly\u002FResponsiveFramework\u002Fmaster\u002Fpackages\u002FBuilt%20with%20Responsive%20Badge.png\"\u002F>\n\u003C\u002Fa>\n```\n\n## Contributors ❤️\n\n**Design:** \n* [Ray Li](https:\u002F\u002Fgithub.com\u002Fsearchy2)\n\n**Development:** \n* [Ray Li](https:\u002F\u002Fgithub.com\u002Fsearchy2)\n* [Spencer Lindemuth](https:\u002F\u002Fgithub.com\u002FSpencerLindemuth)\n* [Trefa1998](https:\u002F\u002Fgithub.com\u002FTrefa1998)\n* *add yourself here by contributing*\n\n**Sponsor:** [Codelessly - Flutter App UI and Website Builder](https:\u002F\u002Fcodelessly.com\u002F?utm_medium=link&utm_campaign=direct)\n\n\u003Ca href=\"mailto:ray@codelessly.com\">\n  \u003Cimg alt=\"Codelessly Email\"\n       src=\"https:\u002F\u002Flh3.googleusercontent.com\u002FyN_m90WN_HSCohXdgC2k91uSTk9dnYfoxTYwG_mv_l5_05dV2CzkQ1B6rEqH4uqdgjA=w96\" \u002F>\n\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fcodelessly.com\u002F?utm_medium=icon&utm_campaign=direct\">\n  \u003Cimg alt=\"Codelessly Website\"\n       src=\"https:\u002F\u002Flh3.googleusercontent.com\u002FYmMGcgeO7Km9-J9vFRByov5sb7OUKetnKs8pTi0JZMDj3GVJ61GMTcTlHB7u9uHDHag=w96\" \u002F>\n\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FBuildCodelessly\">\n  \u003Cimg alt=\"Codelessly Twitter\"\n       src=\"https:\u002F\u002Flh3.ggpht.com\u002FlSLM0xhCA1RZOwaQcjhlwmsvaIQYaP3c5qbDKCgLALhydrgExnaSKZdGa8S3YtRuVA=w96\" \u002F>\n\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FCodelessly\">\n  \u003Cimg alt=\"Codelessly GitHub\"\n       src=\"https:\u002F\u002Flh3.googleusercontent.com\u002FL15QqmKK7Vl-Ag1ZxaBqNQlXVEw58JT2BDb-ef5t2eboDh0pPSLjDgi3-aQ3Opdhhyk=w96\" \u002F>\n\u003C\u002Fa>\n\u003Cbr>\u003C\u002Fbr>\n\nFlutter is a game-changing technology that will revolutionize not just development, but software itself. A big thank you to the Flutter team for building such an amazing platform 💙 \n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fflutter\u002Fflutter\">\n  \u003Cimg alt=\"Flutter\"\n       src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FCodelessly\u002FResponsiveFramework\u002Fmaster\u002Fpackages\u002FFlutter%20Logo%20Banner.png\" \u002F>\n\u003C\u002Fa>\n \n## License\n\n    BSD Zero Clause License\n\n    Copyright © 2024 Codelessly\n\n    Permission to use, copy, modify, and\u002For distribute this software for any\n    purpose with or without fee is hereby granted.\n\n    THE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\n    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\n    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\n    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\n    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\n    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\n    PERFORMANCE OF THIS SOFTWARE.\n","ResponsiveFramework 是一个用于 Flutter 应用的响应式框架，能够自动适应不同屏幕尺寸。其核心功能包括提供一系列易于使用的组件，帮助开发者快速构建适用于移动、桌面和网页布局的响应式用户界面。技术特点上，它支持自定义断点，并且可以轻松地与现有的 Flutter 项目集成。适合于需要跨平台响应式设计的应用场景，无论是开发新的应用还是优化现有项目的用户体验都非常适用。",2,"2026-06-11 03:22:22","top_language"]