Related
I am need to create to Material Widget per row, but when i create it i wanted to add padding when i do so for the column the yellow error appears with this error:
Another exception was thrown: A RenderFlex overflowed by 4.1 pixels on
the bottom.
Another exception was thrown: A RenderFlex overflowed by 4.1 pixels on
the bottom.
Another exception was thrown: A RenderFlex overflowed by 4.1 pixels on
the bottom.
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════ The
following assertion was thrown during layout: A RenderFlex overflowed
by 0.200 pixels on the right. The relevant error-causing widget was:
Row
Row:file:///E:/work/nabaa_mobile-main/lib/ui/screens/home/widgets/bottom_home_page/home.dart:134:25
To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9101/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A56940%2FUjrL2FntShg%3D%2F&inspectorRef=inspector-1305
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#164c6
relayoutBoundary=up1 OVERFLOWING: creator: Row ← Column ← Semantics ←
DefaultTextStyle ← AnimatedDefaultTextStyle ←
_InkFeatures-[GlobalKey#020b0 ink renderer] ← NotificationListener ← CustomPaint ←
_ShapeBorderPaint ← PhysicalShape ← _MaterialInterior ← Material ← ⋯ parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use
size) constraints: BoxConstraints(0.0<=w<=135.2, 0.0<=h<=Infinity)
size: Size(135.2, 40.0) direction: horizontal mainAxisAlignment:
start mainAxisSize: max crossAxisAlignment: center textDirection: ltr
verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: A RenderFlex overflowed by 12 pixels on
the bottom. Another exception was thrown: A RenderFlex overflowed by
0.200 pixels on the right. Another exception was thrown: A RenderFlex overflowed by 12 pixels on the bottom. Another exception
was thrown: A RenderFlex overflowed by 0.200 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 12 pixels
on the bottom. Another exception was thrown: A RenderFlex
overflowed by
0.200 pixels on the right. Another exception was thrown: A RenderFlex overflowed by 12 pixels on the bottom. Performing hot
reload... Reloaded 1 of 1166 libraries in 4,534ms. Performing hot
reload... Reloaded 1 of 1166 libraries in 3,199ms. ══╡ EXCEPTION
CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════ The
following assertion was thrown during layout: A RenderFlex overflowed
by 0.200 pixels on the right. The relevant error-causing widget was:
Row
Row:file:///E:/work/nabaa_mobile-main/lib/ui/screens/home/widgets/bottom_home_page/home.dart:140:27
To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9101/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A56940%2FUjrL2FntShg%3D%2F&inspectorRef=inspector-2705
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#4f67e
relayoutBoundary=up1 OVERFLOWING: creator: Row ← Column ← Padding ←
DefaultTextStyle ← AnimatedDefaultTextStyle ←
_InkFeatures-[GlobalKey#c9285 ink renderer] ← NotificationListener ← CustomPaint ←
_ShapeBorderPaint ← PhysicalShape ← _MaterialInterior ← Material ← ⋯ parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use
size) constraints: BoxConstraints(0.0<=w<=135.2, 0.0<=h<=Infinity)
size: Size(135.2, 40.0) direction: horizontal mainAxisAlignment:
start mainAxisSize: max crossAxisAlignment: center textDirection: ltr
verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: A RenderFlex overflowed by 12 pixels on
the bottom.
========================================================================
the code is
GridView.count(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 2,
mainAxisSpacing: 4,
scrollDirection: Axis.vertical,
crossAxisSpacing: 4.w,
// padding: EdgeInsets.all(9),
children: List.generate(4, (index) {
return Material(
// padding: const EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
// side: ,
borderRadius: BorderRadius.circular(18.0),
),
type: MaterialType.button,
color: whiteColor,
elevation: 5,
// clipBehavior: Clip.antiAliasWithSaveLayer,
shadowColor: blackColor.withOpacity(0.5),
child: Column(
children: [
Row(
children: [
CircleAvatar(
foregroundColor: blackColor,
child: ClipOval(
child:
Image.asset('assets/images/meta-logo.png'),
),
),
Padding(
padding: EdgeInsetsDirectional.only(start: 4.w),
child: Text(
"company_name".tr,
// textAlign: TextAlign.end,
style: Get.textTheme.headline3!
.copyWith(color: faddenGreyColor),
),
),
],
),
Align(
alignment: AlignmentDirectional.centerStart,
heightFactor: 0.3.h,
child: Text(
"opportunity_title".tr,
style: Get.textTheme.headline4,
),
),
Row(
children: [
Icon(
Icons.calendar_today_outlined,
color: faddenGreyColor,
size: 13.sp,
),
Padding(
padding: EdgeInsetsDirectional.only(start: 2.w),
child: Text(
"date".tr,
style: Get.textTheme.headline3!.copyWith(
color: faddenGreyColor,
),
),
),
],
),
Row(
children: [
Icon(
Icons.location_on_outlined,
color: faddenGreyColor,
size: 15.sp,
),
Padding(
padding: EdgeInsetsDirectional.only(start: 2.w),
child: Text(
"location".tr,
style: Get.textTheme.headline3!.copyWith(
color: faddenGreyColor,
),
),
),
],
),
SizedBox(height: 2.h),
],
),
);
}),
),
-> Use Can Use For This Code SingleChildScrollView
import 'package:flutter/material.dart';
class Data extends StatefulWidget {
const Data({Key? key}) : super(key: key);
#override
_DataState createState() => _DataState();
}
class _DataState extends State<Data> {
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: GridView.count(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 2,
mainAxisSpacing: 4,
scrollDirection: Axis.vertical,
crossAxisSpacing: 4,
// padding: EdgeInsets.all(9),
children: List.generate(4, (index) {
return Material(
// padding: const EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
// side: ,
borderRadius: BorderRadius.circular(18.0),
),
type: MaterialType.button,
color: Colors.white,
elevation: 5,
// clipBehavior: Clip.antiAliasWithSaveLayer,
shadowColor: Colors.black.withOpacity(0.5),
child: Column(
children: [
Row(
children: [
CircleAvatar(
foregroundColor: Colors.black,
child: ClipOval(
child: Image.asset('assets/images/meta-logo.png'),
),
),
Padding(
padding: EdgeInsetsDirectional.only(start: 4),
child: Text(
"company_name",
// textAlign: TextAlign.end,
style: TextStyle(),
),
),
],
),
Align(
alignment: AlignmentDirectional.centerStart,
child: Text(
"opportunity_title",
style: TextStyle(),
),
),
Row(
children: [
Icon(
Icons.calendar_today_outlined,
color: Colors.red,
size: 13,
),
Padding(
padding: EdgeInsetsDirectional.only(start: 2),
child: Text(
"location",
style: TextStyle(),
),
),
],
),
Row(
children: [
Icon(
Icons.location_on_outlined,
color: Colors.red,
size: 15,
),
Padding(
padding: EdgeInsetsDirectional.only(start: 2),
child: Text(
"location",
style: TextStyle(),
),
),
],
),
SizedBox(height: 2),
],
),
);
}),
),
);
}
}
Expanded all your widget in Column
GridView.count(
shrinkWrap: true,
physics: const ScrollPhysics(),
crossAxisCount: 2,
mainAxisSpacing: 4,
scrollDirection: Axis.vertical,
crossAxisSpacing: 4,
// padding: EdgeInsets.all(9),
children: List.generate(4, (index) {
return Material(
// padding: const EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
// side: ,
borderRadius: BorderRadius.circular(18.0),
),
type: MaterialType.button,
elevation: 5,
// clipBehavior: Clip.antiAliasWithSaveLayer,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Expanded(
child: Row(
children: [
Expanded(
child: CircleAvatar(
child: ClipOval(
child: Image.asset('images/profile.png'),
),
),
),
Expanded(
child: Padding(
padding: EdgeInsetsDirectional.only(start: 4),
child: Text(
"company_name",
// textAlign: TextAlign.end,
),
),
),
],
),
),
Expanded(
child: Align(
alignment: AlignmentDirectional.centerStart,
heightFactor: 0.3,
child: Text(
"opportunity_title",
),
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Icon(
Icons.calendar_today_outlined,
),
),
Expanded(
child: Padding(
padding: EdgeInsetsDirectional.only(start: 2),
child: Text(
"date",
),
),
),
],
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Icon(
Icons.location_on_outlined,
),
),
Expanded(
child: Padding(
padding: EdgeInsetsDirectional.only(start: 2),
child: Text(
"location",
),
),
),
],
),
),
],
),
),
);
}),
),
output:
The error occurs in a screen where I am trying to render a list of contributions. I have tried a number of things (listed below), none of which works.
Wrapping my column widget with Expanded()
Wrapping my Column widget with Flexible()
Wrapping my Listview.builder() with SingleScrollView() then adding physics: NeverScrollableScrollPhysics() in it.enter image description here
I have a contributions screen with contains a Lisview.builder()
This is my contributions screen
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Chamas'),
centerTitle: true,
),
floatingActionButton: CustomFloatingActionButton(
buttonLabel: 'Contribute +',
),
resizeToAvoidBottomInset: false,
body: Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.22,
margin: EdgeInsets.only(top: 20),
child: PageView.builder(
itemCount: widget.availableChamas.length, // number of cards
controller: PageController(viewportFraction: 0.8),
onPageChanged: (int index) => setState(() => _index = index),
/*** Begin snapping chama cards */
itemBuilder: (_, i) {
return Transform.scale(
scale: i == _index ? 1 : 0.9,
child: Card(
elevation: 6,
margin: EdgeInsets.only(right: 0),
color: Theme.of(context).primaryColor, // Card backgound color
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
stops: [0.1, 0.9],
colors: [Colors.indigo, Colors.teal],
),
),
child: ChamaCard(
id: widget.availableChamas[i].id,
name: widget.availableChamas[i].name,
totalMembers: widget.availableChamas[i].totalMembers,
totalContributions: widget.availableChamas[i].totalContributions,
),
),
),
);
/*** End snapping chama cards */
},
),
),
SizedBox(height: 15),
Container(
padding: EdgeInsets.only(right: 15, left: 15),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'All my chamas',
style: TextStyle(fontSize: 15, color: Colors.red[900]),
),
Icon(
Icons.arrow_forward,
size: 17,
color: Colors.red[900],
)
],
),
SizedBox(height: 15),
Row(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('My', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
'Contributions',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
SizedBox(width: 5),
Text(
'to this chama',
style: TextStyle(color: Colors.green[800]),
)
],
),
],
)
],
),
SizedBox(height: 10),
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return ChamaListItem(
id: widget.availableContributions[index].id,
amount: widget.availableContributions[index].amount,
contributionDate: widget.availableContributions[index].contributionDate,
);
},
itemCount: widget.availableContributions.length,
),
],
),
)
],
),
);
}
This is my ChamaListItem widget which simply holds a single contribution card. This is what I am iterating to build a scrollable list in my Listview.builder()
Widget build(BuildContext context) {
return Card(
elevation: 4,
shadowColor: Color.fromRGBO(255, 255, 255, 0.5),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Date',
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: 5),
Text(
'$contributionDate',
style: TextStyle(color: Colors.red[900]),
)
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text('Kes'),
SizedBox(width: 1),
Text(
'$amount',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
),
],
)
],
),
),
);
}
This is the error thrown in the console
Performing hot reload...
Syncing files to device sdk gphone x86 arm...
Reloaded 5 of 566 libraries in 1,183ms.
======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderFlex overflowed by 283 pixels on the bottom.
The relevant error-causing widget was:
Column file:///Users/Steve/StudioProjects/m_chama/lib/screens/myChamas.dart:35:13
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#3a382 relayoutBoundary=up1 OVERFLOWING
... needs compositing
... parentData: offset=Offset(0.0, 105.5); id=_ScaffoldSlot.body (can use size)
... constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=697.5)
... size: Size(392.7, 697.5)
... direction: vertical
... mainAxisAlignment: start
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
====================================================================================================
Wrap Column widget with SingleChiledScrollView
I'm trying to make a UI where there are some text fields inside a container and there are some icon buttons which are always going to stay at the bottom.
Here is the code minimal code
Center(
child: Container(
// width: 1006,
constraints: BoxConstraints(
maxWidth: 1006,
maxHeight: sizingInformation.screenSize.height,
),
margin: EdgeInsets.only(
left: isMobile ? 0 : 34,
),
child: Flex(
direction: Axis.vertical,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
Flex(
// rest of the widgets
),
Expanded(
child: Container(
padding: EdgeInsets.all(isMobile ? 15 : 34),
margin: EdgeInsets.only(
top: isMobile ? 15 : 27,
),
constraints: BoxConstraints(
maxWidth: 1006,
),
height: 750,
decoration: BoxDecoration(
color: CARD_DARK_PURPLE,
borderRadius: BorderRadius.circular(8),
),
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: Wrap(
direction: Axis.horizontal,
children: <Widget>[
Wrap(
direction: Axis.horizontal,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Pošiljalac",
style: TextStyle(
color: WHITE,
fontSize: isMobileTablet ? 22 : 24,
fontWeight: BOLD,
),
),
SizedBox(
height: 20,
),
_phoneInfo(widget.order.senderPhoneNumber, isMobile),
_emailInfo(widget.order.senderEmail, isMobile),
_fullNameInfo(widget.order.senderFirstName,
widget.order.senderLastName, isMobile, isMobileTablet),
_addressInfo(widget.order.senderStreetNumber, isMobile),
_zipCodeInfo(widget.order.senderZipCode, isMobile),
_cityInfo(widget.order.senderCity, isMobile),
SizedBox(
height: isDesktopLaptop ? 14 : 0,
),
_payeeInfo(isMobile, isMobileTablet),
],
),
SizedBox(
width: 34,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: isDesktopLaptop ? 482 : 10,
),
_weightInfo(isMobile, isMobileTablet),
_noteSmall(isMobile, isMobileTablet),
],
),
],
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
SizedBox(height: 10),
Flex(
direction: Axis.horizontal,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
SizedBox(width: 20),
Material(
color: DIVIDER,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
child: Center(
child: Ink(
decoration: const ShapeDecoration(
color: DIVIDER,
shape: CircleBorder(),
),
child: IconButton(
splashColor: DARK_PURPLE.withOpacity(0.3),
icon: Image.asset(
'assets/images/inter-note-icon.png',
width: 20,
height: 24,
),
onPressed: () {
if (widget.order.operatorNote == "/") {
_dialogs.internNoteDialog(
context,
widget.order.id,
"order",
widget.order.operatorNote);
} else {
_dialogs.changeInternNoteDialog(
context,
widget.order.id,
"order",
widget.order.operatorNote);
}
},
),
),
),
),
SizedBox(width: 20),
Material(
color: DIVIDER,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
child: Center(
child: Ink(
decoration: const ShapeDecoration(
color: DIVIDER,
shape: CircleBorder(),
),
child: IconButton(
splashColor: DARK_PURPLE.withOpacity(0.3),
icon: Image.asset(
'assets/images/trash-icon.png',
width: 28,
height: 28,
),
onPressed: () {
_dialogs.deleteOrderDialog(
context, widget.order.id, isMobile);
},
),
),
),
),
],
),
],
),
),
],
),
),
),
),
),
),
)
This is the UI that I'm trying to achieve(the box highlighted on the right side specifically)
There is SingleChildScrollView parent which has Wrap as its child. SingleChildScrollView is taking the full height available but Wrap isn't spanning to that full height. I want to make the Wrap span full height so that the icons can stay at the bottom always.
So, I placed it inside Expanded as I thought it would make it expand to the full available height. But I got this error.
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a _SingleChildViewport widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
Wrap ← Expanded ← _SingleChildViewport ← IgnorePointer-[GlobalKey#01401] ← Semantics ← _PointerListener ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#7427b] ← _PointerListener ← ⋯
When the exception was thrown, this was the stack
dart:sdk_internal 4461:11 throw_
packages/flutter/src/widgets/widget_span.dart.lib.js 12339:23 <fn>
packages/flutter/src/widgets/widget_span.dart.lib.js 12355:24 [_updateParentData]
packages/flutter/src/widgets/widget_span.dart.lib.js 12372:61 attachRenderObject
packages/flutter/src/widgets/widget_span.dart.lib.js 12184:12 mount
...
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by widgets library ═══════════════════════════════════
Incorrect use of ParentDataWidget.
════════════════════════════════════════════════════════════════════════════════
So, Expanded is not the answer to this. But I don't know what else is. I'm new to Flutter and having a hard time understanding the Flutter layout system. Any help would be great. Thanks for your time.
What if you make your Wrap widget the child of a container the size of the screen ?
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Wrap(
children: [],
))),
);
}
}
Can anyone help me with this exception that I keep running into? I am not sure what attempt next in order to fix the overflow as the panel expands. I've tried wrapping it into a flexible widget but that doesn't seem to fix the issue.
Here is my exception:
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 68 pixels on the bottom.
The relevant error-causing widget was:
Column file:///Users/selorm/AndroidStudioProjects/flutter_master/lib/src/widgets/weather_widget.dart:17:14
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#8829e relayoutBoundary=up1 OVERFLOWING
... needs compositing
... parentData: offset=Offset(0.0, 0.0) (can use size)
... constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=410.6)
... size: Size(411.4, 410.6)
... direction: vertical
... mainAxisAlignment: center
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
Here is my code:
#override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
//flex: 2,
//fit: FlexFit.loose,
child: Text(
this.weather.cityName.toUpperCase(),
style: TextStyle(
fontWeight: FontWeight.w900,
letterSpacing: 5,
color: AppStateContainer.of(context).theme.accentColor,
fontSize: 25),
),
),
SizedBox(
height: 20,
),
Flexible(
//flex: 1,
child:Text(
this.weather.description.toUpperCase(),
style: TextStyle(
fontWeight: FontWeight.w100,
letterSpacing: 5,
fontSize: 20,
color: AppStateContainer.of(context).theme.accentColor),
),
),
WeatherSwipePager(weather: weather),
Padding(
child: Divider(
color:
AppStateContainer.of(context).theme.accentColor.withAlpha(50),
),
padding: EdgeInsets.all(10),
),
ForecastHorizontal(weathers: weather.forecast),
Padding(
child: Divider(
color:
AppStateContainer.of(context).theme.accentColor.withAlpha(50),
),
padding: EdgeInsets.all(10),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ValueTile("wind speed", '${this.weather.windSpeed} m/s'),
Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Center(
child: Container(
width: 1,
height: 30,
color: AppStateContainer.of(context)
.theme
.accentColor
.withAlpha(50),
)),
),
ValueTile(
"sunrise",
DateFormat('h:m a').format(DateTime.fromMillisecondsSinceEpoch(
this.weather.sunrise * 1000))),
Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Center(
child: Container(
width: 1,
height: 30,
color: AppStateContainer.of(context)
.theme
.accentColor
.withAlpha(50),
)),
),
ValueTile(
"sunset",
DateFormat('h:m a').format(DateTime.fromMillisecondsSinceEpoch(
this.weather.sunset * 1000))),
Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Center(
child: Container(
width: 1,
height: 30,
color: AppStateContainer.of(context)
.theme
.accentColor
.withAlpha(50),
)),
),
ValueTile("humidity", '${this.weather.humidity}%'),
]
),
],
),
);
}
}
You have to two quick options:
use ListView() with shrinkWrap set to true
#override
Widget build(BuildContext context) {
return ListView(
shrinkWrap: true,
children: <Widget>[
// Children
],
);
}
wrap Column() with singleChildScrollView()
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
// Children
],
),
);
}
That's it
I created a custom ListTile which should have two score centered in the middle and information on the left and right of this (screenshot).
The information on the left can have arbitrary length and should use TextOverflow.ellipsis when it's too long.
I cannot get this to work since the Text does not seem to know the width it is supposed to have and overflows.
I have tried wrapping the Text widgets into SizedBox, Expanded, etc. This has not worked.
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following message was thrown during layout:
flutter: A RenderFlex overflowed by 15 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:
flutter: RenderFlex#c64e4 relayoutBoundary=up11 OVERFLOWING
flutter: creator: Row ← Expanded ← Row ← Column ← ConstrainedBox ← Container ← Listener ← _GestureSemantics
flutter: ← RawGestureDetector ← GestureDetector ← InkWell ← ScopedModelDescendant<BaseballModel> ← ⋯
flutter: parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight (can use size)
flutter: constraints: BoxConstraints(w=143.0, 0.0<=h<=Infinity)
flutter: size: Size(143.0, 70.0)
flutter: direction: horizontal
flutter: mainAxisAlignment: start
flutter: mainAxisSize: max
flutter: crossAxisAlignment: center
flutter: textDirection: ltr
flutter: verticalDirection: down
flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
My Code is the following:
#immutable
class GameTile extends StatelessWidget {
final Game game;
Color highligtColor = Colors.red;
GameTile({this.game});
#override
Widget build(BuildContext context) {
return InkWell(
child: Container(
height: 70.0,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Container(
width: 8.0,
height: 70.0,
color: highligtColor,
),
Padding(
padding: EdgeInsets.only(left: 15.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
game.awayTeam.name,
overflow: TextOverflow.ellipsis,
),
Text(
game.homeTeam.name,
overflow: TextOverflow.ellipsis,
),
],
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: Column(
children: [
Text(
game.awayRuns,
style: TextStyle(fontWeight: FontWeight.w900),
),
Text(
game.homeRuns,
style: TextStyle(fontWeight: FontWeight.w900),
),
],
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(game.getFormattedDate()),
Text(game.getFormattedTime()),
]),
Padding(
padding: EdgeInsets.only(left: 8.0, right: 10.0),
child: Container(),
)
],
),
)
],
)
],
),
),
);
}
}
Just wrap the overflowed widget with Flexible
new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Checkbox(
onChanged: (bool){},
),
Flexible(
child: new Text(
"This text can be so loooooooooooooong",
),
),
],
),
Explanation of Flexible or Expanded Solution
Inside a Row, a Text widget will never line-wrap nor show ellipses when not inside an Expanded or Flexible widget (or another widget which constrains width).
When Flutter performs layout for Row or Column, any non-flex factor widgets get laid out in unbounded space. i.e. without any constraints. (Flexible, Expanded and Spacer are the only flex-factor widgets.)
So when Text is being laid out inside the Row, it will never be so wide as to hit a width constraint and get wrapped because...
... there are no constraints during Row layout for non-flex factor widgets.
Placing the Text widget inside a Flexible or Expanded will cause Flutter to calculate remaining space during Row layout and impose that constraint. This will cause wrapping if needed & ellipses if specified: Text("blahblah", overflow: TextOverflow.ellipsis).
More details in a related RenderFlex overflowed question.
Example Code
import 'package:flutter/material.dart';
class FlexTextWrapPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flex Text Wrap'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
width: 400,
child: Row(
children: [
MySpacer(width: 100),
Text("This should easily wrap, but doesn't because I'm in INFINITE SPACE"),
MySpacer(width: 100),
],
),
),
SizedBox(
width: 400,
child: Row(
children: [
MySpacer(width: 100),
Expanded(child: Text("This should easily wrap, and DOES because I'm in BOUNDED SPACE")),
MySpacer(width: 100),
],
),
),
SizedBox(
width: 400,
child: Row(
children: [
MySpacer(width: 100),
Expanded(
child: Text("This should easily wrap, and DOES because I'm in BOUNDED SPACE",
overflow: TextOverflow.ellipsis, // default is .clip
maxLines: 2,),// default is 1
),
MySpacer(width: 100),
],
),
),
],
),
);
}
}
class MySpacer extends StatelessWidget {
final double width;
MySpacer({this.width});
#override
Widget build(BuildContext context) {
return Container(child: SizedBox(width: width, height: 16,), color: Colors.lightBlueAccent,);
}
}
Result
If you want the child content to just fit the content without being expanded. You must use Flexible in combination with MainAxisSize.min inside Row:
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: Padding(
padding: const EdgeInsets.only(right: 2),
child: Text("abc",
style: TextStyle(
color: Colors.white,
fontSize: 13),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
),
Icon(Icons.arrow_drop_down, size: 10, color: Colors.white,)
],
)
About the exception
I ran your code on my phone and an exception occurred only after meddling with the teams names and the width of the widget.
I think this problem arises because your code doesn't adapt to different display sizes well enough, especially if the team names have a different length:
Concrete solution for a more flexible and dynamic widget
I created a modified widget that adapts well to constraint changes and uses the available space in a more clever way. I did this by flattening your nested Rows and Columns as far as possible, resulting in a more shallow, more flexible widget tree:
return InkWell(
child: Container(
height: 70.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(width: 8.0, height: 70.0, color: highlightColor),
SizedBox(width: 15.0),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(game.awayTeam.name, overflow: TextOverflow.ellipsis),
Text(game.homeTeam.name, overflow: TextOverflow.ellipsis),
],
),
Spacer(),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(game.awayRuns, style: TextStyle(fontWeight: FontWeight.w900)),
Text(game.homeRuns, style: TextStyle(fontWeight: FontWeight.w900)),
],
),
Spacer(),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(game.getFormattedDate()),
Text(game.getFormattedTime()),
]
),
SizedBox(width: 18.0),
],
),
),
);
General tip when dealing with difficult constraints
Most of the time, it's better to use just a few widgets in a shallow tree. Nesting all kinds of "organizational" widgets, especially Columns, Rows and Expandeds often creates situations where an Expanded always requests the same size (or ratio of the parent size) without even considering the dimensions of its content.
That can lead to content overflowing, while there is unused negative space at other parts of the widget.
use Expanded or Flexible in your parent widget,