Flutter动态缩放尺寸插件 scaled_size 的使用

scaled_size 是一个简单的响应式设计插件，帮助你在Flutter应用中实现动态尺寸调整。以下是该插件的安装和使用方法。

安装

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

dependencies:
  ...
  scaled_size: ${latest-version}
  ...

请确保替换 ${latest-version} 为实际的最新版本号。

如何使用

初步设置

1. 在你的Dart代码中导入包：

   import 'package:scaled_size/scaled_size.dart';
   

2. 在 main.dart 中初始化 ScaledSizeUtil：

   import 'package:flutter/material.dart';
   import 'package:scaled_size/scaled_size.dart';
   
   void main() => runApp(MyApp());
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return ScaledSize(
           builder: () {
               return MaterialApp(
                   // Your code goes here
                   home: MyHomePage(),
               );
           },
       );
     }
   }
   

3. 使用参数时，请记得导入包。

设计尺寸

默认的设计尺寸是 Size(360, 640)，你可以通过传递 size 参数来覆盖它：

return ScaledSize(
    size: Size(480, 600), // For Example
    builder: () {
        return MaterialApp(...);
    },
);

关键参数

• .rh: 响应高度
• .rw: 响应宽度
• .vh: 屏幕高度百分比
• .vw: 屏幕宽度百分比
• .mv: 设备的最大视口尺寸
• .rem: 字体大小（类似于CSS）
• .rfs: 响应字体大小
• .br: 圆角半径值

其他参数

• ScaledSizeUtil.orientation: 获取设备的方向。
• ScaledSizeUtil.deviceType: 获取设备类型（如Mobile、Tablet等）。
• ScaledSizeUtil.screenHeight: 获取设备的高度。
• ScaledSizeUtil.screenWidth: 获取设备的宽度。

示例 Demo

下面是一个完整的示例，展示了如何使用这些参数：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScaledSize(
      allowTextScaling: true,
      builder: () {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: SafeArea(
            child: Scaffold(
              body: ListView(
                children: [
                  SizedBox(height: 20.rh),
                  Text(
                    "This is a Example app for scaled_size package",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 1.15.rem),
                  ),
                  SizedBox(height: 20.rh),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.network(
                        "https://images.pexels.com/photos/879109/pexels-photo-879109.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
                        width: 90.vw,
                      ),
                    ],
                  ),
                  SizedBox(height: 30.rh),
                  Text(
                    "This is a text having fontSize in sp and scaling is set to true by default",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 15.rfs),
                  ),
                  SizedBox(height: 30.rh),
                  Row(
                    children: [
                      Container(
                        width: 40.vw,
                        height: 20.vh,
                        color: Colors.red,
                      ),
                      SizedBox(width: 20.vw),
                      Container(
                        width: 40.vw,
                        height: 20.vh,
                        color: Colors.green,
                      ),
                    ],
                  ),
                  SizedBox(height: 30.rh),
                  Center(
                    child: TextButton(
                      onPressed: () {},
                      style: TextButton.styleFrom(
                        backgroundColor: Color(0xFFFF5555),
                        primary: Colors.white,
                        elevation: 5.rh,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(8.br),
                        ),
                      ),
                      child: Text(
                        "This is a button",
                        style: TextStyle(fontSize: 13.rfs),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

以上示例展示了如何使用 scaled_size 插件来创建响应式的Flutter应用界面。希望这个指南对你有所帮助！如果有任何问题或反馈，请访问 Github Issue 进行讨论。