Flutter屏幕标识插件screen_identifier的使用

screen_identifier 是一个用于在Flutter项目中根据屏幕大小或父组件大小调整多个值的便捷插件。本文将介绍如何使用该插件，并提供完整的示例代码。

插件信息

• Pub Package
• GitHub Repository
• Live Preview

开始使用

添加依赖

首先，在你的 pubspec.yaml 文件中添加 screen_identifier 依赖：

dependencies:
  screen_identifier: ^0.0.1

然后运行 flutter pub get 来安装依赖。

导入包

在需要使用的文件中导入插件：

import 'package:screen_identifier/screen_identifier.dart';

使用示例

以下是一个完整的示例，展示了如何使用 screen_identifier 来根据屏幕大小动态调整网格布局中的卡片数量和样式。

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

void main() {
  /// [OPTIONAL] 设置每个屏幕尺寸类别的自定义最小宽度。
  ScreenIdentifier.instance.setMinimalWidth(
    xxxl: 1800,
    xxl: 1400,
    xl: 1200,
    lg: 992,
    md: 768,
    sm: 576,
  );

  runApp(const MyApp());
}

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

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

class MyHomePage extends StatelessWidget {
  final String title;
  const MyHomePage({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: const GridView1(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ScreenIdentifierBuilder(
      builder: (context, screenIdentifier) {
        final crossAxisCount = screenIdentifier.conditions<int>(
          xxxl: 7,
          xxl: 6,
          xl: 5,
          lg: 4,
          md: 3,
          sm: 2,
          xs: 1,
        );
        const paddingPerCard = 8.0;
        const paddingGridView = 8.0;
        final heightCard = screenIdentifier.conditions<int>(
          xxxl: 196,
          xxl: 210,
          sm: 220,
          xs: 230,
        );
        final childAspectRatio = ((screenIdentifier.width / crossAxisCount) -
                paddingGridView -
                (paddingPerCard * crossAxisCount)) /
            heightCard;

        return GridView.builder(
          padding: const EdgeInsets.all(8),
          shrinkWrap: true,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: crossAxisCount,
            childAspectRatio: childAspectRatio,
          ),
          itemCount: 24,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.all(paddingPerCard),
              child: Card(
                color: screenIdentifier.conditions<Color>(
                  xxxl: Colors.brown,
                  xxl: Colors.deepOrange,
                  xl: Colors.deepPurple,
                  lg: Colors.green,
                  md: Colors.teal,
                  sm: Colors.blueGrey,
                  xs: Colors.pink,
                ),
                child: Center(
                  child: Text(
                    screenIdentifier.conditions<String>(
                      xxxl: 'XXXL',
                      xxl: 'XXL',
                      xl: 'XL',
                      lg: 'LG',
                      md: 'MD',
                      sm: 'SM',
                      xs: 'XS',
                    ),
                    style: const TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 40,
                    ),
                  ),
                ),
              ),
            );
          },
        );
      },
    );
  }
}

总结

通过使用 screen_identifier 插件，您可以轻松地为不同屏幕尺寸创建响应式布局。以上示例展示了如何根据屏幕宽度动态调整网格布局中的列数、卡片高度以及颜色等属性。希望这个示例能够帮助您更好地理解和使用该插件。