flutter_screenutil

flutter_screenutilis a toolkit for screen adaptation in Flutter applications. It is designed to help developers create responsive UI layouts on devices of different screen sizes and densities.

`flutter_screenutil`` provides some methods for handling size and spacing, allowing developers to dynamically adjust the size and position of UI elements according to the device's screen size and density. It provides the following functions:

Screen adaptation: flutter_screenutilAccording to the screen size and density of the device, the size on the design draft can be converted to the actual size suitable for the current device. This way, UI elements can fit the screen correctly whether you are running the app on a small-screen phone or a large-screen tablet.
Size adaptation: flutter_screenutilProvides setWidth()and setHeight()methods, by passing in the size on the design draft, it can be dynamically adjusted according to the screen width of the device, and returns the actual width after adaptation.
Font adaptation: flutter_screenutilProvides setSp()a method to adapt the font size according to the screen density of the device. By passing in the font size on the design draft, the font size can be dynamically adjusted according to the screen density of the current device.

Official documentation
https://pub-web.flutter-io.cn/packages/flutter_screenutil

Install

flutter pub add flutter_screenutil

principle

When designing the UI, it is generally designed according to a fixed size. For example 360 x 690, the actual device resolution may be Google Pixel: 1080 x 1920etc. If you write the values directly according to the design drawing during development, the final realized effect will be inconsistent with the design effect. At this time, you can use the proportional method to adapt.

Divide the design drawing into fixed units and define an identifier for this unit, for example, it is called w. Then, by obtaining the device resolution and dividing the real width of the device by the width of the design drawing, the real width represented by 1w is obtained:

1w = 设备真实宽度 / 设计图宽度

If the design size is 360 x 690, then the width is 360w, and the actual device width is 1080, then 1w = 1080 / 360 = 3.

example

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return ScreenUtilInit(
      // 设计尺寸
      designSize: const Size(360, 690),
      // 是否根据最小宽度和高度调整文本
      minTextAdapt: true,
      builder: (context, child) {
    
    
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: child,
        );
      },
      child: const MyHomePage(title: '适配'),
    );
  }
}

class MyHomePage extends StatefulWidget {
    
    
  const MyHomePage({
    
    super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Container(
            width: 200,
            height: 200,
            color: Colors.red,
            child: const Text(
              "适配后的的尺寸",
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          Container(
            width: ScreenUtil().setWidth(200),
            height: ScreenUtil().setWidth(200),
            color: Colors.blue,
            child: Text(
              "适配后的的尺寸",
              style: TextStyle(
                  fontSize: ScreenUtil().setSp(20), color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }
}

insert image description here

common method

ScreenUtil().setWidth(540)  //根据屏幕宽度适配尺寸
ScreenUtil().setHeight(200) //根据屏幕高度适配尺寸(一般根据宽度适配即可)
ScreenUtil().radius(200)    //根据宽度或高度中的较小者进行调整
ScreenUtil().setSp(24)      //字体大小适配

For convenience, abbreviations are also supported

ScreenUtil().setWidth(540)  =>  540.h
ScreenUtil().setHeight(200) =>  200.w
ScreenUtil().radius(200)    =>  200.r
ScreenUtil().setSp(24)      =>  24.sp

Note:
In general 1.w != 1.h, unless the proportion of the screen resolution is exactly the same as that of the design drawing, if you want to set a square, remember to use the same unit, such as setting the same w or h, otherwise it may be displayed as a rectangle.

Flutter: screen adaptation

flutter_screenutil

Guess you like