I am using
CupertinoNavigationBar to make a layout expected like image below
In left side/
leading area, I override default back button to create the layout, but instead I got an overflow
return CupertinoPageScaffold( ... leading: Row( children: <Widget>[ UtomoDeckNavigationBar.getDefaultBackButton(context: context, isLightTheme: true), Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text(widget.chat.name, style: TextStyle( color: CupertinoColors.black, fontWeight: FontWeight.bold, fontSize: 14.0)), Text('Online', style: TextStyle(color: CupertinoColors.black, fontSize: 12.0)) ], ) ], ) )
and the error
Performing hot reload... Syncing files to device iPhone SE... flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ flutter: The following assertion was thrown during layout: flutter: A RenderFlex overflowed by 34 pixels on the right. flutter: flutter: The overflowing RenderFlex has an orientation of Axis.horizontal. flutter: The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and flutter: black striped pattern. This is usually caused by the contents being too big for the RenderFlex. flutter: Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the flutter: RenderFlex to fit within the available space instead of being sized to their natural size. flutter: This is considered an error condition because it indicates that there is content that cannot be flutter: seen. If the content is legitimately bigger than the available space, consider clipping it with a flutter: ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, flutter: like a ListView. flutter: The specific RenderFlex in question is: RenderFlex#d650f relayoutBoundary=up2 OVERFLOWING: flutter: creator: Row ← IconTheme ← Builder ← Padding ← KeyedSubtree-[GlobalKey#fab21 Leading] ← flutter: LayoutId-[<_ToolbarSlot.leading>] ← CustomMultiChildLayout ← NavigationToolbar ← Padding ← flutter: MediaQuery ← Padding ← SafeArea ← ⋯ flutter: parentData: offset=Offset(16.0, 0.0) (can use size) flutter: constraints: BoxConstraints(0.0<=w<=90.7, h=44.0) flutter: size: Size(90.7, 44.0) flutter: direction: horizontal flutter: mainAxisAlignment: start flutter: mainAxisSize: max flutter: crossAxisAlignment: center flutter: textDirection: ltr flutter: verticalDirection: down flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════ Reloaded 11 of 687 libraries in 407ms.
Can I expand the constraint of the leading area, or maybe there’s a better approach to do this?
to solve this, I use
middle instead of
Container with infinity
width instead of Row, its children will overflow if its children widgets are more than the parent (
TextOverflow.ellipsis won’t help
Answered By – Ampersanda
Answer Checked By – David Marino (FlutterFixes Volunteer)