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,
),
),
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
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"),
);
}
),
],
),
),
),
);
Hello I am trying to align to the left a ListView widget, this is the piece of code:
Column(children: [
Container(
alignment: Alignment.centerRight,
child: TextButton(
onPressed: () => _removeOptionForm(variantList),
child: Text("remove option")),
),
Row(children: [
Flexible(
child: Column(children: [
Container(
height: 50.0,
alignment: Alignment.centerRight,
child: ListView.builder(
key: UniqueKey(),
scrollDirection: Axis.horizontal,
itemCount: optionFormValueList.length,
itemBuilder: (BuildContext context, int index) {
return optionFormValueList[index];
})),
TextFormField(
controller: _optionNameController,
keyboardType: TextInputType.text,
autocorrect: false,
The ListView stays always to the right, even if I wrapped it on a Container and the last one on a Column.
Create Listview builder like this
return ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: data!.length,
itemBuilder: (context, index) => Column(
crossAxisAlignment: CrossAxisAlignment.start,
My screen have one widget from top to middle screen, and the follow widget stands from middle to bottom. I only want scroll the second (the following) widget:
Widget _showList(){
return SingleChildScrollView(
child: _sEv.length !=null
? ListView.builder(
physics: AlwaysScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: _sEv.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
_showTimePicker(context, index);
},
child: Dismissible(
child: ListTile(
leading: Padding(padding: EdgeInsets.only(top: 10), child: Icon(Icons.calendar_today_rounded)),
title: Text(mytxt),
subtitle: Text(mytxt2)
key: UniqueKey(),
direction: DismissDirection.startToEnd,
onDismissed: (DismissDirection direction) {
setState(() {
//do something
});
}
),);
},
)
: Center(child: Text("there is nothing here")),
);
}
But it is not scrolling at all, what I'm missing? This widget is being called from a column widget ( the first one on screen )
Update (where showList is called)
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TableCalendar(
//default code in flutter doc
),
Divider(),
_showList(),
],
I wan´t to have a combination of text-widgets and lists inside a drawer. This content should be scrollable.
Here´s my sourcecode:
return Drawer(
child: Expanded(
child: Column(
children: <Widget>[
AppBar(title: Text('Test'),),
Text('Example 1:'),
ListView.separated(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: _brands.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
....);
},
separatorBuilder: (BuildContext context, int index) =>
const Divider(height: 5),
),
Text('Another heading')
],
),
),
);
What I want to achive:
The AppBar is fixed at the top
The other content below should be scrollable
I´ve tried different ways with Expanded, Columns etc. but I wasn´t able to get this layout up and running as expected. Thanks in advance for any input!
you can use a single column with the listview places inside an expanded widget
return Drawer(
child: Column(
children: <Widget>[
AppBar(),
Expanded(
child: ListView.separated(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: 100,
itemBuilder: (context, index) {
return Text(index.toString());
},
separatorBuilder: (BuildContext context, int index) =>
const Divider(height: 5),
),
),
],
),
);
yeilds
For short you can wrap your ListView with Expanded widget, it will fill all available space, but you will able to scroll it. In another case you should wrap ListView with Container and set height property.
For your example:
Drawer(
child: Column(
children: <Widget>[
AppBar(title: Text('Test'),),
Text('Example 1:'),
Expanded(
child: ListView.separated(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: List.generate(100, (index) => index).length,
itemBuilder: (BuildContext context, int index) {
return ListTile(leading: Text("$index"),);
},
separatorBuilder: (BuildContext context, int index) =>
const Divider(height: 5),
),
),
Text('Another heading')
],
),
),