widget_sizer 是一个 Flutter 插件，用于帮助开发者在不同的屏幕尺寸和方向上更方便地调整和布局小部件。它提供了一些便捷的工具和方法，使得在响应式设计中处理布局变得更加轻松。

安装

首先，你需要在 pubspec.yaml 文件中添加 widget_sizer 依赖：

dependencies:
  flutter:
    sdk: flutter
  widget_sizer: ^2.0.0

然后运行 flutter pub get 来安装依赖。

基本用法

1. WidgetSizer 组件

WidgetSizer 是一个 InheritedWidget，它提供了当前设备的屏幕尺寸信息。你可以通过它来获取屏幕的宽度、高度、方向等信息。

import 'package:flutter/material.dart';
import 'package:widget_sizer/widget_sizer.dart';

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WidgetSizer(
        builder: (context, orientation, screenType) {
          return Scaffold(
            appBar: AppBar(
              title: Text('WidgetSizer Example'),
            ),
            body: Center(
              child: Text(
                'Screen Width: ${WidgetSizerUtil.getScreenWidth(context)} \n'
                'Screen Height: ${WidgetSizerUtil.getScreenHeight(context)} \n'
                'Orientation: $orientation \n'
                'Screen Type: $screenType',
                textAlign: TextAlign.center,
              ),
            ),
          );
        },
      ),
    );
  }
}

2. WidgetSizerUtil 工具类

WidgetSizerUtil 提供了一些静态方法来获取屏幕的尺寸信息：

• getScreenWidth(BuildContext context): 获取屏幕的宽度。
• getScreenHeight(BuildContext context): 获取屏幕的高度。
• getOrientation(BuildContext context): 获取屏幕的方向（Orientation.portrait 或 Orientation.landscape）。
• getScreenType(BuildContext context): 获取屏幕的类型（ScreenType.small, ScreenType.medium, ScreenType.large）。

3. 响应式布局

你可以根据屏幕的尺寸和方向来调整布局。例如：

class ResponsiveLayout extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final screenWidth = WidgetSizerUtil.getScreenWidth(context);
    final screenHeight = WidgetSizerUtil.getScreenHeight(context);
    final orientation = WidgetSizerUtil.getOrientation(context);

    if (orientation == Orientation.portrait) {
      return Column(
        children: [
          Container(
            width: screenWidth * 0.8,
            height: screenHeight * 0.3,
            color: Colors.blue,
          ),
          Container(
            width: screenWidth * 0.8,
            height: screenHeight * 0.3,
            color: Colors.green,
          ),
        ],
      );
    } else {
      return Row(
        children: [
          Container(
            width: screenWidth * 0.4,
            height: screenHeight * 0.8,
            color: Colors.blue,
          ),
          Container(
            width: screenWidth * 0.4,
            height: screenHeight * 0.8,
            color: Colors.green,
          ),
        ],
      );
    }
  }
}

高级用法

1. 自定义屏幕类型

你可以通过 WidgetSizer 的 screenTypeBreakpoints 参数来自定义屏幕类型的断点：

WidgetSizer(
  screenTypeBreakpoints: ScreenTypeBreakpoints(
    small: 600,
    medium: 900,
    large: 1200,
  ),
  builder: (context, orientation, screenType) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Screen Type Example'),
      ),
      body: Center(
        child: Text(
          'Screen Type: $screenType',
          textAlign: TextAlign.center,
        ),
      ),
    );
  },
);

2. 使用 WidgetSizer 的 of 方法

你可以通过 WidgetSizer.of(context) 来获取 WidgetSizer 的实例，从而访问屏幕尺寸和方向信息：

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final widgetSizer = WidgetSizer.of(context);
    final screenWidth = widgetSizer.screenWidth;
    final screenHeight = widgetSizer.screenHeight;
    final orientation = widgetSizer.orientation;

    return Container(
      width: screenWidth * 0.5,
      height: screenHeight * 0.5,
      color: Colors.red,
      child: Center(
        child: Text('Orientation: $orientation'),
      ),
    );
  }
}