Flutter库推荐sizer可帮助您轻松创建响应式UI

一个 Flutter 插件，用于轻松使 Flutter 应用程序响应。自动使 UI 适应不同的屏幕尺寸。响应变得简单。

安装⬇️

添加到 pubspec.yaml。

dependencies:  ...  sizer: ^2.0.15

参数⚙️

• .h- 返回基于设备计算的高度

• .w- 根据设备返回计算出的宽度

• .sp- 返回基于设备计算的 sp

• SizerUtil.orientation- 用于屏幕方向纵向或横向

• SizerUtil.deviceType- 适用于设备类型手机或平板电脑

用法💻

将以下导入添加到您的 Dart 代码中：

import 'package:sizer/sizer.dart';

用 ResponsiveSizer 小部件包装 MaterialApp

Sizer(      builder: (context, orientation, deviceType) {
  
          return MaterialApp(          debugShowCheckedModeBanner: false,          title: 'Sizer',          theme: ThemeData.light(),          home: homePage(),        );      },    )

每当您使用高度和宽度时，首先导入 sizer 包。

import 'package:sizer/sizer.dart';

小部件大小🕓

    Container(      width: 20.w,    //It will take a 20% of screen width      height:30.h     //It will take a 30% of screen height    )

填充⏹

    Padding(      padding: EdgeInsets.symmetric(vertical: 5.h, horizontal: 3.h),      child: Container(),    );

字体大小🆎

    Text(      'Sizer',style: TextStyle(fontSize: 15.sp),    );

方形小部件🟩

如果你想制作方形大小的小部件，那么在高度和宽度中给出高度或宽度。

    Container(            width: 30.h,      //It will take a 30% of screen height            height: 30.h,     //It will take a 30% of screen height    );

方向🔄

如果您想同时支持纵向和横向

Device.orientation == Orientation.portrait  ? Container(   // Widget for Portrait      width: 100.w,      height: 20.5.h,   )  : Container(   // Widget for Landscape      width: 100.w,      height: 12.5.h,   )

设备类型📱

如果您希望相同的布局在平板电脑和移动设备中看起来不同，请使用以下SizerUtil.deviceType方法：

SizerUtil.deviceType == DeviceType.mobile  ? Container(   // Widget for Mobile      width: 100.w,      height: 20.5.h,   )  : Container(   // Widget for Tablet      width: 100.w,      height: 12.5.h,   )

建议

方向

如果您想同时支持纵向和横向，请为两个类似方向示例制作单独的小部件。

设备类型

如果您想同时支持移动设备和平板电脑，请为两者制作单独的小部件，例如 deviceType 示例。

注意

您需要导入sizer包才能访问number.h、number.w和number.sp

**VSCode 和 Android Studio 中的自动导入不适用于 dart 扩展方法。**键入10.h不会显示此包的自动导入建议

一种解决方法是键入Device以便显示自动导入建议：

import 'package:sizer/sizer.dart';

这也是一个很不错的包，希望大家喜欢。