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,
),
),
])),
],
));
Related
child: Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
_cardList(context),
Column(
children: [
Expanded(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: 3,
itemBuilder: (context, index) {
return Card(
child: Image.asset('assets/images/horizontal.jpg'),
);
},
),
)
],
),
I created a list and added 3 images under each other. But I can't scroll down. I thought because I did Column in Column. But nothing changed when I deleted the Bottom Column.
Wrap your ListView with Expanded for better performance, instead of using shrinkWrap: true
body: Column(
children: [
Expanded(
child: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: 3,
you need to disable SingleChildScrollView scroll physic like this:
SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),//<-- add this
child: Column(
children: [
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: 3,
itemBuilder: (context, index) {
return Card(
child: Image.asset('assets/images/horizontal.jpg'),
);
},
)
],
),
),
both list are scroll vertically you need disable one of them which is SingleChildScrollView.
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(),
),
),
In my application, I want to show two different products on the home screen, horizontally and vertically. But I want to do this with ListView.Builder as they both come as lists. I couldn't find the right usage of this, can you help with this?
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 200.0,
child: ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 25,
itemBuilder: (BuildContext context, int index) =>
Card(
child: Center(child: Text('Horizontal List Child')),
),
),
),
ListView.builder(
itemCount: 10,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Expanded(
child: Card(
child:
Center(child: Text('Vertical List Child'))),
);
},
)
],
),
),
I can do it without using ListView.builder but I need to use ListView.builder. The height of the vertical part should be equal to the element inside.
You must need to define the height of any scroll view. I prefer the horizontal scroll view
SingleChildScrollView(
child: Column(
children: [
Container(
height: 150,
child: ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
...
...
...
},
),
),
ListView.builder(
itemCount: 10,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
...
...
...
},
),
],
)
)
Remove the SingleChildScrollView.
Add an Expanded as parent to the second ListView.
Remove the Expanded from the Card
Scaffold(
body: SafeArea( //in case you dont have appbar
child: CustomScrollView(
physics: const BouncingScrollPhysics(),
slivers: [
const SliverToBoxAdaptar(child:Container(child:ListView(...)))// horizontalList
const SliverList()// verticalSliverList
],
),
),
);
try thiss
Expanded makes item inside becomes full body.
just remove it and the height to make item height equals to card
return Scaffold(
appBar: AppBar(
title: Text("Sample"),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: SingleChildScrollView(
physics: ScrollPhysics(),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Sample 1"),
),
Container(
height: 100,
child: ListView.builder(
physics: ScrollPhysics(),
itemCount: 5,
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Card(
child: Image.network("https://i.picsum.photos/id/9/250/250.jpg?hmac=tqDH5wEWHDN76mBIWEPzg1in6egMl49qZeguSaH9_VI",),
);
}
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Sample 2"),
),
ListView.builder(
physics: ScrollPhysics(),
itemCount: 5,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Card(
child: Image.network("https://i.picsum.photos/id/9/250/250.jpg?hmac=tqDH5wEWHDN76mBIWEPzg1in6egMl49qZeguSaH9_VI"),
);
}
),
],
),
),
),
);
I am trying to wrap some list items in an Expansion panel But the contents are overflowing.
ExpansionTile(
title: Text('Client'),
children: <Widget>[
ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: upComingCompliancesList.length,
itemBuilder: (BuildContext context,int index){
return Container(
margin: EdgeInsets.symmetric(vertical: 10.0),
color: buttonColor,
child: ListTile(
title: Text(upComingCompliancesList[index].name==null? upComingCompliancesList[index].name==null : ' '),
subtitle: Text(
'${upComingCompliancesList[index].label} at ${upComingCompliancesList[index].date}'),
),
);
},
),
],
),
],
),
It is showing the following error:
The following assertion was thrown during layout:
A RenderFlex overflowed by 277 pixels on the bottom.
the following error is shown on the screen:
Try wrapping your ExpansionTile in a scrollable Widget to compensate for its content when the ExpansionTile is in an expanded state. Use 'SingleChildScrollView' like so:
SingleChildScrollView(
child: ExpansionTile(
title: Text('Client'),
children: <Widget>[
ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: upComingCompliancesList.length,
itemBuilder: (BuildContext context,int index){
return Container(
margin: EdgeInsets.symmetric(vertical: 10.0),
color: buttonColor,
child: ListTile(
title: Text(upComingCompliancesList[index].name==null? upComingCompliancesList[index].name==null : ' '),
subtitle: Text(
'${upComingCompliancesList[index].label} at ${upComingCompliancesList[index].date}'),
),
);
},
),
],
),
],
),
),
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(),
],
),
],
),
],
),