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.
Related
I need to show two ListViews inside a dialog; I am using the showDialog function and in the "content" attribute I added a "SizedBox" without any value for the "height" attribute, and the lists are inside the Column object. Here is the code:
showDialog(
context: context,
builder: (context) => AlertDialog(
content: SizedBox(
width: double.maxFinite,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text('Text1'),
Expanded(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: listOne.length,
itemBuilder: (context, index) {
return Text(listOne.elementAt(index).name);
},
),
),
Text('Text 2'),
Expanded(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: listTwo.length,
itemBuilder: (context, index) {
return Text(listTwo.elementAt(index).name);
},
),
),
],
),
),
),
);
I have already checked that the item count for both lists is correct.
Here is the result:
I want to remove the big whitespace between the two lists if it possibile.
Hope someone can help me.
Expanded: A widget that expands a child of a Row, Column, or Flex so
that the child fills the available space.
so by default it will expand fills the full height of screen.
Workaround:
change with Flexible widget:
unlike Expanded, Flexible does not require the child to fill the available space.
children: [
Text('Text1'),
Flexible(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: 3,
itemBuilder: (context, index) {
return Text('.name');
},
),
),
Text('Text 2'),
Flexible(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: 4,
itemBuilder: (context, index) {
return Text('.name');
},
),
),
],
The white space is coming for the Expanded widget trying to expand to full size extent of the screen for both lists. if you change the Expanded widget with Sizedbox and give it a height for both list it will remove the white space in between and after.
I hope this helps
I am new to flutter and would appreciate if someone could give me some hints on this:
I have to make few (not fixed number of) widgets which have to be expandable.
When expanded, they contain list of widgets in their body. List is long and it has to be scrollable in order to see all items.
If I put everything (whole expandable widget) inside SingleChildScrollView list items in body are scrollable, but also headers scroll - which I should prevent.
Widget _buildPanel() {
return SingleChildScrollView(
child: ExpansionPanelList.radio(
children: _data.map<ExpansionPanelRadio>((Item item) {
return ExpansionPanelRadio(
value: item.id,
headerBuilder: (BuildContext context, bool isExpanded) {
return Padding(
padding: const EdgeInsets.only(top: 60.0),
child: Row(
children: [
SvgPicture.network(
"https://some_picture.svg",
height: 80),
Column(children: <Widget>[
Text(' Some Text'),
Text(' label '),
]),
],
));
},
body: ListView.builder(
itemCount: widgets.length,
itemBuilder: (context, index) => ListTile(title: widgets[index]),
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
));
}).toList(),
));
}
and if I put only body inside SingleChildScrollView like this, then I got Exceptions.
Widget _buildPanel() {
return ExpansionPanelList.radio(
children: _data.map<ExpansionPanelRadio>((Item item) {
return ExpansionPanelRadio(
value: item.id,
headerBuilder: (BuildContext context, bool isExpanded) {
return Padding(
padding: const EdgeInsets.only(top: 60.0),
child: Row(
children: [
SvgPicture.network("https://some_picture.svg",
height: 80),
Column(children: <Widget>[
Text(' Some Text'),
Text(' label '),
]),
],
));
},
body: SingleChildScrollView(
child: ListView.builder(
itemCount: widgets.length,
itemBuilder: (context, index) => ListTile(title: widgets[index]),
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
)));
}).toList(),
);
}
Is it possible to scroll only list items and to keep header in fixed position?
You need to set height for your body and remove physics, shrinkWrap in order to get what you want, like this:
body: SizedBox(
height: 300,//<-- add this
child: ListView.builder(
itemCount: widgets.length,
itemBuilder: (context, index) =>
ListTile(title: widgets[index]),
scrollDirection: Axis.vertical,
),
),
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'm having issues with Flutter wherein a screen I have created will only scroll if the user touches the padding surrounding a listview comprised of cards, and not if the actual list is interacted with itself.
The Widget tree looks similar to as below:
child: Scaffold(
body: SingleChildScrollView(
child: Center(
child: SizedBox(
width: 500.0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Text(
'List',
),
Container(
child: ListView.builder(
shrinkWrap: true,
itemCount: list.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
How would I go about making the screen scrollable regardless of where on the screen the user touches?
Add NeverScrollableScrollPhysics in Listview
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
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,
),
),
])),
],
));