[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9150":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":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":16,"starSnapshotCount":16,"syncStatus":31,"lastSyncTime":32,"discoverSource":33},9150,"flutter_screenutil","OpenFlutter\u002Fflutter_screenutil","OpenFlutter","Flutter screen adaptation, font adaptation, get screen information","https:\u002F\u002Fpub.dartlang.org\u002Fpackages\u002Fflutter_screenutil",null,"Dart",4027,509,57,31,0,60.12,"Apache License 2.0",false,"master",true,[23,24,25,26,27],"dart","flutter","scale","screen","screenutil","2026-06-12 04:00:43","# flutter_screenutil\n\n[![Flutter Package](https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fflutter_screenutil.svg)](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_screenutil)\n[![Pub Points](https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fpoints\u002Fflutter_screenutil)](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_screenutil\u002Fscore)\n[![Popularity](https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fpopularity\u002Fflutter_screenutil)](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_screenutil\u002Fscore)\n[![CodeFactor](https:\u002F\u002Fwww.codefactor.io\u002Frepository\u002Fgithub\u002Fopenflutter\u002Fflutter_screenutil\u002Fbadge)](https:\u002F\u002Fwww.codefactor.io\u002Frepository\u002Fgithub\u002Fopenflutter\u002Fflutter_screenutil)\n\n**A flutter plugin for adapting screen and font size.Let your UI display a reasonable layout on different screen sizes!**\n\n*Note*: This plugin is still under development, and some APIs might not be available yet.\n\n[中文文档](https:\u002F\u002Fgithub.com\u002FOpenFlutter\u002Fflutter_screenutil\u002Fblob\u002Fmaster\u002FREADME_CN.md)  \n\n[README em Português](https:\u002F\u002Fgithub.com\u002FOpenFlutter\u002Fflutter_screenutil\u002Fblob\u002Fmaster\u002FREADME_PT.md)\n\n[github](https:\u002F\u002Fgithub.com\u002FOpenFlutter\u002Fflutter_screenutil)\n\n[Update log](https:\u002F\u002Fgithub.com\u002FOpenFlutter\u002Fflutter_screenutil\u002Fblob\u002Fmaster\u002FCHANGELOG.md)\n\n\u003Cp align=\"center\">\n\u003Ca href=\"https:\u002F\u002Fafdian.com\u002Fa\u002Fzy124\">\u003Cimg width=\"200\" src=\"https:\u002F\u002Fpic1.afdiancdn.com\u002Fstatic\u002Fimg\u002Fwelcome\u002Fbutton-sponsorme.png\" alt=\"zy0124\">\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\n\u003Ca href=\"https:\u002F\u002Fwww.buymeacoffee.com\u002FzhuoyuanL\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fcdn.buymeacoffee.com\u002Fbuttons\u002Fv2\u002Fdefault-green.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n## Usage\n\n### Add dependency\n\nPlease check the latest version before installation.\nIf there is any problem with the new version, please use the previous version\n\n```yaml\ndependencies:\n  flutter:\n    sdk: flutter\n  # add flutter_screenutil\n  flutter_screenutil: ^{latest version}\n```\n\n### Add the following imports to your Dart code\n\n```dart\nimport 'package:flutter_screenutil\u002Fflutter_screenutil.dart';\n```\n\n### Properties\n\n| Property          | Type             | Default Value | Description                                                                                                                                   |\n| ----------------- | ---------------- | ------------- |-----------------------------------------------------------------------------------------------------------------------------------------------|\n| designSize        | Size             | Size(360,690) | The size of the device screen in the design draft, in dp                                                                                      |\n| builder           | Function         | null          | Return widget that uses the library in a property (ex: MaterialApp's theme)                                                                   |\n| child             | Widget           | null          | A part of builder that its dependencies\u002Fproperties don't use the library                                                                      |\n| rebuildFactor     | Function         | _default_     | Function that take old and new screen metrics and returns whether to rebuild or not when changes.                                             |\n| splitScreenMode   | bool             | false         | support for split screen                                                                                                                      |\n| minTextAdapt      | bool             | false         | Whether to adapt the text according to the minimum of width and height                                                                        |\n| context           | BuildContext     | null          | Get physical device data if not provided, by MediaQuery.of(context)                                                                           |\n| fontSizeResolver  | Function         | _default_     | Function that specify how font size should be adapted. Default is that font size scale with width of screen.                                  |\n| responsiveWidgets | Iterable\u003CString> | null          | List\u002FSet of widget names that should be included in rebuilding tree. (See [How flutter_screenutil marks a widget needs build](#rebuild-list)) |\n| excludeWidgets    | Iterable\u003CString> | null          | List\u002FSet of widget names that should be excluded from rebuilding tree.                                                                        |\n| enableScaleWH    | Function | null          | Support enable scale width and height.                                                                                                        |\n| enableScaleText    | Function | null          | Support enable scale text.                                                                                                                    |\n\n\n**Note : You must either provide builder, child or both.**\n\n### Rebuild list\nStarting from version 5.9.0, ScreenUtilInit won't rebuild the whole widget tree, instead it will mark widget needs build only if:\n- Widget is not a flutter widget (widgets are available in [Flutter Docs](https:\u002F\u002Fdocs.flutter.dev\u002Freference\u002Fwidgets))\n- Widget does not start with underscore (`_`)\n- Widget does not declare `SU` mixin\n- `responsiveWidgets` does not contains widget name\n\nIf you have a widget that uses the library and doesn't meet these options you can either add `SU` mixin or add widget name in responsiveWidgets list.\n\n### Initialize and set the fit size and font size to scale according to the system's \"font size\" accessibility option \n\nPlease set the size of the design draft before use, the width and height of the design draft.\n\n#### The first way (You should use it once in your app)\n\n```dart\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  const MyApp({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    \u002F\u002FSet the fit size (Find your UI design, look at the dimensions of the device screen and fill it in,unit in dp)\n    return ScreenUtilInit(\n      designSize: const Size(360, 690),\n      minTextAdapt: true,\n      splitScreenMode: true,\n      \u002F\u002F Use builder only if you need to use library outside ScreenUtilInit context\n      builder: (_ , child) {\n        return MaterialApp(\n          debugShowCheckedModeBanner: false,\n          title: 'First Method',\n          \u002F\u002F You can use the library anywhere in the app even in theme\n          theme: ThemeData(\n            primarySwatch: Colors.blue,\n            textTheme: Typography.englishLike2018.apply(fontSizeFactor: 1.sp),\n          ),\n          home: child,\n        );\n      },\n      child: const HomePage(title: 'First Method'),\n    );\n  }\n}\n```\n\n#### The second way:You need a trick to support font adaptation in the textTheme of app theme\n\n**Hybrid development uses the second way**\n\nnot support this:\n\n```dart\nMaterialApp(\n  ...\n  \u002F\u002FTo support the following, you need to use the first initialization method\n  theme: ThemeData(\n    textTheme: TextTheme(\n      button: TextStyle(fontSize: 45.sp)\n    ),\n  ),\n)\n```\n\nbut you can do this:\n\n```dart\nvoid main() async {\n  \u002F\u002F Add this line\n  await ScreenUtil.ensureScreenSize();\n  runApp(MyApp());\n}\n...\nMaterialApp(\n  ...\n  builder: (ctx, child) {\n    ScreenUtil.init(ctx);\n    return Theme(\n      data: ThemeData(\n        primarySwatch: Colors.blue,\n        textTheme: TextTheme(bodyText2: TextStyle(fontSize: 30.sp)),\n      ),\n      child: HomePage(title: 'FlutterScreenUtil Demo'),\n    );\n  },\n)\n```\n\n```dart\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      debugShowCheckedModeBanner: false,\n      title: 'Flutter_ScreenUtil',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: HomePage(title: 'FlutterScreenUtil Demo'),\n    );\n  }\n}\n\nclass HomePage extends StatefulWidget {\n  const HomePage({Key key, this.title}) : super(key: key);\n\n  final String title;\n\n  @override\n  _HomePageState createState() => _HomePageState();\n}\n\nclass _HomePageState extends State\u003CHomePage> {\n  @override\n  Widget build(BuildContext context) {\n    \u002F\u002FSet the fit size (fill in the screen size of the device in the design) \n    \u002F\u002FIf the design is based on the size of the 360*690(dp)\n    ScreenUtil.init(context, designSize: const Size(360, 690));\n    ...\n  }\n}\n```\n\n**Note: calling ScreenUtil.init second time, any non-provided parameter will not be replaced with default value. Use ScreenUtil.configure instead**\n\n### API\n\n#### Enable or disable scale\n\n```dart\n  Widget build(BuildContext context) {\n    return ScreenUtilInit(\n      enableScaleWH: ()=>false,\n      enableScaleText: ()=>false,\n      \u002F\u002F...\n    );\n  }\n```\n\nor\n\n```dart\nScreenUtil.enableScale(enableWH: () => false, enableText: () => false);\n```\n\n\n#### Pass the dp size of the design draft\n\n```dart\n    ScreenUtil().setWidth(540)  (dart sdk>=2.6 : 540.w) \u002F\u002FAdapted to screen width\n    ScreenUtil().setHeight(200) (dart sdk>=2.6 : 200.h) \u002F\u002FAdapted to screen height , under normal circumstances, the height still uses x.w\n    ScreenUtil().radius(200)    (dart sdk>=2.6 : 200.r)    \u002F\u002FAdapt according to the smaller of width or height\n    ScreenUtil().setSp(24)      (dart sdk>=2.6 : 24.sp) \u002F\u002FAdapter font\n    12.sm   \u002F\u002Freturn min(12,12.sp)\n\n    ScreenUtil().pixelRatio       \u002F\u002FDevice pixel density\n    ScreenUtil().screenWidth   (dart sdk>=2.6 : 1.sw)    \u002F\u002FDevice width\n    ScreenUtil().screenHeight  (dart sdk>=2.6 : 1.sh)    \u002F\u002FDevice height\n    ScreenUtil().bottomBarHeight  \u002F\u002FBottom safe zone distance, suitable for buttons with full screen\n    ScreenUtil().statusBarHeight  \u002F\u002FStatus bar height , Notch will be higher\n    ScreenUtil().textScaleFactor  \u002F\u002FSystem font scaling factor\n\n    ScreenUtil().scaleWidth \u002F\u002FThe ratio of actual width to UI design\n    ScreenUtil().scaleHeight \u002F\u002FThe ratio of actual height to UI design\n\n    ScreenUtil().orientation  \u002F\u002FScreen orientation\n    0.2.sw  \u002F\u002F0.2 times the screen width\n    0.5.sh  \u002F\u002F50% of screen height\n    20.setVerticalSpacing  \u002F\u002F SizedBox(height: 20 * scaleHeight)\n    20.horizontalSpace  \u002F\u002F SizedBox(height: 20 * scaleWidth)\n    const RPadding.all(8)   \u002F\u002F Padding.all(8.r) - take advantage of const key word\n    EdgeInsets.all(10).w    \u002F\u002FEdgeInsets.all(10.w)\n    REdgeInsets.all(8)       \u002F\u002F EdgeInsets.all(8.r)\n    EdgeInsets.only(left:8,right:8).r \u002F\u002F EdgeInsets.only(left:8.r,right:8.r).\n    BoxConstraints(maxWidth: 100, minHeight: 100).w    \u002F\u002FBoxConstraints(maxWidth: 100.w, minHeight: 100.w)\n    Radius.circular(16).w          \u002F\u002FRadius.circular(16.w)\n    BorderRadius.all(Radius.circular(16)).w  \n```\n\n#### Adapt screen size\n\nPass the dp size of the design draft((The unit is the same as the unit at initialization))：\n\nAdapted to screen width: `ScreenUtil().setWidth(540)`,\n\nAdapted to screen height: `ScreenUtil().setHeight(200)`, In general, the height is best to adapt to the width\n\nIf your dart sdk>=2.6, you can use extension functions:\n\nexample:\n\ninstead of :\n\n```dart\nContainer(\n  width: ScreenUtil().setWidth(50),\n  height:ScreenUtil().setHeight(200),\n)\n```\n\nyou can use it like this:\n\n```dart\nContainer(\n  width: 50.w,\n  height:200.h\n)\n```\n\n#### `Note`\n\nThe height can also use setWidth to ensure that it is not deformed(when you want a square)\n\nThe setHeight method is mainly to adapt to the height, which is used when you want to control the height of a screen on the UI to be the same as the actual display.\n\nGenerally speaking, 50.w!=50.h.\n\n```dart\n\u002F\u002Ffor example:\n\n\u002F\u002FIf you want to display a rectangle:\nContainer(\n  width: 375.w,\n  height: 375.h,\n),\n            \n\u002F\u002FIf you want to display a square based on width:\nContainer(\n  width: 300.w,\n  height: 300.w,\n),\n\n\u002F\u002FIf you want to display a square based on height:\nContainer(\n  width: 300.h,\n  height: 300.h,\n),\n\n\u002F\u002FIf you want to display a square based on minimum(height, width):\nContainer(\n  width: 300.r,\n  height: 300.r,\n),\n```\n\n#### Adapter font\n\n``` dart\n\u002F\u002FIncoming font size(The unit is the same as the unit at initialization)\nScreenUtil().setSp(28) \n28.sp\n\n\u002F\u002Ffor example:\nColumn(\n  crossAxisAlignment: CrossAxisAlignment.start,\n  children: \u003CWidget>[\n    Text(\n      '16sp, will not change with the system.',\n      style: TextStyle(\n        color: Colors.black,\n        fontSize: 16.sp,\n      ),\n      textScaleFactor: 1.0,\n    ),\n    Text(\n      '16sp,if data is not set in MediaQuery,my font size will change with the system.',\n      style: TextStyle(\n        color: Colors.black,\n        fontSize: 16.sp,\n      ),\n    ),\n  ],\n)\n```\n\n#### Setting font does not change with system font size\n\nAPP global:\n\n```dart\nMaterialApp(\n  debugShowCheckedModeBanner: false,\n  title: 'Flutter_ScreenUtil',\n  theme: ThemeData(\n    primarySwatch: Colors.blue,\n  ),\n  builder: (context, widget) {\n    return MediaQuery(\n      \u002F\u002F\u002FSetting font does not change with system font size\n      data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),\n      child: widget,\n    );\n  },\n  home: HomePage(title: 'FlutterScreenUtil Demo'),\n),\n```\n\nSpecified Text:\n\n```dart\nText(\"text\", textScaleFactor: 1.0)\n```\n\nSpecified Widget:\n\n```dart\nMediaQuery(\n  \u002F\u002F If there is no context available you can wrap [MediaQuery] with [Builder]\n  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),\n  child: AnyWidget(),\n)\n```\n\n[widget test](https:\u002F\u002Fgithub.com\u002FOpenFlutter\u002Fflutter_screenutil\u002Fissues\u002F115)\n\n### Example\n\n[example demo](https:\u002F\u002Fgithub.com\u002FOpenFlutter\u002Fflutter_screenutil\u002Fblob\u002Fmaster\u002Fexample\u002Flib)\n\nTo use second method run: `flutter run --dart-define=method=2`\n\n### Effect\n\n![effect](demo_en.png)\n![tablet effect](demo_tablet_en.png)\n\n\n### Update for Version 5.9.0 (Tests)\nReported as bug in [#515](https:\u002F\u002Fgithub.com\u002FOpenFlutter\u002Fflutter_screenutil\u002Fissues\u002F515)\n\n\nIn version 5.9.0, to ensure compatibility and proper functioning of your tests, it is crucial to use the method `tester.pumpAndSettle()`; when conducting widget tests that depend on animations or a settling time to complete their state.\n\nIn the previous version, this step was not strictly necessary. However, to maintain consistency in your tests and avoid unexpected errors, it's strongly recommended incorporating await tester.pumpAndSettle(); in your widget tests if you are using version 5.9.0\n\nExample usage:\n```dart\ntestWidgets('Should ensure widgets settle correctly', (WidgetTester tester) async {\nawait tester.pumpWidget(\n  const MaterialApp(\n    home: ScreenUtilInit(\n      child: MyApp(),\n    ),  \n  ),\n);\n\u002F\u002F Insertion of recommended method to prevent failures\nawait tester.pumpAndSettle();\n\u002F\u002F Continue with your assertions and tests\n});\n```\n","flutter_screenutil 是一个 Flutter 插件，用于屏幕和字体大小的适配，确保用户界面在不同尺寸的屏幕上都能合理布局。其核心功能包括屏幕尺寸适应、字体大小调整以及获取屏幕信息等，通过设置设计稿中的基准尺寸（默认为 360x690 dp），开发者可以轻松实现跨设备的一致性视觉效果。该插件特别适用于需要高度自定义UI且关注用户体验一致性的移动应用开发场景中。采用 Dart 语言编写，并遵循 Apache License 2.0 开源协议，目前已有超过 4000 个 Star 和 500 多次 Fork，表明它在社区内得到了广泛认可与使用。",2,"2026-06-11 03:21:28","top_language"]