该插件有助于设计和开发美观且响应式的Flutter应用。

轻量级，响应式间距

所有设计原则都具有大致相同的元素。例如，Material Design拥有一个响应式的12列系统，该系统可与边距、间隙和主体配合使用。

我们开发了此插件，以便您可以轻松创建自己的响应式应用。

列、间隙和边距

响应式布局网格由三个元素组成：列、间隙和边距。请在material guidelines 响应式布局页面上阅读有关列、间隙和边距的所有信息。

columns, gutter, margin

默认尺寸

所有默认值均使用Material断点。

default

例如，360尺寸的显示屏有4列，16的边距，8的内边距和8的间隙。

default

default

响应式值保存在ResponsiveData类中

class ResponsiveData {
  final ScaledSize margin;
  final ScaledSize padding;
  final ScaledSize gutter;
  final ScaledSize body;
  final LayoutColumns layoutColumns;
}

Responsive App

用法

不要使用Scaffold，请使用ResponsiveScaffold

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

在您的Widget中，使用Spacing.of(context)访问Spacing类，它将返回一个ResponsiveData对象。该对象包含所有必需的间距。

ResponsiveData responsiveData = Spacing.of(context);

例如，使用Card

Card(
  /// Spacing outside the card
  margin: Spacing.of(context).margin.horizontalEdgeInsets,
  child: Padding(
  /// Spacing inside the card
    padding: Spacing.of(context).padding.allEdgeInsets,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text("This is a Title"),
        Text("This is the subtitle, usually you explain something")
      ],
    ),
  ),
)

GitHub

查看 Github