RenderFlex children have non-zero flex but incoming width constraints are unbounded - Flutter - flutter

I'm trying to show cart items horizontally using listview builder but it is throwing up following error
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.)
I already wrapped the list view builder with defined height but still throwing up the error
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('MY CART', style: GoogleFonts.oswald(color: Colors.black, fontSize: 18.0, fontWeight: FontWeight.w400)),
const SizedBox(height: 20.0),
SizedBox(
height: 180.0,
width: double.infinity,
child: ListView.builder(
itemCount: 2,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index){
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 150.0,
width: 150.0,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/dress.jpg')
),
borderRadius: BorderRadius.all(Radius.circular(15.0))
),
),
const SizedBox(width: 10.0),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('PRODUCT TITLE',
style: GoogleFonts.oswald(
textStyle: const TextStyle(
color: Colors.black,
fontSize: 14.0)), overflow: TextOverflow.visible,),
const SizedBox(height: 5.0),
Text('SIZE: M',
style: GoogleFonts.oswald(
textStyle: const TextStyle(
color: Colors.black45,
fontSize: 16.0))),
const SizedBox(height: 10.0),
Text('10 DOLLARS',
style: GoogleFonts.oswald(
textStyle: const TextStyle(
color: Colors.black,
fontSize: 16.0))),
],
),
)
],
);
},
),
),
],
)

This was happened because you use expanded in row inside horizontal listview, you have two option :
One: remove the expanded widget inside Row inside itemBuilder.
Two: set width for item inside itemBuilder:
itemBuilder: (context, index){
return SizedBox(
width: 400.0, // <--- add this
child: return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 150.0,
...
);
}

Related

Flutter: How to Split text into 2 lines

I'm using columns to display 2 texts. 1st text represents the title and 2nd text displays the quotation. I'm trying to split the quotation text into multi-lines using the max line's property, but the text is overlapping with other items. I try to use Expanded and flexible property to overcome this issue but still, I didn't get desired output. This is what I'm trying to do:
Container(
color: Color(0xff1D1D1D),
width: double.maxFinite,
height: responsivness.safeBlockVertical! * 54.55,
// Stories Title
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Stories",
style: Theme.of(context).textTheme.headline1!),
),
// list of Stories
Expanded(
child: ListView.builder(
itemCount: 5,
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Stack(
clipBehavior: Clip.none,
children: [
Padding(
padding: EdgeInsets.all(h * .014),
child: Container(
width:
responsivness.safeBlockHorizontal! *
47,
height:
responsivness.safeBlockVertical! *
17,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(10),
color: Colors.amber,
),
),
),
Positioned(
top: h * .19,
left: h * .016,
child: Column(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Steve H.",
style: Theme.of(context)
.textTheme
.headline1!,
),
Text(
"I bet away my house and all the money i got",
style: Theme.of(context)
.textTheme
.bodyText2!,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
),
],
);
},
),
),
],
),
),
Try below code hope its helpful to you. I think the problem comes from Stack widget so remove your Stack and Positioned Widget, and used Column() widget instead.
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Stories",
style: Theme.of(context).textTheme.headline1!),
),
// list of Stories
Expanded(
child: ListView.builder(
itemCount: 5,
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 200,
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.amber,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Steve H.",
),
Text(
"I bet away my house and all the money i got",
style: Theme.of(context).textTheme.bodyText2!,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
),
],
);
},
),
),
],
),
),
Your result screen->
Your text is overlapping because of the Stack widget. You can either wrap your text inside a sized box to give a fix width or you can remove Stack widget and use Column instead. I dont find any particular use of stack here, so probably you can remove it without any issues.
Try wrapping with container and specify any width
Container(
width: 100,
child: Text(
"I bet away my house and all the money i got",
style: Theme.of(context).textTheme.subtitle1,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
Try wrapping your overlapping Text with a fixed width SizedBox, and see if it fixes your issue.
Have you tried wrapping the Text in a FittedBox()

Extra "Space" In ListView and Card Flutter

I'm having this "extra space" on my first listview item that is a card being encapsulated in a container.
How do I remove it?
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(15.0),
height: 300,
child: Column(children: [
Row(children: [
Expanded(
child: Text("Lowest Fuel Price",
style: TextStyle(
fontWeight: FontWeight.w500,
color: Theme.orange3,
fontSize: 16.0)))
]),
Container(
height: 250,
child: Card(
elevation: 3,
child: ListView.builder(
itemCount: cheapest.length,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
final item = cheapest[index];
return Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text(
item.petrolType,
style: TextStyle(
color: Theme.gray1, fontSize: 18),
),
Text(
"\$" + item.petrolPrice,
style: TextStyle(
color: Theme.gray1, fontSize: 25),
),
Image(
fit: BoxFit.fill,
image: new AssetImage(
'assets/images/fuel_station/' +
item.petrolStation.toLowerCase() +
'.png')),
]),
index != cheapest.length - 1
? Divider(
color: Colors.grey,
)
: Divider(color: Colors.white)
],
);
})),
)
]));
}
https://api.flutter.dev/flutter/widgets/ListView-class.html
By default, ListView will automatically pad the list's scrollable extremities to avoid partial obstructions indicated by MediaQuery's padding. To avoid this behaviour, override with a zero-padding property.
Card(
elevation: 3,
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.builder(),
),
),

How do I fix 'RenderFlex overflowed by 283 pixels on the bottom' in flutter?

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

Dynamic height of listview builder item

I am unable to set the dynamic size to my list item of list view builder, every time it shows blank screen and when I specify a constant size it works.
I tried by using column by setting mainAxisSize=minimum and by using container as we know container wraps the child height but nothing works
listItem (GuideLines news) =>Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[Container(
decoration: BoxDecoration(image: new DecorationImage(image: AdvancedNetworkImage(
"${news.featured_image}",
useDiskCache: true,
cacheRule: CacheRule(maxAge: const Duration(days: 7)),
),fit: BoxFit.cover)),
margin: EdgeInsets.only(bottom: 10.0),
child: ListTile(
onTap: (){
print(news.web_link);
Navigator.push(context, MaterialPageRoute(builder: (context) => NewsDetailsPage(news)));
},
title: new Container(
margin: EdgeInsets.only(left: 30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: new Text("${DateFormat("E, d MMM y").format(CommonService.dateFormat(news.publish_date.toString()))}", style: TextStyle(fontFamily: 'SF-Display-Regular' ,fontSize: 13.0 ,color: Colors.white),),
),
SizedBox(height: 13.0),
new Flexible(
child: new Container( width: MediaQuery.of(context).size.width *0.45,
child: Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: new Text("${news.title}" ,maxLines: 3, overflow: TextOverflow.ellipsis, style: TextStyle(fontFamily: 'SF-Display-Semibold' ,fontSize: 22.0 ,color: Colors.white),),
)
),
)
],
)),
trailing: Padding(
padding: const EdgeInsets.only(right: 20),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[Icon(Icons.arrow_forward_ios, color: Colors.white),SizedBox(width: 8,)],
),
),
),
)],
);
Just add these two properties of shrinkWrap and physics to make the height of list dynamic
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(), //Optional
itemCount: size,
itemBuilder: (context, position) {}
),
The problem with your code is, that you used a Flexible widget in a Column. A Flexible widget expands to the remaining space of the Column or Row. However, this only works if you have restricted the size of the Column or Row widget. Because otherwise, the size of the element in the Column would expand to infinity as the remaining space is not restricted and therefore also infinity.
When using Flexible or Expanded widgets you always need to restrict their parent size, else you get this error:
RenderFlex children have non-zero flex but incoming height constraints
are unbounded. When a column is in a parent that does not provide a
finite height constraint, for example if it is in a vertical
scrollable, it will try to shrink-wrap its children along the vertical
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 vertical
direction.
The solution and some cleanup of your code:
Widget listItem(GuideLines news) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AdvancedNetworkImage(
"${news.featured_image}",
useDiskCache: true,
cacheRule: CacheRule(maxAge: const Duration(days: 7)),
),
fit: BoxFit.cover),
),
margin: EdgeInsets.only(bottom: 10.0),
child: ListTile(
onTap: () {
print(news.web_link);
Navigator.push(context, MaterialPageRoute(builder: (context) => NewsDetailsPage(news)));
},
title: Container(
margin: EdgeInsets.only(left: 30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 20.0, bottom: 13.0),
child: Text(
"${DateFormat("E, d MMM y").format(CommonService.dateFormat(news.publish_date.toString()))}",
style: TextStyle(fontFamily: 'SF-Display-Regular', fontSize: 13.0, color: Colors.white),
),
),
Container(
width: MediaQuery.of(context).size.width * 0.45,
padding: const EdgeInsets.only(bottom: 20.0),
child: new Text(
"${news.title}",
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontFamily: 'SF-Display-Semibold', fontSize: 22.0, color: Colors.white),
),
)
],
),
),
trailing: Padding(
padding: const EdgeInsets.only(right: 28),
child: Icon(Icons.arrow_forward_ios, color: Colors.white),
),
),
);
}
In your specific case, this Flexible widget was redundant anyway.

Auto expanding Container in flutter -- for all devices

I need a Container with some text in to auto expand. I have an API call, which can be anything from 5 words to 500 words. I don't want to just have 1 fixed size that's huge, but contains 10 words.
I have tried Expanded() and SizedBox.Expand(), but I might be using them wrong
Card(
elevation: defaultTargetPlatform ==
TargetPlatform.android ? 5.0 : 0.0,
child: Column(
children: <Widget>[
Container(
margin: const EdgeInsets.all(0.0),
padding: const EdgeInsets.all(2.0),
decoration: BoxDecoration(color: Colors.black),
width: _screenSize.width,
height: 250,
child: Column(
children: <Widget>[
Container(
color: Colors.black,
width: _screenSize.width,
height: 35,
child: Padding(
padding: const EdgeInsets.only(
left: 15, top: 11),
child: Text("Title".toUpperCase(),
style: TextStyle(
color: Colors.white
),
),
),
),
Container(
color: Colors.white,
width: _screenSize.width,
height: 210,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8, bottom: 5),
child: Text("Title of expanding text", style: TextStyle(
fontSize: 25,
),
),
),
Text("Expanding text", style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.w800
),),
],
),
),
],
),
),
],
),
),
I just need the Container to expand, but stay small/get bigger
Have you tried not specifying height at all? The Container should wrap according to the child in this case.
Otherwise, the widget has a child but no height, no width, no
constraints, and no alignment, and the Container passes the
constraints from the parent to the child and sizes itself to match the
child.
Above is an extract from the official flutter documentation for Container.
Here is the official flutter documentation link.
You can use FittedBox, this will resize your text according to available area.
You can use it like this :
FittedBox(child: Text('...............Your text...............'));
I would suggest you to use Constraints...this will set Container height according to the Text child's requirement. Please see the example...
Container(
constraints: BoxConstraints(
maxHeight: double.infinity,
),
child: Column(
children: [
Text(
'Hello flutter...i like flutter...i like google...',
softWrap: true,
style: TextStyle(
color: Colors.white, fontSize: 20 , ),
),],),)
we just neeed to add mainAxisSize: MainAxisSize.min, properties inside child Column or Row where the child is set to Container
for example
AnythingYourWidget(
child: Container(
child: Column( // For Example Column
mainAxisSize: MainAxisSize.min, // these properties following the children content height available.
children: [
// YourWidget
]
)
)
),
I too had a container with a text widget inside that would not scale as the text increased in character count. Make the widget tree Container -> IntrinsicWidth -> Text/TextField and it seems to play nicely for me.
IntrinsicWidth will scale the size of the container to its child.