Flutter获取设备屏幕尺寸插件flutter_size的使用

flutter_size 是一个用于获取设备屏幕尺寸的Flutter插件。它可以帮助开发者轻松获取设备的宽度、高度等信息，并提供了多种便捷的方法来设置Widget的尺寸。

快速开始

添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_size: ^1.0.1

特性

• 跨平台支持：移动端、桌面端、浏览器
• 简单、强大且易于使用
• 没有原生依赖
• 节省时间并提高生产力

使用方法

获取设备尺寸

context.width(double size)

该方法根据设备宽度返回指定比例的宽度值，计算方式为 device_width * size。

context.height(double heightSize)

该方法根据设备高度返回指定比例的高度值，计算方式为 device_height * size。

示例代码

下面是一个简单的示例，展示如何使用 flutter_size 插件来设置容器的宽度和高度：

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

class CustomWidthAndHeight extends StatelessWidget {
  const CustomWidthAndHeight({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          color: Colors.blueGrey,
          width: context.width(0.4), // 宽度为设备宽度的40%
          height: context.height(0.3), // 高度为设备高度的30%
          child: const Text("Hello World!"),
        ),
      ),
    );
  }
}

获取设备的具体尺寸

context.deviceWidth

该方法返回设备的宽度。

context.deviceHeight

该方法返回设备的高度。

示例代码

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

class DeviceWidthAndHeight extends StatelessWidget {
  const DeviceWidthAndHeight({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          color: Colors.red,
          width: context.deviceWidth, // 设备宽度
          height: context.deviceHeight, // 设备高度
          child: const Text("Hello World!"),
        ),
      ),
    );
  }
}

其他实用方法

context.deviceOrientation

该方法返回设备当前的方向（横屏或竖屏）。

context.totalHeight

该方法返回设备的高度，但不包括状态栏和导航栏的高度。

context.platformBrightness

该方法返回设备的亮度模式（亮色或暗色模式）。

示例代码

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

class DeviceOrientationAndDeviceHeightAndPlatformBrightness extends StatelessWidget {
  const DeviceOrientationAndDeviceHeightAndPlatformBrightness({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text("Device Orientation is: ${context.deviceOrientation}"),
              const SizedBox(height: 40),
              Text("Device Height excluding appBar height and status bar height is: ${context.totalHeight}"),
              const SizedBox(height: 40),
              Text("Platform Brightness is: ${context.platformBrightness}"),
              ElevatedButton(
                onPressed: () {
                  context.returnBack();
                },
                child: const Text("Go Back"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

动态扩展理解

flutter_size 还提供了一些动态扩展方法，例如：

• (double height).verticalSpaceBetweenWidgets
• (double height).heightBox
• (double width).horizontalSpaceBetweenWidgets
• (double width).widthBox

这些方法可以用来创建具有指定高度或宽度的 SizedBox。

示例代码

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

class CustomSpaceBetweenWidgets extends StatelessWidget {
  const CustomSpaceBetweenWidgets({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            const Text('hello World'.fstLtCapitalize), // 返回首字母大写的字符串
            40.heightBox, // 创建一个高度为40的SizedBox
            40.verticalSpaceBetweenWidgets, // 同上
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('Hello'),
                40.widthBox, // 创建一个宽度为40的SizedBox
                45.horizontalSpaceBetweenWidgets, // 同上
                const Text('World!'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}