Flutter固定底部高度插件fixed_status_bottom_height的使用

描述

fixed_status_bottom_height 是一个用于获取固定底部状态栏高度的 Flutter 插件。它可以帮助开发者动态获取底部状态栏的高度，并根据需要调整 UI 布局。

使用场景

Step 1：在 MaterialApp 中配置 FixedStatusBottomHeight

首先，将 FixedStatusBottomHeight 添加到 MaterialApp 的 builder 方法中。这样可以确保插件能够监听底部状态栏的高度变化。

MaterialApp.router(
  // 路由配置
  routerConfig: goRouter,
  title: AppConfig.appName,
  builder: (BuildContext context, Widget? child) {
    return Stack(
      children: [
        child ?? Container(), // 确保子组件不为空
        const FixedStatusBottomHeight(), // 添加 FixedStatusBottomHeight
      ],
    );
  },
  theme: AppTheme.theme(),
);

说明：

• FixedStatusBottomHeight 是一个空的占位组件，不会影响应用的其他内容。
• 它通过监听系统状态栏的变化来动态更新底部高度。

Step 2：获取底部状态栏的最大高度

使用 FixedStatusBottomHeight.maxBottomPaddingHeight 来监听并获取底部状态栏的高度。通过 ValueListenableBuilder 可以实时响应高度的变化。

ValueListenableBuilder<double>(
  // 监听最大底部填充高度
  valueListenable: FixedStatusBottomHeight.maxBottomPaddingHeight,
  builder: (BuildContext context, double maxBottomPaddingHeight, Widget? child) {
    return SizedBox(
      height: maxBottomPaddingHeight, // 设置高度为底部状态栏的高度
      child: Center(
        child: Text(
          '底部状态栏高度: $maxBottomPaddingHeight',
          style: TextStyle(fontSize: 16),
        ),
      ),
    );
  },
)

说明：

• ValueListenableBuilder 会自动监听 maxBottomPaddingHeight 的变化，并在高度变化时重新构建 UI。
• SizedBox 的高度设置为底部状态栏的高度，可以根据需求动态调整布局。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 fixed_status_bottom_height 插件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: goRouter,
      title: 'Fixed Status Bottom Height Demo',
      builder: (BuildContext context, Widget? child) {
        return Stack(
          children: [
            child ?? Container(),
            const FixedStatusBottomHeight(), // 添加 FixedStatusBottomHeight
          ],
        );
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fixed Status Bottom Height 示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ValueListenableBuilder<double>(
          valueListenable: FixedStatusBottomHeight.maxBottomPaddingHeight,
          builder: (BuildContext context, double maxBottomPaddingHeight, Widget? child) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  '底部状态栏高度: $maxBottomPaddingHeight',
                  style: TextStyle(fontSize: 18),
                ),
                SizedBox(height: maxBottomPaddingHeight), // 动态设置高度
                Text(
                  '此区域的高度等于底部状态栏的高度',
                  style: TextStyle(fontSize: 16),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}