I want to display a Container with Text followed by a ListView of categories. In my current code, it works out except that I wasn't able to figure out, how to make the Text and Container scrollable as well (so it moves upside away out of the frame).
It looks currently like this:
The blue container is static and stays at its location while the red ListView is perfectly fine scrollable.
Current Code:
body: Container(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
padding: EdgeInsets.fromLTRB(15, 0, 0, 10),
child: Align(
alignment: Alignment.topLeft,
child: const Text("Browse through the individual categories...", style: TextStyle(fontSize: 32, color: Colors.black, fontWeight: FontWeight.w900)),
),
),
Expanded(
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index){
return Padding(
padding: const EdgeInsets.all(8.0),
child: Category(),
);
}
),
),
],
),
I tried to implement this answer.
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
padding: EdgeInsets.fromLTRB(15, 0, 0, 30),
child: Align(
alignment: Alignment.topLeft,
child: const Text("Browse through the individual categories...", style: TextStyle(fontSize: 32, color: Colors.black, fontWeight: FontWeight.w900)),
),
),
Expanded(
child: ListView.builder(
shrinkWrap: true,
primary: false,
itemCount: 20,
itemBuilder: (context, index){
return Padding(
padding: const EdgeInsets.all(8.0),
child: Category(),
);
}
),
),
],
),
),
I get the following errors:
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
RenderBox was not laid out: RenderFlex#12630 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
Add these lines in your listview
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
You can skip the Expanded widget for this solution.
Just removed SingleChildScrollView widget it will work.
Wrap with SingleChildScrollView widget and then add physics : NeverScrollableScrollPhysics() to ListView widget.
Related
I'm making an API call, which gives back a list. I want to display, let's say, SomeWidget() horizontally using ListView.builder(). But I'm not able to achieve that target still.
I've tried wrapping the ListView.builder() inside a Container() and gave it some height and width. But hard luck. I've also tried wrapping it using Expanded(). But hard luck. I have tried wrapping it with, first a Container() then wrapping the Container() with Expanded(). Still hard luck.
The error that I keep getting is the following:
'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 544 pos 12: 'child.hasSize': is not true.
The relevant error-causing widget was
ListView
Here's my ListView.builder() code:
someList.isNotEmpty ?
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Column(
children: [
Align(
alignment: Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12, vertical: 6),
child: Text('HEADING',
style: TextStyle(fontSize: 12),
),
),
),
Container(
height: 15.h,
width: 80.w,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: someList.length,
itemBuilder: (_, index) {
return SomeWidget();
}),
),
],
),
),
) : Text(''),
Is there any other information that I should add here?
Update
The ListView.builder() is working perfectly for vertical scrolling. The code is the following:
Container(
height: 15.h,
width: double.infinity,
child: ListView.builder(
// scrollDirection: Axis.horizontal,
itemCount: someList.length,
itemBuilder: (_, index) {
return SomeWidget();
},
),
),
On adding scrollDirection: Axis.horizontal, it however doesn't work.
Add Your ListView.builder() inside Expanded or Flex Widget hope its help to you
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child:ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: someList.length,
itemBuilder: (_, index) {
return SomeWidget();
}),
),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
//Try add height and width
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
textDirection : TextDirection.ltr or rtl
children: [
Align(
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12, vertical: 6),
child: Text('HEADING',
style: TextStyle(fontSize: 12),
),
),
i think or maybe the listview not the problem maybe inside on the listview item is the problem which as the error you've shown is that need has szie so in between in those item need to be wrap container or sized box
If Expanded or Flexible widgets didn't work, try giving a fixed width to your ListView items.
Column(
children: [
child:ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: someList.length,
itemBuilder: (_, index) {
return Container(width: 150, child: someWidget());
}),
),
],
),
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
In my Flutter project, I show a list of data using ListView which is wrapped with Container. Now, when I am using the Container without setting it's height it shows the following error-
RenderBox was not laid out: RenderRepaintBoundary#a418c
relayoutBoundary=up16 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart': Failed assertion: line 1687
pos 12: 'hasSize'
And here's the entire structure of the class I have written-
SingleChildScrollView(
child: Column(
children: <Widget>[
showTheHistory(),
Container(
height: MediaQuery.of(context).size.height-ScreenUtil.instance.setWidth(260),
child: Padding(
padding: EdgeInsets.only(left: ScreenUtil.instance.setWidth(10), right: ScreenUtil.instance.setWidth(10)),
child: Container(
color: Colors.white,
child: FutureBuilder<List>(
future: _searchList,
initialData: List(),
builder: (context, snapshot) {
return snapshot.hasData ?
new ListView.builder(
padding: EdgeInsets.all(ScreenUtil.instance.setWidth(10)),
itemCount: snapshot.data.length,
itemBuilder: (context, i) {
return _buildRow(snapshot.data[i]);
},
)
: Center(
child: NoResultFoundScreen(),
);
},
),
),
),
),
SizedBox(height: ScreenUtil.instance.setHeight(10),),
Container(
width: MediaQuery.of(context).size.width,
child: Padding(
padding: EdgeInsets.only(left: ScreenUtil.instance.setWidth(10), right: ScreenUtil.instance.setWidth(10) ),
child: Column(
children: <Widget>[
Card(
elevation: 6,
child: Padding(
padding: EdgeInsets.all(ScreenUtil.instance.setWidth(5)),
child: Row(
children: <Widget>[
Text('English to ${Credentials.languageType}', style: TextStyle(fontSize: ScreenUtil.instance.setSp(18), color: Colors.teal, fontWeight: FontWeight.bold),)
],
),
),
),
Padding(
padding: EdgeInsets.only(top:ScreenUtil.instance.setWidth(10)),
child: Card(
color: Colors.white,
elevation: 10,
child: Container(
child: Column(
children: <Widget>[
getHowToUseText('1. '),
Padding(
padding: const EdgeInsets.only(left:8.0, right: 8.0),
child: Divider(height: 2, color: Colors.grey,),
),
getHowToUseText('2. While typing you will get auto suggestions. You can tap on the words to see meaning'),
],
),
),
),
)
],
),
),
),
SizedBox(
height: ScreenUtil.instance.setHeight(160),
)
],
),
),
So, as you can see that these is a height set to the Container wrapping the ListView. In the ListView, the data takes time to load and in that period of time the Container with that fixed size remains blank which is visibly not good. So, I need a solution to make that Listview height dynamic in spite of setting the height of the Container.
add shrinkWrap: true property to the listview also remove the container .
Also you have so many redundant widgets. You should consider refactoring your codes. You should have a look at the widgets docs on flutter.dev
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.
I am adding a header in the grid view. The header is scrolling but when touching grid view. It is not scrolling. I want to scroll header and gridview.
I have used SingleChildScrollView and Expanded. How to solve the please help me.
My code is shown below
Widget ItemGridview() {
return Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Expanded(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
new Text(
'Items of products',
style: TextStyle(fontWeight: FontWeight.w700, fontSize: 18.0),
textAlign: TextAlign.left,
),
GridView.count(
shrinkWrap: true,
primary: true,
padding: EdgeInsets.only(top:15.0),
crossAxisCount: 3,
childAspectRatio: 0.60, //1.0
mainAxisSpacing: 0.2, //1.0
crossAxisSpacing: 4.0, //1.0
children: createCategoryList(),
),
],
),
)
)
]
),
);
}
In my code Items of products is the header.
List<Widget> createCategoryList() {
List<Widget> createCategoryList = List<Widget>();
for (int i = 0; i < documents.length; i++) {
createCategoryList
.add(makeGridCell(documents[i].data['title'], "name", 8,documents[i].data['id']));
}
return createCategoryList;
}
Container makeGridCell(String name, String image, int count, String id) {
return Container(
child: new GestureDetector(
onTap: () {
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
verticalDirection: VerticalDirection.down,
children: <Widget>[
new Container(
child: Image.asset('assets/' + image + ".jpg"),
),
new Container(
color: Colors.white,
padding: EdgeInsets.only(left: 5),
child: new Text(name,
style: TextStyle(
fontWeight: FontWeight.w500, fontSize: 18.0)),
),
],
),
));
}
The createCategoryList() is the list of items in grid written in widget.
I had similar widget tree like you
a gridview.count() wrapped in SingleChildScrollView adding
physics: ScrollPhysics(),
to GridView.count() Widget Solved my problem
source:https://github.com/flutter/flutter/issues/19205
Add physics: ScrollPhysics() property to Gridview. it iwll scroll.
just add some property in GridView
Widget _buildFields(BuildContext context) {
return Container(
color: Colors.white,
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 2.0,
mainAxisSpacing: 2.0,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
children: List.generate(choices.length, (index) {
return Center(
child: new Column(
children: [
new Expanded(
child: SelectCard(choice: choices[index]),//your card wight
),
],
),
);
}),
));
}
and use like this
class _Dashboard extends State<Dashboard> {
#override
Widget build(BuildContext context) {
return OrientationBuilder(builder: (context, orientation) {
return ListView(
children: <Widget>[
Container(
height: 200,
child: Image.network(
"https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
),
_buildFields(context),
],
);
});
}
}
You have some issues related to the Scroll of your widgets, you can reduce the amount of Widgets using Wrap, like this :
Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Items of products',
style: TextStyle(fontWeight: FontWeight.w700, fontSize: 18.0),
textAlign: TextAlign.left,
),
Padding(
padding: const EdgeInsets.only(top: 15.0),
child: Wrap(
spacing: 20.0,
alignment: WrapAlignment.spaceEvenly,
children:createCategoryList(),
),
],
),
)
)
]
),
);
Add a constraint width or a fixed with to the widget of your item:
return Container(
constraints:
BoxConstraints(maxWidth: MediaQuery.of(context).size.width / 4),
child: new GestureDetector(
I think you need to use some custom scroll view
CustomScrollView(
primary: false,
slivers: <Widget>[
SliverPadding(
padding: const EdgeInsets.all(20.0),
sliver: SliverGrid.count(
crossAxisSpacing: 10.0,
crossAxisCount: 2,
children: <Widget>[
const Text('He\'d have you all unravel at the'),
const Text('Heed not the rabble'),
const Text('Sound of screams but the'),
const Text('Who scream'),
const Text('Revolution is coming...'),
const Text('Revolution, they...'),
],
),
),
],
)
Just ran into this myself, change your primary parameter for the GridView to false, give that a try.
In Gridview.builder scrolling is not working for smaller resolutions like tablet mode,mobile mode then just wrap the Gridview.builder under the listview.builder widget.
SizedBox(
width: screenSize.width,
height: screenSize.height * entry.contentHeightFactor,
child: ListView.builder(
itemCount: 1,
itemBuilder: (context, index) {
return Card(
child: Container(
width: screenSize.width * 0.8,
height: screenSize.height * 0.72,
padding: const EdgeInsets.all(10),
child: GridView.builder(
scrollDirection: Axis.vertical,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
padding: const EdgeInsets.all(5),
itemCount: 30,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child:Card(....),
);
},
),
),
);
},
),
),