Flutter屏幕适配插件responsive_framework_v2的使用

Flutter屏幕适配插件responsive_framework_v2的使用

响应式缩放在Flutter中的应用

此Flutter小部件设置基于预定义的断点启用UI元素的响应式缩放，使用ResponsiveScaleRoot小部件和ScaleInBetween类。

使用示例：

import 'package:flutter/material.dart';
import 'package:responsive_framework_v2/src/responsive_framework_v2.dart';

void main() {
  // 设置默认的断点配置
  ResponsiveConfig(
    xs: 360,
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
  );

  runApp(
    const MainApp(),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义一个覆盖配置
    final overrideConfig = ResponsiveConfig(
      xs: 320,
      sm: 480,
      md: 640,
      lg: 800,
      xl: 960,
    );
    return MaterialApp(
      home: Scaffold(
        body: ResponsiveScaleRoot(
          breakpoints: [
            ScaleInBetween(start: 500, end: 600, scale: 600),
            ScaleInBetween(start: 400, end: 500, scale: 600),
            ScaleInBetween(start: 300, end: 400, scale: 600),
            ScaleInBetween(
                start: 200,
                end: 300,
                scale: 600), // 在600到500之间缩放UI到300
          ],
          child: LayoutBuilder(builder: (context, constraints) {
            return SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          height: 200,
                          color: Colors.blue,
                          child: const Center(
                            child: Text(
                              'Scaled UI (600-700)',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                        Container(
                          height: 200,
                          color: Colors.blue,
                          child: const Center(
                            child: Text(
                              'Scaled UI (600-700)',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                        Container(
                          height: 200,
                          color: Colors.blue,
                          child: const Center(
                            child: Text(
                              'Scaled UI (600-700)',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                        Container(
                          height: 200,
                          color: Colors.blue,
                          child: const Center(
                            child: Text(
                              'Scaled UI (600-700)',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    Container(
                      height: 100,
                      width: 100,
                      decoration: const BoxDecoration(
                          shape: BoxShape.circle, color: Colors.red),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    // 使用响应式方法显示不同内容，并使用全局实例的断点配置
                    context.responsive(
                      breakpoints: {
                        300: const Text("Extra Small"),
                        600: const Text("Small"),
                        900: Text("Medium"),
                        912: Text('912'),
                        1200: Text("Large"),
                        1400: Text("Extra Large"),
                      },
                      sm: Text('sm'),
                      md: Text('md'),
                      lg: Text('lg'),
                      xl: Text('xl'),
                    ),
                    // 使用覆盖配置来覆盖默认的断点
                    context.responsive(
                      sm: Text('sm over'),
                      overrideConfig: overrideConfig,
                      // lg: Text('lg over'),
                      // xl: Text('xl over'),
                    ),
                    context.showOnScreenBreakPoint(
                        breakpoint: 600, widget: Text('showOnScreenWidth 600')),
                  ],
                ),
              ),
            );
          }),
        ),
      ),
    );
  }
}