I've got a ListView within a Column. In that Listview I want to place a couple of ListTiles. Unfortunately the tiles behave weird when scrolling. They are shown on top of the other widget placed in the Column
Is there a way to prevent that behaviour of ListTile?
Here is my code:
Column(children: [
const ChatHeader(),
Padding(
padding: const EdgeInsets.all(8),
child: SizedBox(
height: 300,
child: ListView.builder(
padding: const EdgeInsets.only(left: 8, right: 8),
scrollDirection: Axis.vertical,
itemCount: myCollection,
shrinkWrap: true,
physics: const BouncingScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
var item = myCollection[index];
return Column(children: [
Row(
children: [
Container(
decoration: boxDecoration(
radius: 20, bgColor: d_colorPrimary)),
text("${item.value1}", fontSize: textSizeMedium)
],
),
ListTile(
dense: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8))),
tileColor: quiz_light_gray,
title: SizedBox(
child: text(item.name,
fontSize: textSizeMedium,
textColor: d_textColorPrimary,
isLongText: true,
maxLine: 10)))
]);
}))),
16.height,
Container(color: greenColor, child: Text("text input here"))
]);
Replacing the ListTiles with a Container solves this problem. As far as I can see there is no property to prevent that behaviour. Still want to use ListTiles.
Perhaps this is because of the usage of BouncingScrollPhysics().
Try replacing it with Neverscrollablescrollphysics() or just wrap the whole Listview.builder with an Expanded widget. which will let you won't use shirnkWrap and physics properties.
If the Container widget fixes the issue then you can try wrapping Listile() with another Sizedbox() widget.
I've wrapped the SizedBox with the ListView in a Material widget. That solved the problem.
Related
I want to set,
user can scroll and see the admins --- inside red marked container (look at the picture).
"Admins" Text don't want to scroll
Listtiles in ListView.Builder only scroll inside red area marked in picture (red area = Container)
my try here :
Container(
height: 300,
child: Column(
children: [
const CustomText(
align: TextAlign.start,
size: 20,
text: "Admins",
textColor: Colors.white,
fontWeight: FontWeight.w500,
),
ListView.builder(
physics: AlwaysScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
itemCount: itlength,
shrinkWrap: true,
itemBuilder: (context, index) {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: 5, vertical: 10),
child: ListTile(
title: Text(name),
subtitle:
Text(sub),
),
);
},
),
],
),
)
Wrapping your ListView with Expanded to take all the available space will fix it but make sure that the parent of the container is Column not a Scrolling widget.
Idea is to put a ListView.builder and an Image together side by side horizontally.
So, I put the ListView.builder and the Image in a Row.
This Row is inside a ListView which has other children too.
The problem is that before I introduced the Row, the ListView.builder was showing up properly. Now with Row, ListView.builder and an Image are NOT being shown.
There are no errors, just the contents are invisible.
Row(
children: <Widget>[
ListView.builder
(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemCount: list3.length,
itemBuilder: (BuildContext ctxt, int Index)
{
return new ListView
(
shrinkWrap: true,
padding: const EdgeInsets.all(1),
children: <Widget>
[
ListTile(
leading: CircleAvatar(
radius: 6.0,
backgroundColor: Colors.black,
),
title : Text(list3[Index], style: TextStyle(color: Colors.red, fontSize: 25,),)
),
]
);
},
),
Expanded(
child: Image(
image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
height: 15,
width: 15,
fit: BoxFit.cover,
)
),
],
),
Wrap your ListView.builder with Expanded.
The ListView is inside a Row and needs a width, so that the other element can expand in the remaining area. So wrap it inside a SizedBox.
SizedBox(
width: 300,
child: ListView.builder(),
)
I am hella frustrated.
I need a Gridview.builder (or Listview with 3 Columns in each row)
AND on top of the Grid I need 1 Header.
Yet my code screws either the 3 Column List up, or the Header which will be tripled then.
I am a total coding newbie. Yet I am trying desperately to fix this issue.
Sorry for the wrong code in advance.
GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,),
itemCount: 210,
itemBuilder: (context, index) {
return StickyHeader(
header: Container(
height: 50.0,
color: Colors.blueGrey[700],
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text('Header',
style: const TextStyle(color: Colors.white),
),
),
content: Column(
children:
List<int>.generate(21, (index) => index)
.map((item) => Container(
decoration:
BoxDecoration( // <-- BoxDecoration
border: Border(bottom: BorderSide())
),
height: 50,
width: 5000000,
child: Text ('Test'),
))
.toList(),
),
);
}),
I would use a Column which first child is the header and the second one is the GridView inside an Expanded widget.
Something like this.
Or you can use slivers in a CustomScrollView. Short tutorial here.
I am trying to render GridView and ListView on the same page in Flutter, where the grid and list are not scrollable on their own but are scrollable as a whole page. The GridView and the ListView will be rendered, but they should have a discontinuous distribution of grid and list on the page.
Thanks in advance!
Use primary: false and shrinkWrap: true to the GridView
return ListView(
children: <Widget>[
Container(
height: 75,
color: Colors.green,
margin: const EdgeInsets.all(25),
),
GridView.count(
primary: false,
shrinkWrap: true,
crossAxisCount: 3,
children: List<Widget>
.generate(10, (_) => Container(
color: Colors.red,
margin: const EdgeInsets.all(25),
)),
),
],
);
I'm having the same issue that is outlined here. I've tried all of the solutions provided and I'm still getting an error "RenderFlex overflowed by x pixels on the bottom". I don't have any widgets underneath the custom ListView Builder. I'm really at a loss here.
Widget build(BuildContext context) {
return new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new GradientAppBar("Twitter"),
new Container(
child: Flexible(
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.only(top: 10.0, left: 10.0),
child: UserInfoHeader(userinfo)
),
PagewiseListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: const AlwaysScrollableScrollPhysics(),
pageSize: 200,
itemBuilder: (context, TwitterCardContent entry, _) {
return TwitterCard(entry);
},
pageFuture: (pageIndex) {
return getStatuses(userinfo.screenName);
},
)
],
),
),
),
],
);
}
And here is the contents of each List item.
Widget build(BuildContext context) {
return new Card(
//elevation: 8.0,
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.circular(25.0)
),
child: ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
leading: Container(
padding: EdgeInsets.only(right: 12.0),
decoration: new BoxDecoration(
border: new Border(
right: new BorderSide(width: 1.0, color: Colors.white54)
)
),
child: notchecked,
),
title: Text(
statusCard.timeStampString,
style: Theme.TextStyles.buttonText,
),
subtitle: Text(
statusCard.text,
style: Theme.TextStyles.contentCardText,
),
trailing: delete,
),
),
);
}
Column widget doesn't scroll and you have that widget as your parent widget and PageListView as a child inside it.
Instead, replace your parent Column widget with ListView that should resolve renderflow exception.
Wrap your listview builder with expanded widget.
just to add an example to Dave's answer
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: 5,
itemBuilder: (context, index) {
return Container();
}
Problem is that your ListView is inside a Column which has fixed height and can't be scroll whereas listview scrolls. I am not sure but changing Column a listview itself or using Expanded/Flexible with Column could workOut.