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?
Thank you.
to solve this, I use Row with MainAxisAlignment.start inside middle instead of leading.
EDIT :
Use Container with infinity width instead of Row, its children will overflow if its children widgets are more than the parent (Row), and TextOverflow.ellipsis won't help
I will tell you what worked for me. First, You should wrap your Container in a Flexible to let your Column know that it's ok for the Container to be narrower than its intrinsic width. Second, add overflow: TextOverflow.ellipsis for the ... Triple point.
Related
I need help to solve this problem. The expanded renders the child but does not expand.
return Scaffold(
body: ListView(
children: [
_HomeBody(child: child,)
],
)
);
_HomeBody
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height
child: Column(
children: [
AppBarMenu(),
Expanded(child: child), // A RenderFlex overflowed by 1246 pixels on the bottom.
Footer()
],
),
);
Error Output
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 1246 pixels on the bottom.
The relevant error-causing widget was:
Column
lib\…\views\home_view.dart:19
The overflowing RenderFlex has an orientation of Axis.vertical.
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#90f9f OVERFLOWING:
needs compositing
creator: Column ← ConstrainedBox ← Container ← HomeView ← Builder ←
RepaintBoundary-[GlobalKey#97a2c] ← IgnorePointer ← AnimatedBuilder ← FractionalTranslation ←
SlideTransition ← AnimatedBuilder ← RepaintBoundary ← ⋯
parentData: <none> (can use size)
constraints: BoxConstraints(w=966.0, h=840.0)
size: Size(966.0, 840.0)
direction: vertical
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: start
textDirection: ltr
verticalDirection: down
HomeLayout code
child code
You can't have Expanded inside of a scrolling view (SignleChildScrollView, ListView, etc..)
cause like this you are telling the child of the expanded to take of the whole vertical space allowed to you, and the scroll view can allow infinite vertical space, so in a nutshell, you are telling the child of the Expanded take the size of infinity. hope this clarifies the error
Does anybody knows a right way to hide and show Bottomnavigationbar with animation with correspondence to miniplayer height? As shown in the Fig.1, Bottomnavigationbar shows the overflow warning on bottom only during animation.
Fig.1 A overflow warning is shown during animation.
main.dart
import 'package:flutter/material.dart';
import 'screens/audio_screen.dart';
import 'widgets/player.dart';
import 'utils.dart';
ValueNotifier<AudioObject> currentlyPlaying = ValueNotifier(null);
const double playerMinHeight = 70;
const double playerMaxHeight = 370;
const miniplayerPercentageDeclaration = 0.2;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Miniplayer Demo',
theme: ThemeData(
primaryColor: Colors.grey[50],
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Column(
children: [
AppBar(
title: Text('Miniplayer Demo'),
),
Expanded(
child: AudioUi(
onTap: (audioObject) {
currentlyPlaying.value = audioObject;
},
),
),
],
),
ValueListenableBuilder(
valueListenable: currentlyPlaying,
builder: (BuildContext context, AudioObject audioObject,
Widget child) {
if (audioObject == null) return Container();
return DetailedPlayer(audioObject: audioObject);
}),
],
),
bottomNavigationBar: ValueListenableBuilder(
valueListenable: playerExpandProgress,
child: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Feed',
),
BottomNavigationBarItem(
icon: Icon(Icons.library_books),
label: 'Library',
),
],
currentIndex: 0,
selectedItemColor: Colors.blue,
onTap: (index) {},
),
builder: (BuildContext context, double height, Widget child) {
final value = percentageFromValueInRange(
min: playerMinHeight, max: playerMaxHeight, value: height);
if (value == null) return child;
var opacity = 1 - value;
if (opacity < 0) opacity = 0;
if (opacity > 1) opacity = 1;
return SizedBox(
height: kBottomNavigationBarHeight * (1 - value),
child: Transform.translate(
offset: Offset(0.0, kBottomNavigationBarHeight * value * 0.5),
child: Opacity(
opacity: opacity,
child: child,
),
),
);
},
),
);
}
}
pubspec.yaml
name: miniplayer_example
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
google_fonts: ^1.1.1
miniplayer: ^0.6.1
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
Exception
Performing hot reload...
Reloaded 0 libraries in 633ms.
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 3.2 pixels on the bottom.
The relevant error-causing widget was:
BottomNavigationBar file:///***/lib/main.dart:65:16
To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:51487/#/inspector?uri=***
The overflowing RenderFlex has an orientation of Axis.vertical.
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#090d7 relayoutBoundary=up10
OVERFLOWING:
creator: Column ← Padding ← Listener ← RawGestureDetector ← GestureDetector ←
Semantics ←
_RawMouseRegion ← MouseRegion ← Semantics ← _FocusMarker ← Focus ←
_ActionsMarker ← ⋯
parentData: offset=Offset(0.0, 7.0) (can use size)
constraints: BoxConstraints(0.0<=w<=205.7, 0.0<=h<=36.8)
size: Size(205.7, 36.8)
direction: vertical
mainAxisAlignment: spaceBetween
mainAxisSize: min
crossAxisAlignment: center
verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════
════════════════════
Another exception was thrown: A RenderFlex overflowed by 3.2 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 14 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 60 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 86 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 81 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 86 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 60 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 60 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 86 pixels on the
bottom.
flutter doctor
❯ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-x64, locale en-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.58.2)
[✓] Connected device (2 available)
• No issues found!
Reference (and source code is from).
https://github.com/peterscodee/miniplayer/issues/1
To comment1
Tried FittedBox
return Container(
height: kBottomNavigationBarHeight * (1 - value),
child: FittedBox(
alignment: Alignment.topCenter,
fit: BoxFit.fitWidth,
child: Opacity(opacity: opacity, child: child),
),
);
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming width constraints are unbounded.
When a row is in a parent that does not provide a finite width constraint, for example if it is in a
horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a
flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
space in the horizontal direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
cannot simultaneously expand to fit its parent.
Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
children (using Flexible rather than Expanded). This will allow the flexible children to size
themselves to less than the infinite remaining space they would otherwise be forced to take, and
then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
constraints provided by the parent.
...
The affected RenderFlex is:
RenderFlex#c2bfc relayoutBoundary=up10 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE(creator: Row ← DefaultTextStyle ← Builder ← MediaQuery ←
Padding ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#e4557 ink renderer] ← NotificationListener<LayoutChangedNotification> ←
CustomPaint ← _ShapeBorderPaint ← Material ← ⋯, parentData: offset=Offset(0.0, 0.0) (can use size), constraints: BoxConstraints(0.0<=w<=Infinity,
56.0<=h<=Infinity), size: MISSING, direction: horizontal, mainAxisAlignment: spaceBetween, mainAxisSize: max, crossAxisAlignment: center, textDirection:
ltr, verticalDirection: down)
The creator information is set to:
Row ← DefaultTextStyle ← Builder ← MediaQuery ← Padding ← DefaultTextStyle ←
AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#e4557 ink renderer] ←
NotificationListener<LayoutChangedNotification> ← CustomPaint ← _ShapeBorderPaint ← Material ← ⋯
The nearest ancestor providing an unbounded width constraint is: RenderFittedBox#7e087 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
creator: FittedBox ← ConstrainedBox ← Container ← ValueListenableBuilder<double> ← MediaQuery ←
LayoutId-[<_ScaffoldSlot.bottomNavigationBar>] ← CustomMultiChildLayout ← AnimatedBuilder ←
DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#25dea ink renderer] ←
NotificationListener<LayoutChangedNotification> ← ⋯
parentData: <none> (can use size)
constraints: BoxConstraints(w=411.4, h=56.0)
size: MISSING
fit: fitWidth
alignment: Alignment.topCenter
textDirection: ltr
To comment2
return Transform.translate(
offset: Offset(0.0, kBottomNavigationBarHeight * value),
child: SizedBox(
child: Opacity(opacity: opacity, child: child),
),
);
Bottomnavigator was hiden but miniplayer doesn't stretch to the bottom.
The overflowing RenderFlex has an orientation of Axis.vertical.
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#15a52 relayoutBoundary=up3 OVERFLOWING:
creator: Column ← Opacity ← Padding ← Expanded ← Column ← DecoratedBox ← ConstrainedBox ← Container
← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#08473 ink renderer] ←
NotificationListener<LayoutChangedNotification> ← ⋯
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=345.4, h=82.0)
size: Size(345.4, 82.0)
direction: vertical
mainAxisAlignment: spaceEvenly
mainAxisSize: max
crossAxisAlignment: center
verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
Code: Basically I have a simple app with three images aligned. I have 1 column and two rows. First row has two images and second row has 1 image aligned. Its the structure of the app. It just aligns perfectly when run below code in device but the moment I run on WEB there is this overflow. I try resizing the browser window only then it begins to become pretty again. Is there a workaround for Flutter Web please on how should I do the alignments here? Below code is inside body and inside Scaffold. I am attaching pics from device where there is no issue and from Flutter web where there is overflow issue.
return Column(
mainAxisAlignment: MainAxisAlignment.center,
//crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: FlatButton(
child: Image.asset('images/image1.png'),
),
),
Expanded(
child: FlatButton(
child: Image.asset('images/image1.png'),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Image.asset('images/image1.png'),
),
],
),
],
);
}
Error:
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════ The
following assertion was thrown during layout: A RenderFlex overflowed
by 1238 pixels on the bottom.
The relevant error-causing widget was: Column
file:///C:/Users/1025632/Documents/GitHub/flutter-course/diceylips/lib/main.dart:43:12
The overflowing RenderFlex has an orientation of Axis.vertical. 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#1ad1e
relayoutBoundary=up1 OVERFLOWING: creator: Column ← DicePage ←
_BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ←
CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
_InkFeatures-[GlobalKey#cb60e ink renderer] ← NotificationListener ←
PhysicalModel ← ⋯ parentData: offset=Offset(0.0, 56.0); id=_ScaffoldSlot.body (can use size) constraints:
BoxConstraints(0.0<=w<=1280.0, 0.0<=h<=554.0) size: Size(1280.0,
554.0)
direction: vertical
mainAxisAlignment: center
mainAxisSize: max
crossAxisAlignment: center
verticalDirection: down
Image with no issue in device
Image with overflow issue in chrome
Wrap the column with a sized box or container with defined height and width
SizedBox(
height:200,
width:200,
child: your column goes here,
)
Add below code inside Container
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
....
....
)
This is the generic way to define full width and height to your Container
If you don't try to fit your widget in screen and scroll is an option for you, you can use listview or a similar widget.
ListView(
children: <Widget>[
Column(
Otherwise, wrapping Container with MediaQuery.of(context).size.width and MediaQuery.of(context).size.height will work but there is just one catch here, if you use an appbar this height should be "MediaQuery.of(context).size.height - AppBar().preferredSize.height"
I am writing some tests for my app. Currently I am stuck on testing the drawer. On emulators of various sizes it runs without a problem (from 240x432 to 1440x2960) but when I try to run a simple test the following error is thrown:
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 188 pixels on the right.
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#1ae2c relayoutBoundary=up17 OVERFLOWING:
creator: Row ← Center ← Padding ← Container ← IconTheme ← Builder ← Listener ← _GestureSemantics ←
RawGestureDetector ← GestureDetector ← Listener ← InkWell ← ⋯
parentData: offset=Offset(0.0, 0.0) (can use size)
constraints: BoxConstraints(0.0<=w<=256.0, 0.0<=h<=Infinity)
size: Size(256.0, 24.0)
direction: horizontal
mainAxisAlignment: start
mainAxisSize: min
crossAxisAlignment: center
textDirection: ltr
verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
Within the code I have narrowed it down to some RaisedButtons. When the Row within is below a certain length, the error doesn't show.
When I comment out the following code, ALL tests run without an issue.
Padding(
padding: EdgeInsets.symmetric(vertical: 32, horizontal: 16),
child: Column(
children: [
FacebookSignInButton(
onPressed: _fbLogin,
),
GoogleSignInButton(
onPressed: _googleLogin,
)
],
crossAxisAlignment: CrossAxisAlignment.stretch,
))
Changing the text within ("Continue with Facebook", "Sign in with Google") to something shorter also fixes this.
The test (note I'm currently just trying to not error, asserts will be put in once I get this figured out)
testWidgets("Drawer",
(WidgetTester tester) async {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
BuildContext savedContext;
await tester.pumpWidget(
MaterialApp(
home: Builder(
builder: (BuildContext context) {
savedContext = context;
return Scaffold(
key: _scaffoldKey,
drawer: HomePageDrawer(),
body: Container(),
);
},
),
),
);
await tester.pump(); // no effect
_scaffoldKey.currentState.openDrawer();
await tester.pump();
});
I have a layout structure in Flutter like this:
Inkwell
Card
ScopedModelDescendant
Column
Container[]
The number of containers in the column is variable.
The goal is that it should look like this:
But instead, it ends up doing this:
I've tried adding a clipBehavior property to the Card, and I've tried mixing in ClipRects anywhere in the structure, but nothing seems to work. My best guess is that a ClipRect above the Column doesn't help because the overflow happens within the column.
This is the error I'm getting:
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following message was thrown during layout:
flutter: A RenderFlex overflowed by 15 pixels on the bottom.
flutter:
flutter: The overflowing RenderFlex has an orientation of Axis.vertical.
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:
flutter: RenderFlex#094c9 OVERFLOWING
flutter: creator: Column ← ScopedModelDescendant<EventModel> ← Semantics ← DefaultTextStyle ←
flutter: AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#5fe8b ink renderer] ←
flutter: NotificationListener<LayoutChangedNotification> ← CustomPaint ← _ShapeBorderPaint ← PhysicalShape
flutter: ← _MaterialInterior ← Material ← ⋯
flutter: parentData: <none> (can use size)
flutter: constraints: BoxConstraints(w=56.0, h=104.3)
flutter: size: Size(56.0, 104.3)
flutter: direction: vertical
flutter: mainAxisAlignment: start
flutter: mainAxisSize: max
flutter: crossAxisAlignment: stretch
flutter: verticalDirection: down
flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
Wrap widget solves your problem. If there is not enough space to fit the child in a Column or Row, you can use Wrap. You can use alignment, directionality and spacing properties to customize it.
Here is the simple example:
class WrapExample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SizedBox(
width: 200,
height: 180,
child: Card(
clipBehavior: Clip.antiAlias,
child: Wrap(
direction: Axis.horizontal,
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: <Widget>[
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900, child: Text('AH')),
label: Text('Hamilton'),
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900, child: Text('ML')),
label: Text('Lafayette'),
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900, child: Text('HM')),
label: Text('Mulligan'),
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900, child: Text('JL')),
label: Text('Laurens'),
),
],
),
),
);
}
}
And here is the output:
You can also just wrap the widget you want to allow overflowing in a Positioned inside a Stack widget and set the the Positioned parameter top: 0.
Works like charm for me