ESizer

一个Flutter包，为每个设备屏幕尺寸提供响应式、动态、可配置的尺寸。

特点

  • 响应式、自适应尺寸
  • 从assets中的预定义文件动态加载尺寸数据

未使用此包

入门

此包用于开发使用Bloc模式的应用程序，通过包装更清晰、更快、更容易
复杂的Bloc用法。

用法

创建尺寸资源数据文件并添加到pubspec

  • 在默认文件夹“assets/dimens”中创建尺寸资源数据文件（目前仅支持yaml格式）。例如：
    assets/dimens”。例如

homeScreen:
  contentPadding: 10
  iconSize: 50
  titleTextSize: 24
  descriptionTextSize: 16
  widgetSpaceSize: 16
  • 将assets文件夹路径添加到pubspec.yaml文件

flutter:
  # ... 
  assets:
    - assets/dimens/

在应用程序中配置和使用

  • 确保在应用程序启动前，main函数中调用WidgetsFlutterBinding.ensureInitialized();

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

使用小部件

ESizer(
  builder: (BuildContext context) {
    return const ResponsiveHomePage();
  },
  sizeFileResolver: ({BoxConstraints? boxConstraints, Orientation? orientation}) => "phone.yaml",
)

上面的代码用于sizeFileResolver函数，它使用非常简单的逻辑：返回资源文件的名称。您
也可以添加更多逻辑来指定如何选择要加载的尺寸数据文件。

例如：根据设备的宽度和方向加载“phone.yaml”或“table.yaml”

  String _resolveSizeDataFile({BoxConstraints? boxConstraints, Orientation? orientation}) {
  if (boxConstraints != null) {
    if (Platform.isAndroid || Platform.isIOS) {
      if (orientation == Orientation.portrait) {
        if (boxConstraints.maxWidth < 600) {
          return "phone.yaml";
        } else {
          return "tablet.yaml";
        }
      } else if (orientation == Orientation.landscape) {
        if (boxConstraints.maxHeight < 600) {
          return "phone.yaml";
        } else {
          return "tablet.yaml";
        }
      } else {
        return "phone.yaml";
      }
    } else {
      return "phone.yaml";
    }
  }
  return "phone.yaml";
}

尺寸数据代码生成

通过使用命令“esizer:generate”，您可以生成Dart代码以获得更便捷的体验

flutter pub run esizer:generate -I assets/dimens -o dimen_keys.g.dart -n DimenKeys

然后我们有一个类，例如

abstract class DimenKeys {
  static const homeScreenIconSize = 'homeScreen.icon_size';
  static const homeScreenTitleTextSize = 'homeScreen.titleTextSize';
  static const homeScreenDescriptionTextSize = 'homeScreen.descriptionTextSize';
  static const homeScreenWidgetSpaceSize = 'homeScreen.widgetSpaceSize';
  static const homeScreenContentPadding = 'homeScreen.contentPadding';
}

之后，在应用程序的任何地方，我们如下使用它

Container (
  padding:EdgeInsets.all(DimenKeys.homeScreen_content_padding.sw),
  color: Colors.white)

问题和反馈

在GitHub issues中创建问题并添加适当的标签，或发送到我们的邮件列表
有关更多详细信息，请参阅CONTRIBUTING

贡献者

许可证

MIT

GitHub

查看 Github