flutter_responsive_scale

一个用于适配屏幕和字体大小的 Flutter 插件。通过设备缩放，让您的 UI 在不同屏幕尺寸上显示合理的布局！

演示

ezgif-4-0040112d85

flutter_responsive_scale.mp4

特点

  • 响应式 UI
  • 简单的UI工具
  • 易于使用
  • 响应式查询选项 – 字体缩放、Y 轴缩放和宽度缩放

用法

添加依赖

安装前请检查最新版本。新版本有问题，请使用旧版本

dependencies:
  flutter:
    sdk: flutter
  # add flutter_responsive_scale
  flutter_responsive_scale: ^{latest version}

将以下导入添加到您的 Dart 代码中

import 'package:flutter_responsive_scale/flutter_responsive_scale.dart';

属性

属性 类型 参数 描述
context.Scale(size) 功能 所需的 double 值 来自设计的每台设备的像素缩放。其中 160 像素屏幕上的一个像素相当于 320 像素屏幕上的两个像素。也是 scaleX 的别名。
context.fontScale(14) 功能 所需的 double 值 相对于设备实际的字体大小设置。
context.scaleY() 功能 所需的 double 值 参考设备配置 – 设备的参考宽度。默认为 414px (iPhone XS Max) 参考设备高度。默认为 896px (iPhone XS Max)，应允许字体大小自动缩放。默认为 true
ResponsiveScaleConfig 类 height (double), width (double), allowFontScaling (bool – true) 来自设计的每台设备在垂直方向上的像素缩放。其中 160 像素屏幕上的一个像素相当于 320 像素屏幕上的两个像素。

初始化并设置适配大小和字体大小，以根据系统的“字体大小”辅助功能选项进行缩放

使用前请设置设计草图的缩放配置，设计草图的宽度、高度和 allowFontScaling。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ResponsiveScale(
      config: const ResponsiveScaleConfig(),
      child: MaterialApp(
        title: 'Responsive scale demo',
        theme: ThemeData.dark(),
        home: const ScaleTestPage(
          title: 'Hi , Flutter dev - ',
        ),
      ),
    );
  }
}

示例

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ResponsiveScale(
      config: const ResponsiveScaleConfig(),
      child: MaterialApp(
        title: 'Responsive scale demo',
        theme: ThemeData.dark(),
        home: const ScaleTestPage(
          title: 'Hi , Flutter dev - ',
        ),
      ),
    );
  }
}

class ScaleTestPage extends StatelessWidget {
  const ScaleTestPage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: SingleChildScrollView(
        padding: EdgeInsets.symmetric(
          horizontal: context.scale(7),
        ),
        child: Center(
          child: Column(
            children: <Widget>[
              SizedBox(height: context.scale(16)),
              Text(
                'Designed at ${ResponsiveScale.of(context).width} x ${ResponsiveScale.of(context).height}',
                style: TextStyle(
                  fontSize: context.fontScale(16),
                ),
                textAlign: TextAlign.center,
              ),
              SizedBox(
                height: context.scale(16),
              ),
              Container(
                alignment: Alignment.topLeft,
                padding: EdgeInsets.only(
                  bottom: context.scaleY(10),
                ),
                child: Text(
                  'With scale box',
                  style: TextStyle(
                    fontSize: context.fontScale(14),
                  ),
                  textAlign: TextAlign.left,
                ),
              ),
              RenderBoxes(
                size: Size.square(
                  context.scale(100),
                ),
                color: Colors.red,
                label: const ["100dp", "100dp"],
              ),
              SizedBox(
                height: context.scale(16),
              ),
              Container(
                alignment: Alignment.topLeft,
                padding: EdgeInsets.only(
                  bottom: context.scaleY(10),
                ),
                child: Text(
                  'Without scale box',
                  style: TextStyle(
                    fontSize: context.fontScale(14),
                  ),
                  textAlign: TextAlign.left,
                ),
              ),
              const RenderBoxes(
                size: Size.square(
                  100,
                ),
                color: Colors.blue,
                label: ["100", "100"],
              ),
              SizedBox(
                height: context.scale(16),
              ),
              const Text(
                'The text font size is fixed at 24',
                style: TextStyle(
                  fontSize: 24,
                ),
                textAlign: TextAlign.center,
              ),
              SizedBox(
                height: context.scale(16),
              ),
              Text(
                'The text font size is flexible at 24',
                style: TextStyle(
                  fontSize: context.fontScale(24),
                ),
                textAlign: TextAlign.center,
              ),
              SizedBox(
                height: context.scale(48),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class RenderBoxes extends StatelessWidget {
  const RenderBoxes({required this.size, this.color, required this.label, Key? key}) : super(key: key);

  final Size size;
  final Color? color;
  final List<String> label;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: List.generate(
        4,
            (_) => Container(
          width: size.width,
          height: size.height,
          color: color,
          child: Center(
            child: Text(
              label.join("\nx\n"),
              style: TextStyle(
                fontSize: context.fontScale(14),
              ),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}

动机

此包的主要动机是我的一项项目功能，需要响应式 UI 和针对不同平台的简单设备查询。

作者

? 关于我

我是一名 Flutter 开发者…

? 链接

portfolio linkedin medium

Logo

许可证

MIT

GitHub

查看 Github