flutter appbar 右侧的 RenderFlex 溢出了 399 像素

Question

我想向我的 flutter 应用程序的 appBar 添加一个图标，但出现此错误：

右侧 RenderFlex 溢出了 399 像素。

我使用 AppIcon.com 创建不同版本的图标，AppIcon.com 将图标放在 mipmap 文件夹中。然后我将这些文件夹复制到我的 Flutter 项目中。

然后，我将最小的版本（72x72）复制到我指向appBar代码的目录中。这是应用程序条形码：

@override
  Widget build(BuildContext context) {
    return AppBar(
      backgroundColor: Colors.blue,
      automaticallyImplyLeading: false, // removes the back button in appbar
      title: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Image.asset('lib/assets/images/dd_logo_building.png',
              fit: BoxFit.cover, height: 56),
          const Text(' Deal Diligence'),
        ],
      ),
      actions: [
        IconButton(
          color: Colors.black,
          onPressed: () {
            signOut();
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => const LoginScreen()));
          },
          icon: const Icon(Icons.logout),
        )
      ],
    );
  }
}

这是完整的错误消息：

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 399 pixels on the right.

The relevant error-causing widget was:
  Row Row:file:///C:/deal_diligence/deal_diligence/lib/screens/widgets/my_appbar.dart:29:14

To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9100/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A53395%2Fg2EuruVAEB8%3D%2F&inspectorRef=inspector-7

The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#317c3 relayoutBoundary=up14 OVERFLOWING:
  creator: Row ← _AppBarTitleBox ← Semantics ← DefaultTextStyle ← MediaQuery ←
    LayoutId-[<_ToolbarSlot.middle>] ← CustomMultiChildLayout ← NavigationToolbar ← DefaultTextStyle ←
    IconTheme ← Builder ← CustomSingleChildLayout ← ⋯
  parentData: offset=Offset(0.0, 0.0) (can use size)
  constraints: BoxConstraints(0.0<=w<=312.7, 0.0<=h<=Infinity)
  size: Size(312.7, 54.0)
  direction: horizontal
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  textDirection: ltr
  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
Reloaded 1 of 1519 libraries in 3,684ms (compile: 1922 ms, reload: 352 ms, reassemble: 703 ms).
D/EGL_emulation( 7691): app_time_stats: avg=1490.61ms min=1490.61ms max=1490.61ms count=1
Another exception was thrown: Unable to load asset: "lib/assets/images/dd_logo_building.png".

我有一个 72x72 的旧图标可以工作，那么为什么这个图标不能工作或者如何让它工作？

谢谢

Answer 1

为了避免溢出，只需用

Image.asset

小部件包裹

Flexible

：

Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Flexible( // <-- add this
              child: Image.asset('lib/assets/images/dd_logo_building.png',
                  fit: BoxFit.cover, height: 56),
            ),
            const Text(' Deal Diligence'),
          ],
        ),