使用 GNav 渲染库捕获的异常

问：

对于我的底部导航栏，我使用的是谷歌的导航栏。我在栏中添加了另一个按钮，然后看到以下错误：

渲染库捕获的异常 在布局过程中抛出以下断言： 右侧溢出 2.6 像素的 RenderFlex。

导致错误的相关小部件是： 行行：file：///Users/mustafa/.pub-cache/hosted/pub.dev/google_nav_bar-5.0.6/lib/src/gnav.dart：94：16

要在 Flutter DevTools 中检查这个小部件，请访问： http://127.0.0.1:9102/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A58843%2F6Lb7ghFx7BY%3D%2F&inspectorRef= inspector-0

溢出的 RenderFlex 的方向为 Axis.horizontal。 溢出的 RenderFlex 边缘在渲染中已标记为黄色和 黑色条纹图案。这通常是由于内容对于 RenderFlex 来说太大造成的。 考虑应用一个弹性因子（例如，使用扩展的小部件）来强制 RenderFlex 以适应可用空间，而不是调整其自然大小。 这被视为错误情况，因为它表示存在无法 明显。如果内容合法地大于可用空间，请考虑使用 ClipRect 小部件，然后再将其放入 flex 中，或者使用可滚动容器而不是 Flex， 类似于 ListView。 具体的 RenderFlex 是： RenderFlex#7761c relayoutBoundary=up4 OVERFLOWING： 需要合成 创建者： Row ← ColoredBox ← Container ← GNav ← Padding ← ColoredBox ← Container ← MyBottomNavBar ← MediaQuery ← LayoutId-[<_ScaffoldSlot.bottomNavigationBar>] ← CustomMultiChildLayout ← _ActionsScope ← ⋯ parentData：（可以使用大小） 约束： BoxConstraints（w=361.0， 0.0<=h<=812.0） 尺寸： Size（361.0， 56.0） 方向：水平 mainAxisAlignment：空格之间 mainAxisSize：最大 crossAxisAlignment：居中 textDirection： ltr vertical方向：向下

我为底部栏编写的代码是：

import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
class MyBottomNavBar extends StatelessWidget {
  void Function(int)? onTabChange;
  MyBottomNavBar({super.key, required this.onTabChange});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
      child: GNav(
        color: Colors.white,
        activeColor: Colors.white,
        tabBackgroundColor: Colors.grey.shade800,
        padding: const EdgeInsets.all(16),
        gap: 8,
        onTabChange: (value) => onTabChange!(value),
        tabs: const [
          GButton(
            icon: Icons.home,
            text: 'Home',
          ),
          GButton(
            icon: Icons.payment_sharp,
            text: 'Payment',
            ),
          GButton(
            icon: Icons.monetization_on_sharp,
            text: 'Transactions',
          ),
          GButton(
            icon: Icons.person,
            text: 'Profile',
          ),
          GButton(
            icon: Icons.settings,
            text: 'Settings',
          ),
        ],
      ),
    );
  }
}