I can see 6 list items in my listview widget and I can not scroll the listview although 3 more items are there.
Actually I want to keep this workouts page pretty simple that means I want to avoid using many rows/columns...
I have just a text label at the top left corner and below listview.
What do I have to change to make the listview scrolling?
I already use physics: AlwaysScrollableScrollPhysics(),
appBar: AppBar(
title: Text(title),
),
body: Container(
color: Colors.green,
margin: const EdgeInsets.all(5.0),
child: Column(
children: [
Align(
alignment: Alignment.topLeft,
child: Text("Workouts", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)),
),
Expanded(
child: ListView.builder(
physics: AlwaysScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: workouts.length,
itemBuilder: (context, index) {
var workout = workouts[index];
return WorkoutWidget(key: Key(workout.id.toString()), workout: workout);
}),
),
],
),
),
Change physics to NeverScrollableScrollPhysics(), then wrap your Container with SingleChildScrollView widget. You could also omit scrollDirection, because Axis.vertical is already the default value.
appBar: AppBar(
title: Text(title),
),
body: SingleChildScrollView(
child: Container(
color: Colors.green,
margin: const EdgeInsets.all(5.0),
child: Column(
children: [
Align(
alignment: Alignment.topLeft,
child: Text(
"Workouts",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
),
),
Expanded(
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: workouts.length,
itemBuilder: (context, index) {
var workout = workouts[index];
return WorkoutWidget(
key: Key(workout.id.toString()),
workout: workout,
);
}),
),
],
),
),
Related
In my application I am listing in an appBar several Containers that have the names of product categories, these categories are being listed in the body with their respective products.
The ListView that is in the appBar has the same indexes of the ListView of the body, so the idea was to press the index 'x' in the appBar and the user would be redirected to the index 'x' in the body.
I tried many solutions, one of then was the package https://pub.dev/packages/scrollable_positioned_list, but it did not works because when calling the function to scroll my list just disappears.
Here's de code:
return Scaffold(
backgroundColor: Colors.white,
appBar: PreferredSize(
preferredSize: Size.fromHeight(120),
child: Column(
children: [
AppBar(...),
Expanded(
child: Container(
color: AppColors.primary,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: widget.listaProdutos.length,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.symmetric(...),
child: GestureDetector(
child: Container(
decoration: BoxDecoration(...),
child: Padding(...),
child: Center(
child: Text(
widget.listaProdutos[index].dsGrupo,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
),
onTap: () {
SHOULD SCROLL TO INDEX
},
),
);
},
)
),
),
],
),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: widget.listaProdutos.length,
itemBuilder: (context, indexGrupo) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Card(...),
ListView.builder(..),
],
);
},
),
),
],
),
),
);
You can use PageView with scrollDirection: Axis.vertical,
class TFW extends StatefulWidget {
const TFW({super.key});
#override
State<TFW> createState() => _TFWState();
}
class _TFWState extends State<TFW> {
final PageController controller = PageController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
bottom: PreferredSize(
preferredSize: Size.fromHeight(100),
child: Expanded(
child: ListView.builder(
itemCount: 100,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return InkWell(
onTap: () {
controller.animateToPage(index,
duration: Duration(milliseconds: 400),
curve: Curves.easeIn);
},
child: SizedBox(width: 100, child: Text("$index")),
);
},
),
),
)),
body: PageView.builder(
controller: controller,
itemCount: 100,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Container(
color: index.isEven ? Colors.red : Colors.blue,
child: Text("$index"),
);
},
),
);
}
}
Fortunately I was able to resolve the problem. To help members who may have the same doubt I will register here the solution that worked for me. (sorry for the bad English)
Question: Why ScrollablePositionedList wasn't working? (as I mentioned iniatily)
Response: I was using the ScrollablePositionedList within a SingleChildScrollView, and for some reason when using the scrollTo or jumpTo function, the information that was visible simply disappeared. For that reason, I was trying to find a way to get success using a ListView (what came to nothing).
Solution: ... Trying to figure out why the ScrollablePositionedList wasn't working as it should ...
The initial structure was:
body: SingleChildScrollView(
child: Column(
children: [
Container(
child: ScrollablePositionedList.builder(
Changed for:
body: ScrollablePositionedList.builder(
The only reason for all this confusion is that ScrollablePositionedList's indexing functions for some reason don't work as they should if it's inside a SingleChildScrollView. So, take off SingleChildScrollView and all good.
I have a nested ItemList that is made as follows:
SafeArea(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
ListTile(
title: Text('Placeholder'),
),
ListView.builder(
shrinkWrap: true,
itemCount: itemList.length,
itemBuilder: (BuildContext context, int index) {
final itemData = itemList[index];
return Card(
child: ListTile(
title: Container(
width: MediaQuery.of(context).size.width,
child: Text(
itemData.text,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.headline5,
),
),
),
);
},
),
],
),
),
I can scroll up and down when holding the items directly placed in the first list, doing so also moves the items from the nested list. (wanted behavior)
When holding items in the sublist (the one with the builder), nothing moves anywhere.
I want to make so that all items move when any of them are held to scroll, how can I do that?
Is there a way to build a list without ListView.builder or did I miss some ListView parameters?
You could use the physics parameter of Listview to achive the intended result.
SafeArea(
child: ListView(
physics: AlwaysScrollableScrollPhysics(), // add this
padding: EdgeInsets.zero,
children: <Widget>[
ListTile(
title: Text('Placeholder'),
),
ListView.builder(
physics: NeverScrollableScrollPhysics(), // and this
shrinkWrap: true,
itemCount: itemList.length,
itemBuilder: (BuildContext context, int index) {
final itemData = itemList[index];
return Card(
child: ListTile(
title: Container(
width: MediaQuery.of(context).size.width,
child: Text(
itemData.text,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.headline5,
),
),
),
);
},
),
],
),
)
Now your list should be scrollable.
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 need to add a ListViewBuilder in ExpansionTile. The expansion tile in the left side drawer. Im new in flutter, i dont know how to add this ? Please help me to fix this ?
drawer: Drawer(
child: Container(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
ListTile(......),
ListTile(......),
ListTile(......),
ExpansionTile(
title: Text(
'Game Rules',
style: TextStyle(color: Colors.white),
),
leading: new IconButton(
icon: new Icon(
Icons.wb_iridescent,
color: Colors.white,
),
),
children: <Widget>[
ListView.builder(
itemCount: _rules.length,
itemBuilder: (context, index) {
return Text(_rules[index]['category']);
})
],
),
]
In your ListView.builder - add - shrinkWrap: true,
ListView.builder(
shrinkWrap: true, // Add this
itemCount: _rules.length,
// itemCount: 10,
itemBuilder: (context, index) {
return Text(_rules[index]['category']);
// return Text('$index');
})
Hello there i am making a flutter application in which inside ScrollView in need to put Expandable list view.First of all here is my build method.
return Scaffold(
appBar: AppBar(
backgroundColor: app_color,
iconTheme: IconThemeData(
color: Colors.white, //change your color here
)),
//debugShowCheckedModeBanner: false,
//key: scaffoldKey,
backgroundColor: app_color,
body: SingleChildScrollView(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:<Widget>[
Text("Header"),
new ListView.builder(
itemCount: datas.length,
shrinkWrap: true,
itemBuilder: (context, i) {
return new ExpansionTile(
title: new Text(datas[i].title, style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic),),
children: <Widget>[
new Column(
children: _buildExpandableContent(datas[i]),
),
],
);
},
),
Text("Footer"),
],
),
)
)
);
}
Now the problem is that without SingleScrollChidView this works fine But after using SingleScrollChidView it does not shows anything and gives error RenderBox was not laid out.What is wrong here ? How can i use Expandable list view inside Singlechildscroll view in flutter.
I was able to achieve Expanded ListView within ScrollView with text by
- Use of Wrap inside SingleChildScrollView, provided you make all ListView using shrinkWrap: true
SingleChildScrollView(
child: Wrap(
direction: Axis.horizontal,
children: <Widget>[
_textBody, // text body, with 1000+ words
Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
children: <Widget>[
ListViewOne(_genericListDataOne()),
],
),
),
Column(
children: <Widget>[
ListViewTwo(_genericListDataTwo())
],
)
],
),
),
part of the Code for ListViewOne
ListViewOne(
shrinkWrap: true,
padding: new EdgeInsets.symmetric(vertical: 8.0),
children: // build list here,
);
Give your ListView a fixed height using SizedBox or similar
SingleChildScrollView(
child: Column(
children: <Widget>[
Text("Header"),// tested with 20 of these for scrolling
SizedBox(
height: MediaQuery.of(context).size.height / 2,
child: new ListView.builder(
itemCount: 20,
shrinkWrap: true,
itemBuilder: (context, i) {
return new ExpansionTile(/* whatever */ );
},
),
),
Text("Footer"),// tested with 20 of these for scrolling
],
),
)
Use SizedBox.expand for this problem,
SizedBox.expand(
child : ListView.builder(
itemCount: datas.length,
shrinkWrap: true,
itemBuilder: (context, i) {
return new ExpansionTile(
title: new Text(datas[i].title, style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic),),
children: <Widget>[
new Column(
children: _buildExpandableContent(datas[i]),
),
],
);
},
),
);
Edited answer
Try this, you should get the desired output you are looking for.
You can find the output here.
Column(
children: <Widget>[
Text(),
ListView(
shrinkWrap: true,
physics: ScrollPhysics(),
children:[]),
Text()
]
)
adding below shown code in ListView will allow smooth scrolling of widget
shrinkWrap: true,
physics: ScrollPhysics(),