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

sizer 

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';


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