Hello I am trying to render elements in a wrap with a listview.builder but it gives me the error constraints.hasBoundedHeight and RenderBox was not laid out: RenderShrinkWrappingViewport#fd59a relayoutBoundary=up25 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
This is my code:
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Wrap(
alignment: WrapAlignment.start,
crossAxisAlignment: WrapCrossAlignment.center,
direction: Axis.horizontal,
spacing: 10,
runSpacing: 15,
children: [
const CompatiblesInput(),
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: categories.length,
itemBuilder: (context, index) {
final category = categories[index];
return _Category(title: category, index: index);
},
),
),
const _AddCategory(),
],
),
if (categories.isEmpty) CategoryProvider.nullCheck(),
if (categories.length >= 5) CategoryProvider.maxCheck(),
const SizedBox(height: 10),
],
),
This is giving me the error above. I have been searching everywhere and everyone says to put a shinkWrap: true but it is there and still not working. Is there a way to solve this?
I hope you can help me. Thanks in advance!
Instead of wrapping your horizontal list with Expanded widget, you should wrap it with SizedBox, like this:
SizedBox(
height: 20,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: categories.length,
itemBuilder: (context, index) {
final category = categories[index];
return _Category(title: category, index: index);
},
),
),
or if you don't want to set a height for list view, you can do this:
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: categories.map((e) => Text('data $e')).toList(),
),
),
Related
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'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());
}),
),
],
),
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 have tried using gridlist, flutter staggered grid view but was still not able to do it.
This is what I would like it to look like.
Intended look
The best i could do is this, but the problem is that if i use a grid it gives each element same width.
GridView.builder(
scrollDirection: Axis.horizontal,
itemCount: widget.profile.interests.length,
gridDelegate:
new SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 50,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 0.3),
itemBuilder: (BuildContext context, int index) {
return CardWidget(context, index);
})
output
You can use ListView instead...
ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Row(
children: <Widget>[
CardWidget('Long text'),
CardWidget('Even longer text'),
CardWidget('Long text'),
CardWidget('Even longer text'),
CardWidget('Text'),
],
),
Row(
children: <Widget>[
CardWidget('Text'),
CardWidget('Short text'),
CardWidget('Text'),
CardWidget('Short text'),
CardWidget('Long text'),
CardWidget('Even longer text'),
],
)
])
],
);
OUTPUT
UPDATE WITH BUILDER
Here is another solution with builder. There is probably better solution for this. It just a first one what cross my mind
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();
},
),
)
],
),
)
List<int> topRow = [];
List<int> bottomRow = [];
List<int> _addRowElements() {
for (int i = 0; i < numbers.length; i++) {
if (i.isEven) {
topRow.add(numbers[i]);
} else {
bottomRow.add(numbers[i]);
}
}
return topRow;
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: MediaQuery.of(context).size.width,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
..._addRowElements()
.map(
(number) => TextAndIconWidget(
label: number.toString(),
),
)
.toList(),
],
),
Row(
children: <Widget>[
...bottomRow
.map(
(number) => TextAndIconWidget(
label: number.toString(),
),
)
.toList(),
],
),
],
),
],
),
My Column won't scroll when using this piece of code:
Flexible(
child: new ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: AlwaysScrollableScrollPhysics(),
children: <Widget>[
CarsList(uid: widget.uid),
MotorbikeList(uid: widget.uid)
],
)
),
When I wrap them individually into Flex Widget I can then scroll through them but they are not using the entire space of the column when expanded.
Flexible(
child: CarsList(uid: widget.uid),
),
Flexible(
child: MotorbikeList(uid: widget.uid),
)
[
Try this code:
Flexible(
child: new ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: AlwaysScrollableScrollPhysics(),
children: <Widget>[
Expanded(
child: CustomScrollView(slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
CarsList(uid: widget.uid),
MotorbikeList(uid: widget.uid)
},
childCount: 2,
),
),
])),
],
));