I am trying to use ListTiles as items of the horizontal ListView.
final brandsWidget = SizedBox(
height: 200,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
ListTile(
leading: Image.asset('img_1.png'),
title: Text('Product 1'),
subtitle: Text('\$5'),
),
ListTile(
leading: Image.asset('img_1.png),
title: Text('Product 2'),
subtitle: Text('\$3'),
)
],
),
);
I got the following error:
Another exception was thrown: BoxConstraints forces an infinite width.
Exception caught by rendering library.
BoxConstraints forces an infinite width.
The relevant error-causing widget was ListTile
You can uses ListTile widget by wrapping it with Container or SizedBox widget.
Error Explanation:
You are getting this error because ListTiles have infinite width. If you don't give them a proper one they will surely generate such errors.
Related
How to prevent OverFlow of the Trailing widget using Column widget to occupy all the children elements inside of a ListTile widget ?
Thanks and appreiciate you help.
body: ListView.builder(
restorationId: 'sampleItemListView',
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
final item = items[index];
return Padding(
padding: const EdgeInsets.only(top: 8, left: 8, right: 8),
child: Container(
color: Colors.grey.shade400,
height: 200,
child: ListTile(
isThreeLine: true,
leading: const CircleAvatar(
// Display the Flutter Logo image asset.
foregroundImage:
AssetImage('assets/images/flutter_logo.png'),
),
title: Text('Title ${item.id}'),
subtitle: Text('Subtitle ${item.id}'),
How to expand the column in the Trailing component of the
ListTile to prevent Overflow?
trailing: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: const [
Icon(
Icons.emoji_emotions,
color: Colors.green,
),
Icon(
Icons.emoji_emotions,
color: Colors.orange,
),
Icon(
Icons.emoji_emotions,
color: Colors.red,
),
],
),
onTap: () {
Navigator.restorablePushNamed(
context,
SampleItemDetailsView.routeName,
);
}),
),
);
},
),
ERROR:
════════ Exception caught by rendering library ═════════════════════════════════
A RenderFlex overflowed by 16 pixels on the bottom.
The relevant error-causing widget was
Column
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.
In your case there r many answers like
1: ListTile( visualDensity: VisualDensity(vertical: 4))
2: ListTile(
trailing: FittedBox(
child: Column( children: const [Icon(),Icon(),Icon()]),
),
)
** But best solution in my opinion, In such extensive cases use "Row" than "ListTile" it gives u way more control over ur UI widgets.
How can I avoid the overflowing in my text when using ExpansionTile widget? When I was not using this widget my text was not overflowing and using SingleChildScrollView was enough.
ExpansionTile(
title: Text('History'),
children: [
SingleChildScrollView(
child:Text(widget.descriptionText as String),
),
]
)
A single child scroll view can take infinite height if not bound. You can try wrapping it with a sizedBox of specific height
ExpansionTile(
title: Text('History'),
children: [
SizedBox(
height: 500,
width: MediaQuery.of(context).size width*0.7,
child: SingleChildScrollView(
child:Text(widget.descriptionText as String),
),
)
]
)
I want to display a mock-up streaming screen like this:
Top half is the video player (showing the speaker), and bottom half is a ListView displaying participants/subscribers list.
Here's my code:
import 'package:flutter/material.dart';
import 'common.dart';
class StreamingView extends StatelessWidget {
// Display a Participant item
Widget getParticipantView(Participant item) {
return Container(
padding: EdgeInsets.all(10.0),
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
item.name,
style: TextStyle(fontSize: 14, color: Colors.black54),
),
),
Expanded(
child: CircleAvatar(backgroundColor: Colors.blue),
),
],
));
}
// Display the participants list on a ListView
Widget getParticipantsListView(List<Participant> participantsList){
//#override
// Widget build(BuildContext context) {
return Container (
//Expanded()
height: 40,
child: ListView.builder(
itemCount: participantsList.length,
itemBuilder: (context, index){
return getParticipantView(participantsList[index]);
}
)
);
//}
}
#override
Widget build(context) {
List<Participant> theList = [
Participant(name: "Jack", description:"Away"),
Participant(name:"Paul", description:"Available"),
Participant(name:"Clive", description:"Available"),
Participant(name:"Frank", description:"Available")
];
return Scaffold(
appBar: AppBar(),
body: Container(
padding: EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset('assets/generic_portrait.jpg'),
Expanded(
flex: 1,
child: getParticipantsListView(theList)
),
],
)),
floatingActionButton: FloatingActionButton(
onPressed: () async {
print("The button is clicked...");
},
child: Icon(Icons.video_call)));
}
}
I ran it, and the result is this:
The speaker can be seen, but the participants list isn't. Turns out there's an exception:
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════ The
following assertion was thrown during performLayout(): 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. 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 relevant error-causing
widget was: Column
file:///C:/Users/anta40/Flutter/streamingtest/streaming.dart:11:16
That refers to child: Column( inside Widget getParticipantView().
How to fix this?
you can use stack , the parent maybe use column after that the stack will be the first , after that use a listview which can hold all the participants
Have you tried using Shrink-wrap in ListView.builder and remove the container with Static height.
The hight is unbound because you're using Expanded widget in the column. Remove the Expanded widget that is wrapping the CircleAvatar. Here's your code:
// Display a Participant item
Widget getParticipantView(Participant item) {
return Container(
padding: EdgeInsets.all(10.0),
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
item.name,
style: TextStyle(fontSize: 14, color: Colors.black54),
),
),
CircleAvatar(backgroundColor: Colors.blue),
],
));
}
anyone know how can i get parent widget width ? i try to solve this problem on my UI below
here my widget tree
row
expanded
flex:8
row
column
container(
width : ???? // here i want to get width size of expanded flex: 8
Wrap(
children: [
Text('item A'),
Text('item B'),
Text('item C'),
Text('item D'),
],
),)
You can use LayoutBuilder, when you wrap the widget in it it will give you parent contraints
I'm trying to make a list of cards that are displayed in a SingleChildScrollView.
However I can't figure out how to make the cards fit their contents.
I've attached a picture of my issue, and how I want the cards to look like.
I've tried putting them in an expanded which doesn't seem to make a difference.
I've also tried setting a manual height on the card container which for some reason only displays two cards and doesn't let me scroll.
I'm presuming that I need to set a minimum height on the cards, but I can't seem to figure out at what level should I add it.
Widget displayVideo(item) {
return Flexible(
child: Container(
child: Card(
child: Column(
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundImage:
NetworkImage(item.fromChannel.channelThumbnail),
),
title: Text(item.fromChannel.channelTitle),
subtitle: Text(item.publishAt),
),
Container(
child: new AspectRatio(
aspectRatio: 16 / 10,
child: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.fitWidth,
alignment: FractionalOffset.center,
image: new NetworkImage(item.thumbnailUrl),
)),
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
item.title,
style: TextStyle(color: Colors.black, fontSize: 16),
),
),
)
],
),
),
),
);
}
Widget displayVideos(items) {
List<Widget> lines = [];
print(items);
items.videos.forEach((element) => lines.add(displayVideo(element)));
return SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child: Column(children: lines)));
}
#override
Widget build(BuildContext context) {
final ExplorePlaylistArguments args =
ModalRoute.of(context).settings.arguments;
playlist = fetchPlaylist(args.playlistId);
return Scaffold(
appBar: AppBar(
title: Text(args.playlistName),
),
body: Container(
child: FutureBuilder<Playlist>(
future: playlist,
builder: (context, snapshot) {
if (snapshot.hasData) {
return displayVideos(snapshot.data);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
// By default, show a loading spinner.
return Center(child: CircularProgressIndicator());
}),
));
}
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 303 pixels on the bottom.
The relevant error-causing widget was:
Column file:///C:/Users/Jonathan/AndroidStudioProjects/klp_app/lib/screens/explore_playlist.dart:29:18
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#42b06 relayoutBoundary=up19 OVERFLOWING
... parentData: <none> (can use size)
... constraints: BoxConstraints(0.0<=w<=384.7, 0.0<=h<=67.9)
... size: Size(384.7, 67.9)
... direction: vertical
... mainAxisAlignment: start
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
A RenderFlex overflowed by 303 pixels on the bottom.
How the cards look like:
How I want each individual card to look like:
Solution:
Widget displayVideo(item) {
return Card(
child: Column(
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundImage:
NetworkImage(item.fromChannel.channelThumbnail),
),
title: Text(item.fromChannel.channelTitle),
subtitle: Text(item.publishAt),
),
new AspectRatio(
aspectRatio: 16 / 9,
child: Image.network(item.thumbnailUrl, fit:BoxFit.fitWidth),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
item.title,
style: TextStyle(color: Colors.black, fontSize: 16),
),
)
],
),
);
}
Widget displayVideos(items) {
List<Widget> lines = [];
items.forEach((element) => lines.add(displayVideo(element)));
return SingleChildScrollView(
child: Column(children: lines));
}
Tip: You can also use ListView.builder() instead of SingleChildScrollView and Column
You have to remove Container from displayVideos method.
return SingleChildScrollView(child: Column(children: lines)); // container remove
And remove Flexible from displayVideo method.