Flutter隐藏元素插件hidden_logo的使用

hidden_logo 是一个用于在特定场景下（如用户截屏、最小化应用或使用屏幕镜像时）隐藏品牌Logo或其他简化版本的Flutter插件。它特别适用于带有Notch或Dynamic Island的iPhone设备。

特性

• 自动适应不同设备：支持从iPhone X到最新的iPhone 16系列的所有设备。
• 精确尺寸约束：为每个iPhone提供精确的最大宽度和高度，确保Logo大小适中。
• 自动圆角处理：对于Dynamic Island上的Logo，会自动进行圆角处理。
• 仅在竖屏模式下显示：Logo仅在竖屏模式下可见。

使用方法

基本用法

要使用hidden_logo插件，首先需要将其添加到你的项目依赖中。然后，在你的应用中包裹MaterialApp或CupertinoApp，并提供两个构建器：一个用于Notch设备，另一个用于Dynamic Island设备。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        return HiddenLogo(
          body: child!,
          notchBuilder: (context, constraints) {
            return NotchLogo(constraints.maxWidth, constraints.maxHeight);
          },
          dynamicIslandBuilder: (context, constraints) {
            return DynamicIslandLogo(constraints.maxWidth, constraints.maxHeight);
          },
        );
      },
      home: Scaffold(
        appBar: AppBar(title: Text('Hidden Logo Example')),
        body: Center(child: Text('Hello World!')),
      ),
    );
  }
}

// 示例Notch Logo构建器
class NotchLogo extends StatelessWidget {
  final double width;
  final double height;

  NotchLogo(this.width, this.height);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: height,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
      ),
      child: Center(child: Text('Notch Logo', style: TextStyle(color: Colors.white))),
    );
  }
}

// 示例Dynamic Island Logo构建器
class DynamicIslandLogo extends StatelessWidget {
  final double width;
  final double height;

  DynamicIslandLogo(this.width, this.height);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: height,
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Center(child: Text('Dynamic Island Logo', style: TextStyle(color: Colors.white))),
    );
  }
}

额外提示

• 避免放置重要信息：不要在HiddenLogo中放置任何重要或敏感的信息。
• 不建议设置点击事件：由于用户无法点击这些区域，因此不建议在此处设置任何点击回调。
• 调试技巧：可以通过最小化应用或截屏来测试Logo的显示效果。

通过上述示例代码，您可以快速集成并自定义自己的隐藏Logo功能。记得根据实际需求调整Logo的设计和布局，以确保最佳用户体验。