flutter_ui_sizer 是一个用于 Flutter 的 UI 布局插件，它可以帮助开发者根据屏幕尺寸动态调整 UI 元素的大小和位置。这个插件特别适用于需要适配不同屏幕尺寸和分辨率的应用程序。

安装

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

dependencies:
  flutter:
    sdk: flutter
  flutter_ui_sizer: ^1.0.0  # 请使用最新版本

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

基本用法

flutter_ui_sizer 提供了几个工具类和方法来帮助你根据屏幕尺寸调整 UI 元素。

1. UiSizer 类

UiSizer 类提供了静态方法来获取屏幕的宽度、高度以及根据屏幕尺寸调整的尺寸。

import 'package:flutter_ui_sizer/flutter_ui_sizer.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    double screenWidth = UiSizer.width;  // 获取屏幕宽度
    double screenHeight = UiSizer.height;  // 获取屏幕高度

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter UI Sizer Example'),
      ),
      body: Center(
        child: Container(
          width: UiSizer.widthPercent(50),  // 屏幕宽度的50%
          height: UiSizer.heightPercent(30),  // 屏幕高度的30%
          color: Colors.blue,
          child: Center(
            child: Text(
              'Hello, World!',
              style: TextStyle(
                fontSize: UiSizer.fontSize(20),  // 根据屏幕尺寸调整字体大小
              ),
            ),
          ),
        ),
      ),
    );
  }
}

2. UiSizerBuilder 类

UiSizerBuilder 是一个 Widget，它可以根据屏幕尺寸动态构建 UI。

import 'package:flutter_ui_sizer/flutter_ui_sizer.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter UI Sizer Example'),
      ),
      body: UiSizerBuilder(
        builder: (context, uiSizer) {
          return Center(
            child: Container(
              width: uiSizer.widthPercent(50),  // 屏幕宽度的50%
              height: uiSizer.heightPercent(30),  // 屏幕高度的30%
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Hello, World!',
                  style: TextStyle(
                    fontSize: uiSizer.fontSize(20),  // 根据屏幕尺寸调整字体大小
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

其他功能

flutter_ui_sizer 还提供了其他一些功能，例如：

• UiSizer.orientation: 获取当前屏幕方向（Orientation.portrait 或 Orientation.landscape）。
• UiSizer.aspectRatio: 获取屏幕的宽高比。
• UiSizer.devicePixelRatio: 获取设备的像素密度。

示例

以下是一个完整的示例，展示了如何使用 flutter_ui_sizer 来创建一个响应式布局：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter UI Sizer Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter UI Sizer Example'),
      ),
      body: UiSizerBuilder(
        builder: (context, uiSizer) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: uiSizer.widthPercent(80),  // 屏幕宽度的80%
                  height: uiSizer.heightPercent(20),  // 屏幕高度的20%
                  color: Colors.blue,
                  child: Center(
                    child: Text(
                      'Container 1',
                      style: TextStyle(
                        fontSize: uiSizer.fontSize(20),  // 根据屏幕尺寸调整字体大小
                      ),
                    ),
                  ),
                ),
                SizedBox(height: uiSizer.heightPercent(5)),  // 屏幕高度的5%
                Container(
                  width: uiSizer.widthPercent(60),  // 屏幕宽度的60%
                  height: uiSizer.heightPercent(15),  // 屏幕高度的15%
                  color: Colors.green,
                  child: Center(
                    child: Text(
                      'Container 2',
                      style: TextStyle(
                        fontSize: uiSizer.fontSize(18),  // 根据屏幕尺寸调整字体大小
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}