Layoutry

安装

从 layoutry/install 查看官方安装指南

使用 & 概述

Package Example Overview

Layoutry 是 LayoutBuilder 的一个修改实现，因此我们可以使用其 LayoutInfo 通过屏幕大小轻松获取设备的类型。 其中，LayoutDevice 是一个自定义的 Platform.operatingSystem 实现的 enum，用于通过屏幕大小标记当前设备的类型。

以下是代码

Layoutry(
  builder: (context, info) {
    // A manual defined layout-device to color map.
    final colors = <LayoutDevice, Color>{
      LayoutDevice.mobile: Colors.blue,
      LayoutDevice.tablet: Colors.red,
      LayoutDevice.web: Colors.green,
    };

    return AnimatedContainer(
      duration: const Duration(milliseconds: 500),
      // color will be generated from [colors],
      // by listening to device's screen size.
      color: colors[info.device],
      child: Center(child: Builder(builder: (context) {
        // If the device's screen size is like mobile:
        // "Hi Mobile" will written in the screen.
        if (info.device.isMobile()) {
          return const Text(
            'Hi Mobile',
            style: TextStyle(color: Colors.white, fontSize: 20),
          );
        }

        // If the device's screen size is like web:
        // "Hi Web" will written in the screen.
        if (info.device.isWeb()) {
          return const Text(
            'Hi Web',
            style: TextStyle(color: Colors.white, fontSize: 20),
          );
        }

        // In other cases: Hi current device's screen size
        // appropriate device type will be written in the screen.
        return Text(
          'Hi ${info.device.toString()}',
          style: const TextStyle(color: Colors.white, fontSize: 20),
        );
      })),
    );
  },
)

GitHub

查看 Github