Flutter响应式间距插件responsive_spacing的使用

responsive_spacing 是一个帮助设计和开发美观的响应式和自适应Flutter应用的插件。它遵循Material Design原则，支持设置自定义断点、边距和间距，并且提供了一个简单的API来访问这些值。

轻量级响应式间距

所有设计原则都有大致相同的元素。例如，Material Design使用了边距、间隔、主体和响应式的12列系统。默认值由Material Design指南设定，但您也可以轻松地设置自己的断点、边距和间距。

我们开发这个插件是为了让您可以轻松地使您的应用程序适应性和响应性更强。

简单间距

访问您自己的间距系统：

// Example values for a Pixel 7 Pro
context.spacing.xs; // default 2
context.spacing.s; // default 8
context.spacing.m; // default 12
context.spacing.l; // default 16
context.spacing.xl; // default 32
context.spacing.xxl; // default 56

// Instead of 
SizedBox(height: 8);

// use
SizedBox(height: context.spacing.s); // Wow!

每当您的设计需要修改这些值时，只需在一个文件中进行修改即可。

更强大的Giga Spacing

对于那些需要更精细控制的设计专家，可以使用Giga Spacing类：

context.gigaSpacing.xxxs; // default 2
context.gigaSpacing.xxs; // default 8
context.gigaSpacing.xs; // default 10
context.gigaSpacing.s; // default 12
context.gigaSpacing.m; // default 16
context.gigaSpacing.l; // default 24
context.gigaSpacing.xl; // default 30
context.gigaSpacing.xxl; // default 40
context.gigaSpacing.xxxl; // default 46
context.gigaSpacing.xxxxl; // default 64

设置自定义间距

在main函数中设置全局默认值：

void main() {
  ResponsiveSpacing.setDefaults(
      globalSpacing: MySimpleSpacing(),
  );

  runApp(const MyApp());
}

class MySimpleSpacing extends SpacingCollection {

  @override
  SimpleSpacing get any => const SimpleSpacing(
    xs: 2.0,
    s: 8.0,
    m: 12.0,
    l: 16.0,
    xl: 32.0,
    xxl: 56.0,
  );
}

如果想要使间距响应式，覆盖以下值：xl, lg, md, sm2, sm1, xs。

使用方法

代替使用Scaffold，使用ResponsiveScaffold：

ResponsiveScaffold(
  appBar: AppBar(
    title: const Text("The Title"),
  ),
  body: YourWidget()
);

在您的小部件中，通过Spacing.of(context)或context.spacingConfig访问间距类，这将返回一个ResponsiveData对象，该对象包含所有必要的间距。

context.spacingConfig.margin;
context.spacingConfig.padding;
context.spacingConfig.gutter;
context.spacingConfig.body;
context.spacingConfig.layoutColumns;

// 您现在可以在布局中使用这些属性。

例如，与Card一起使用：

Card(
  margin: context.spacingConfig.margin.horizontalEdgeInsets,

  child: Padding(
    padding: context.spacingConfig.padding.allEdgeInsets,
    
    child: Column(
      children: [
        Text("This is a Title"),
        Text("This is the subtitle, usually you explain something")
      ],
    ),
  ),
)

完整示例Demo

下面是一个完整的示例代码，展示了如何使用responsive_spacing插件：

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

void main() {
  // 可选设置默认值
  ResponsiveSpacing.setDefaults(
    globalSpacing: MySimpleSpacing(),
    globalBreakpoints: Breakpoints(
      xl: const BreakpointEntry(1920, enabled: true),
      lg: const BreakpointEntry(1440),
      md: const BreakpointEntry(1240),
      sm2: const BreakpointEntry(905),
      sm1: const BreakpointEntry(600),
    ),
  );

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ResponsiveScaffold(
        appBar: AppBar(
          title: Text("Width: ${MediaQuery.of(context).size.width}"),
        ),
        body: const CardList());
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ResponsiveCard(
          color: Colors.amber,
          child: Padding(
            padding: context.spacingConfig.padding.allEdgeInsets,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("This is a ResponsiveCard", style: Theme.of(context).textTheme.titleLarge),
                SizedBox(height: context.gigaSpacing.s),
                Text("This is a subtitle, usually you explain something", style: Theme.of(context).textTheme.bodyMedium)
              ],
            ),
          ),
        ),
        context.spacingConfig.sizedBoxGutter,
        Card(
          color: Colors.amber,
          margin: context.spacingConfig.margin.horizontalEdgeInsets,
          child: Padding(
            padding: context.spacingConfig.padding.allEdgeInsets,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("This is a Card", style: Theme.of(context).textTheme.titleLarge),
                SizedBox(height: context.gigaSpacing.s),
                Text("This is a subtitle, usually you explain something", style: Theme.of(context).textTheme.bodyMedium)
              ],
            ),
          ),
        )
      ],
    );
  }
}

class MySimpleSpacing extends SpacingCollection {
  @override
  SimpleSpacing get any => const SimpleSpacing(
    xs: 2.0,
    s: 60.0,
    m: 12.0,
    l: 16.0,
    xl: 32.0,
    xxl: 56.0,
  );
}

以上示例展示了如何配置和使用responsive_spacing插件来创建一个响应式的Flutter应用程序。通过这种方式，您可以轻松地管理应用中的间距和布局，确保它们在不同设备上都能有良好的表现。