Flutter屏幕适配插件responsive_size

Flutter屏幕适配插件responsive_size_utils的使用

responsive_size_utils 是一个用于在不同设备上创建美观且合理的用户界面的包。它能够帮助开发者避免大量的手动调整工作。

使用文档

以下是一个完整的示例，展示如何在Flutter应用中使用 responsive_size_utils 包。

示例代码

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

void main() {
  runApp(
    App(),
  );
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 设置设计稿尺寸
    return ResponsiveWidget(
      designedSize: Size(
        375,
        812,
      ),
      builder: () {
        return MaterialApp(
          home: Scaffold(
            body: Container(
              child: Column(
                children: [
                  // 使用fullWidth方法获取屏幕宽度
                  Container(
                    width: ResponsiveSizeUtils.fullWidth(),
                    height: 23.rHeight(), // 使用rHeight方法将高度转换为响应式单位
                    color: Colors.red,
                  ),
                  // 使用fullHeight方法获取屏幕高度
                  Container(
                    width: ResponsiveSizeUtils.fullHeight(),
                    height: 23.0.rHeight(), // 使用rHeight方法将高度转换为响应式单位
                    color: Colors.red,
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

说明

导入包：

import 'package:responsive_size_utils/responsive_size_utils.dart';

设置设计稿尺寸：

ResponsiveWidget(
  designedSize: Size(
    375,
    812,
  ),
  builder: () {
    // 应用主体部分
  }
)

这里设置设计稿尺寸为 375x812，通常这是iPhone X的设计尺寸。

获取屏幕宽度：
```
width: ResponsiveSizeUtils.fullWidth()
```
使用 ResponsiveSizeUtils.fullWidth() 获取当前屏幕的宽度。
获取屏幕高度：
```
height: 23.rHeight()
```
使用 23.rHeight() 将给定的高度值转换为响应式单位。

构建UI：

return MaterialApp(
  home: Scaffold(
    body: Container(
      child: Column(
        children: [
          Container(
            width: ResponsiveSizeUtils.fullWidth(),
            height: 23.rHeight(),
            color: Colors.red,
          ),
          Container(
            width: ResponsiveSizeUtils.fullHeight(),
            height: 23.0.rHeight(),
            color: Colors.red,
          ),
        ],
      ),
    ),
  ),
);

更多关于Flutter屏幕适配插件responsive_size_utils的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

eggper 1楼

更多关于Flutter屏幕适配插件responsive_size_utils的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何使用 responsive_size_utils 插件进行 Flutter 屏幕适配的代码案例。responsive_size_utils 是一个流行的 Flutter 插件，它提供了一种简单的方法来根据屏幕大小调整 UI 元素的大小，从而实现响应式设计。

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

dependencies:
  flutter:
    sdk: flutter
  responsive_size_utils: ^x.y.z  # 替换为最新版本号

然后，运行 flutter pub get 命令来获取依赖。

接下来，你可以在你的 Flutter 应用中使用 ResponsiveSize 类来根据屏幕尺寸调整 UI 元素的大小。以下是一个简单的示例，展示了如何使用 ResponsiveSize 来设置文本大小和容器宽度。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive Size Utils Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ResponsiveScreen(),
    );
  }
}

class ResponsiveScreen extends StatelessWidget {
  final double screenWidth = ResponsiveSize.of(context).screenWidth;
  final double screenHeight = ResponsiveSize.of(context).screenHeight;
  final double blockSizeHorizontal = ResponsiveSize.of(context).blockSizeHorizontal;
  final double blockSizeVertical = ResponsiveSize.of(context).blockSizeVertical;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Size Utils Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Screen Width: $screenWidth',
              style: TextStyle(fontSize: blockSizeHorizontal * 4), // 使用blockSizeHorizontal调整字体大小
            ),
            SizedBox(height: blockSizeVertical * 2),
            Text(
              'Screen Height: $screenHeight',
              style: TextStyle(fontSize: blockSizeVertical * 4), // 使用blockSizeVertical调整字体大小
            ),
            SizedBox(height: blockSizeVertical * 2),
            Container(
              width: screenWidth * 0.8, // 使用屏幕宽度的80%
              height: blockSizeVertical * 20, // 使用blockSizeVertical调整高度
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Responsive Container',
                  style: TextStyle(color: Colors.white, fontSize: blockSizeHorizontal * 3), // 使用blockSizeHorizontal调整字体大小
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

注意：上面的代码有一个问题，即 ResponsiveSize.of(context) 在 ResponsiveScreen 类的成员变量初始化中无法使用，因为 context 在构建函数之外是不可用的。为了解决这个问题，我们可以将 ResponsiveSize 的值在 build 方法中计算，或者使用 Provider 或 InheritedWidget 等状态管理方法来在整个应用中传递屏幕尺寸。

下面是修正后的代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive Size Utils Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ResponsiveScreen(),
    );
  }
}

class ResponsiveScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final double screenWidth = ResponsiveSize.of(context).screenWidth;
    final double screenHeight = ResponsiveSize.of(context).screenHeight;
    final double blockSizeHorizontal = ResponsiveSize.of(context).blockSizeHorizontal;
    final double blockSizeVertical = ResponsiveSize.of(context).blockSizeVertical;

    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Size Utils Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Screen Width: $screenWidth',
              style: TextStyle(fontSize: blockSizeHorizontal * 4),
            ),
            SizedBox(height: blockSizeVertical * 2),
            Text(
              'Screen Height: $screenHeight',
              style: TextStyle(fontSize: blockSizeVertical * 4),
            ),
            SizedBox(height: blockSizeVertical * 2),
            Container(
              width: screenWidth * 0.8,
              height: blockSizeVertical * 20,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Responsive Container',
                  style: TextStyle(color: Colors.white, fontSize: blockSizeHorizontal * 3),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个修正后的代码中，ResponsiveSize.of(context) 被正确地放在 build 方法中，确保 context 是可用的。这样，你就可以根据屏幕尺寸动态调整 UI 元素的大小了。