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());
}),
),
],
),
Related
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.
My singleChildScollView won't scroll vertically. I've checked similar questions regarding this problem but none of them sem to work for me.
The page fills up with the items, and the homepage button is placed at the bottom...
...so it looks correct, it just doesn't let me scroll.
Can anyone help? [ EDIT - please note in the example code below I have simplified the original widget tree and removed the homepage button]...
Scaffold(
body: SingleChildScrollView(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (ctx, index) {
...list of items here...
}
),
),
)
There is two steps you can do to use SingleChildScrollView in a Column widget
Wrap it in a SizedBox
Set a height to the SizedBox widget
Try this out :
Scaffold(
body:
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
SizedBox(
//set a height
height : MediaQuery.of(context).size.height/5,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (ctx, index) {
...list of items here...
}
),
],
),
),
),
Center(
child: ElevatedButton(
onPressed: () {Navigator.pop(context);},
child: Text('Homepage'),
),
),
],
),
)
#james please check it
Scaffold(
body: Stack(
children: [
SingleChildScrollView(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ScrollPhysics(),
itemCount: 30,
itemBuilder: (ctx, index) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
child: Text("index $index"),
);
}
),
),
Align(
alignment: Alignment.bottomCenter,
child: ElevatedButton(
onPressed: () {Navigator.pop(context);},
child: Text('Homepage'),
),
),
],
),
)
thanks for the help, expecially #Jahidul Islam.
I was missing the physics: ScrollPhysics() line!
In order for the SingleChildScrollView to work, its parent's height should be defined.
You can achieve this by wrapping the SingleChildScrollView in a Container/SizedBox, or by wrapping it with the Expanded widget.
I cannot figure out how to create a Scrolling Wrap Widget inside my app that displays a number of items over 2 lines and is scrollable Horizontally to reveal the lines content:
return
SafeArea(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Wrap(
direction: Axis.horizontal,
runAlignment: WrapAlignment.center,
children:[
for (var i=0;i<10;i++) Card(
elevation: 6,
color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(title,),
),
),
]
),
),
);
The result for this is :
I tired to wrap the Wrap with a Container with fixed height and every other combination imaginable and have not found a way to do this correctly, Basically I want to achieve a grid like functionality where the children are not all constrained to a fixed sized cell but are maintaining their variable width .
Expected result as requested would be a scroll-able list that looks like this:
This Answer Will Help You.
List<String> list = ['Long text', 'Even longer text', 'Long text', 'Even longer text', 'Text', 'Text', 'Short text', 'Text', 'Short text', 'Long text', 'Even longer text'];
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 50,
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: list.length,
itemBuilder: (context, index) {
return index.isEven ? CardWidget(list[index]) : Container();
},
),
),
SizedBox(
height: 50,
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: list.length,
itemBuilder: (context, index) {
return index.isOdd ? CardWidget(list[index]) : Container();
},
),
)
],
),
)
I refer from this solution.
Output like this
I was have similar problem and I fixed with constrained box. And can you try this;
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.25,
maxWidth: MediaQuery.of(context).size.width * 1.5,
),
child: Wrap(
direction: Axis.horizontal,
crossAxisAlignment: WrapCrossAlignment.end,
alignment: WrapAlignment.start,
spacing: 10,
runSpacing: 2,
children: List.generate(
myList.length,
(index) {
return ChoiceChip(
onSelected: (bool isSelected) {
//when selected it works code
},
label: SizedBox(
height: 20,
child: Text(name),
),
selected: false);
},
).toList(),
),
),
);
I wonder why that doesn't work. Maybe one can help me, I think it's just a small mistake.
I would like to be able to scroll the whole screen. The container with the "CompanyCard" widget can be scrolled vertically.
return Column(
children: <Widget>[
SearchBox(),
Expanded(
child: Stack(
children: <Widget>[
Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: companies.length,
itemBuilder: (context, index) => CompanyCard(),
),
),
],
),
),
SearchBox(),
SearchBox(),
SearchBox(),
],
);
horizontal: Facebook, Google Twitter (already works)
vertical: the whole screen (not working)
Wrap SingleChildScrollView to the widgets you like to scroll
return Column(
children: <Widget>[
SearchBox(),
SingleChildScrollView(
child: Expanded(
child: Stack(
children: <Widget>[
Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: companies.length,
itemBuilder: (context, index) => CompanyCard(),
),
),
],
),
),
),
SearchBox(),
SearchBox(),
SearchBox(),
],
);
New edit:
To make the whole page scrollable, wrap the page in SingleChildScrollView:
Full Code:
return Container(
child: SingleChildScrollView(
child: Expanded(
child: Column(
children: <Widget>[
SearchBox(),
SingleChildScrollView(
child: Expanded(
child: Stack(
children: <Widget>[
Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: companies.length,
itemBuilder: (context, index) =>
CompanyCard(),
),
),
],
),
),
),
SearchBox(),
SearchBox(),
SearchBox(),
],
),
),
),
);
You need to specify an explicit height to your List View. By default a List View has infinite height / width.
To be able to scroll the entire screen, you need to wrap your root widget inside a SingleChildScrollView and then specify a height for the List View container. Somewhat like this :-
body : SingleChildScrollView(child :...
... Other widgets...
Container (
height :200,
width :MediaQuery.of(context).size.width, // so that ListView occupies the entire width
child : ListView.builder(...
I think ListView in Column needs height.
I wrapped ListView with Container and give a some height.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Home page"),
elevation: 5.0,
),
body: SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
SizedBox(child: Text('asdf')),
Container(
height: 500,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 3,
itemBuilder: (context, index) =>
SizedBox(width: 200, child: Text('aaa')),
),
),
SizedBox(child: Text('asdf')),
SizedBox(child: Text('asdf')),
SizedBox(child: Text('asdf')),
],
),
),
),
);
}
I have tried to return a list of widgets in horizontal direction, i want to expand widgets width dynamically. how can i achieve this. (Note: ListView.builder placed inside column)
ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: widget.playType.length,
itemBuilder: (BuildContext context, int index) {
return Flex(
direction: Axis.horizontal,
children: <Widget>[
Flexible(
child: InkWell(
onTap: () {},
child: Container(
padding: EdgeInsets.only(left: 10, right: 10),
color: colorSubMenuBg,
height: 45,
child: Align(
alignment: Alignment.center,
child: Text(
widget.playType[index],
style: CustomTextStyle.listTile4(context),
),
),
),
),
),
],
);
});
Expected output should be like this highlighted part:
Wrap Container( height: 70)in your ListViewBuilder()
like this
Container(
height: 70,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: widget.playType.length,
itemBuilder: (BuildContext context, int index) {
return Flex(
direction: Axis.horizontal,
children: <Widget>[
Flexible(
child: InkWell(
onTap: () {},
child: Container(
padding: EdgeInsets.only(left: 10, right: 10),
color: colorSubMenuBg,
height: 45,
child: Align(
alignment: Alignment.center,
child: Text(
widget.playType[index],
style: CustomTextStyle.listTile4(context),
),
),
),
),
),
],
);
}),
);```
Actual working code, i removed flex from ListView.builder and added width for ListItems and ListView.
var buttonListWidth = MediaQuery.of(context).size.width;
Container(
height: 45,
width: buttonListWidth,
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: widget.playType.length,
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: () {
setState(() {});
},
child: Container(
color: colorSubMenuBg,
height: 45,
width: buttonListWidth / widget.playType.length,
child: Align(
alignment: Alignment.center,
child: Text(
widget.playType[index],
style: CustomTextStyle.listTile4(context),
),
),
),
);
}))
Try adding a Row over the ListView.builder and add mainAxisSize: MainAxisSize.min, property to that Row.
ItemExtent property of ListView.builder
itemExtent: MediaQuery.of(context).size.height / LENGHT,