Flutter屏幕缩放管理插件flutter_screen_scaler的使用

flutter_screen_scaler 是一个用于根据屏幕大小调整小部件尺寸的Flutter插件，它允许你使用百分比来定义高度、宽度和字体大小，从而实现响应式布局。以下是如何使用该插件的详细指南。

使用步骤

添加依赖

首先，在你的 pubspec.yaml 文件中添加对 flutter_screen_scaler 的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_screen_scaler: ^2.1.0

导入到Dart文件

在需要使用的Dart文件中导入 flutter_screen_scaler 包：

import 'package:flutter_screen_scaler/flutter_screen_scaler.dart';

使用插件

通过创建 ScreenScaler 实例并调用其 init(context) 方法初始化屏幕缩放器，然后可以使用 getHeight(percentage) 和 getWidth(percentage) 方法来获取基于百分比的高度和宽度值。同样地，可以使用 getTextSize(percentage) 方法来设置字体大小。

下面是一个完整的示例代码，展示了如何在一个页面中应用这些功能：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Screen Scaler Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ExamplePage(),
    );
  }
}

class ExamplePage extends StatefulWidget {
  ExamplePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _ExamplePageState createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    ScreenScaler scaler = ScreenScaler()..init(context);

    return Scaffold(
      body: Container(
        color: Colors.amber,
        child: Column(
          children: <Widget>[
            // 防止与状态栏重叠
            Container(height: 30),
            Container(
              alignment: Alignment.center,
              color: Colors.white,
              height: scaler.getHeight(50), // 占据屏幕高度的50%
              width: scaler.getWidth(90),   // 占据屏幕宽度的90%
              child: Text(
                "Height:50%\nWidth:90%\nFont Size:15%",
                style: TextStyle(
                  fontSize: scaler.getTextSize(15), // 字体大小为设计稿的15%
                ),
              ),
            ),
            Row(
              children: <Widget>[
                Container(
                  alignment: Alignment.center,
                  color: Colors.green,
                  height: scaler.getHeight(50),
                  width: scaler.getWidth(50),
                  child: Text(
                    "Height:50%\nWidth:50%\nFont Size:14%",
                    style: TextStyle(fontSize: scaler.getTextSize(14)),
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  color: Colors.blue,
                  height: scaler.getHeight(25),
                  width: scaler.getWidth(25),
                  child: Text(
                    "Height:25%\nWidth:25%\nFont Size:10%",
                    style: TextStyle(fontSize: scaler.getTextSize(10)),
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  color: Colors.red,
                  height: scaler.getHeight(12.5),
                  width: scaler.getWidth(12.5),
                  child: Text(
                    "Height:12.5%\nWidth:12.5%\nFont Size:8%",
                    style: TextStyle(fontSize: scaler.getTextSize(8)),
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  color: Colors.orange,
                  height: scaler.getHeight(50),
                  width: scaler.getWidth(12.5),
                  child: Text(
                    "Height:50%\nWidth:12.5%\nFont Size:8%",
                    style: TextStyle(fontSize: scaler.getTextSize(8)),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}