flutter-screenutillisted
Install: claude install-skill noory-code/noory-ai
# Flutter ScreenUtil
Scale UI responsively based on a design reference size. Enables pixel-perfect reproduction of Figma designs across devices.
---
## Installation
```bash
flutter pub add flutter_screenutil
```
---
## Quick Reference
### Initialization
```dart
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ScreenUtilInit(
// Figma design reference size
designSize: Size(375, 812), // based on iPhone X
minTextAdapt: true,
splitScreenMode: true,
builder: (context, child) {
return MaterialApp(
home: HomePage(),
);
},
);
}
}
```
### Size Units
```dart
// width-based scale (w)
Container(
width: 100.w, // 100px in the design, scaled to fit the screen
height: 50.h, // height-based scale (h)
)
// radius (r) — for circles and rounded corners
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.r),
),
)
// scale-independent pixels (sp) — primarily for font sizes
Text(
'Hello',
style: TextStyle(fontSize: 16.sp),
)
// use .w for both dimensions when a square is needed
Container(
width: 50.w,
height: 50.w,
)
```
### Font Scaling
```dart
Text(
'Title',
style: TextStyle(
fontSize: 24.sp,
fontWeight: FontWeight.bold,
),
)
Text(
'Body',
style: TextStyle(
fontSize: 14.sp,
height: 1.5,
),
)