Flutter屏幕适配与尺寸配置插件size_configurator的使用

Flutter屏幕适配与尺寸配置插件size_configurator的使用

特性

• 响应式缩放：根据屏幕大小和方向按比例缩放文本、图片和其他UI组件。
• 支持不同方向：自动调整为竖屏和横屏模式。
• 平台特定调整：针对Android和iOS设备调整屏幕宽度，以实现更好的响应性。

开始使用

要开始在您的Flutter项目中使用size_configurator包：

1. 在您的pubspec.yaml文件中添加依赖项：

dependencies:
  size_configurator:
    git:
      url: https://github.com/your-username/size_configurator.git

示例代码

以下是一个简单的示例，展示如何使用size_configurator插件来创建一个响应式的用户界面。

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

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

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 在LayoutBuilder和OrientationBuilder内部初始化SizeConfig
    return LayoutBuilder(
      builder: (context, constraints) {
        return OrientationBuilder(
          builder: (context, orientation) {
            // 初始化SizeConfig
            SizeConfig().init(constraints, orientation);

            return Scaffold(
              appBar: AppBar(
                title: Text('响应式UI示例'),
              ),
              body: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      '屏幕宽度: ${SizeConfig.screenWidth.toStringAsFixed(2)}',
                      style: TextStyle(
                        fontSize: 16 * SizeConfig.textMultiplier,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 20),
                    Text(
                      '文本缩放因子: ${SizeConfig.textMultiplier.toStringAsFixed(2)}',
                      style: TextStyle(
                        fontSize: 14 * SizeConfig.textMultiplier,
                      ),
                    ),
                    SizedBox(height: 20),
                    Container(
                      padding: EdgeInsets.symmetric(
                        horizontal: 20 * SizeConfig.widthMultiplier,
                        vertical: 10 * SizeConfig.heightMultiplier,
                      ),
                      decoration: BoxDecoration(
                        color: Colors.blueAccent,
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Text(
                        '响应式容器',
                        style: TextStyle(
                          fontSize: 18 * SizeConfig.textMultiplier,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        );
      },
    );
  }
}