I also tried to wrap the second column in SingleChildScrollView but that didn't work either.
Please tell me a solution.
The screen is not scrolling. When I delete the upper element only then another comes.
Here is my code.
SingleChildScrollView(
child: Column(
children: [
Padding(
padding: EdgeInsets.only(left: 16.0, right: 16.0),
child: FutureBuilder(
future: getAppointments(email),
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (_, index) {
AppointmentsUser appointments =
snapshot.data[index];
return Column(children: <Widget>[
ListTile(
title: Text(
appointments.service,
style: TextStyle(fontSize: 20),
),
leading: Icon(
Icons.people,
),
),
ListTile(
title: Text("Seller: ${appointments.seller}"),
),
ListTile(
title: Text("Date: ${appointments.date}"),
),
ListTile(
title: Text("Time: ${appointments.time}"),
),
Divider(),
]);
}
);
}
return CircularProgressIndicator.adaptive();
},
),
),
],
),
),
The issue is that ListView also has a scroll and the single child ScrollView also has a scroll. Removing either one should let you scroll through the content. You can either add a NeverScrollableScrollPhysics to the Listview or remove SingleChildScrollView since the ListView has got a scroll by default.
ListView.builder(
physics: NeverScrollableScrollPhysics(),//add this line
scrollDirection: Axis.vertical,
shrinkWrap: true,
....
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
primary: false,// <=== add this line
...
Just simply add this, it works fine from my side.
SingleChildScrollView(
physics: new NeverScrollableScrollPhysics(),
........
),
Related
Before using ListView.seperator, the for loop didn't cause any problems:
body: ListView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.all(60),
children: [
for (var question in questionsList)
Text(
question,
textScaleFactor: 1.5,
),
]
)
Now that it's been switched, I keep getting an error.
body: Center(
child:
ListView.separated(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.all(60),
itemBuilder: (BuildContext context, int index) {
return Container(
for (var question in questionsList)
alignment: const Alignment(0, .7),
color: Colors.transparent,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
question,
textScaleFactor: 1.5,
),
),
);
},
separatorBuilder: (BuildContext context, int index) => const
Divider(color: Colors.black,)
,
itemCount: questionsList.length
),
),
I've tried moving it to the top of ListView.seperator - didn't like that, at the top of Container() - didn't like that, within Padding() - it didn't like that either.
I want to create a horizontal list, with each question in it's own little box at the bottom of the screen. I want the questions to be looped through from a separate file.
The for loop you were using before is called "collection for". It's used within a collection literal (that is, within [] for a List literal, {} for Set and Map literals) to generate elements for the collection. For more information, I strongly recommend reading Bob Nystrom's article that introduces them.
ListView.separated doesn't take a List of items; it instead uses an itemBuilder callback that is expected to return each individual item. You don't need to use a loop with it because ListView.separated is already iterating for you; you just need your callback to return the appropriate element that corresponds to index.
This is untested, but you probably want something like:
body: Center(
child:
ListView.separated(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.all(60),
itemBuilder: (BuildContext context, int index) {
return Container(
alignment: const Alignment(0, .7),
color: Colors.transparent,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
questionsList[index], // ***
textScaleFactor: 1.5,
),
),
);
},
separatorBuilder: (BuildContext context, int index) => const
Divider(color: Colors.black) ,
itemCount: questionsList.length,
),
),
Here is the related code to help what i mean :
ListView.builder(
itemCount: recentList1.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: BouncingScrollPhysics(),
itemBuilder: (context, index) {
var recent = recentList1[index];
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => p1Read(contents: recent),
),
);
},
child: Container(
margin: EdgeInsets.symmetric(horizontal: 18.0, vertical: 8.0),
child: pt1Card(contents: recent),
),
);
},
)
I have 3 items inside recentlist1.length. And im trying to set a variable to a number based on which either of the inkwells are clicked, Since there are 3 there will be 3 inkwells in the screen. And im trying to setstate a variable to 1 if the first inkwell is clicked, 2 when the second inkwell is clicked and set the variable to 3 when the third inkwell is clicked. How would i go aout in doing this?
I'm not sure if I understand you right.
Could you not just take the index + 1?
ListView.builder(
itemCount: recentList1.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: BouncingScrollPhysics(),
itemBuilder: (context, index) {
var recent = recentList1[index];
return InkWell(
onTap: () {
setState((){
YOUR_VARIABLE = index + 1;
});
},
child: Container(
margin: EdgeInsets.symmetric(horizontal: 18.0, vertical: 8.0),
child: pt1Card(contents: recent),
),
);
},
)
I want to make use 4 listView Builder which scroll horizontally in a SingleChildScrollView but even after trying everything the page isn't scrolling vertically, can anyone help me with this.
Example :
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: getLibrayCourse(),
builder: (context,snapshot){
if(snapshot.connectionState==ConnectionState.waiting){
return Center(child: CircularProgressIndicator());
}
return Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Free Video Courses",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/4,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (context, index){
return Card(
child: Text("YOYO"),
);
}),
),
Text("Free Video Courses",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/4,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (context, index){
return Card(
child: Text("YOYO"),
);
}),
),
Text("Free Video Courses",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/4,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (context, index){
return Card(
child: Text("YOYO"),
);
}),
),
Text("Free Video Courses",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/4,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (context, index){
return Card(
child: Text("YOYO"),
);
}),
),
],
),
);
},
);
}
If I use neverscrollable in my horizontal widget it will stop scrolling so that's an issue
I have tried adding Container height, using expanded etc still the problem persists
I copied and used your code and just moved the "column" to the "SingleChildScrollView". It worked for me, Both horizontal and vertical scrolling.
#override
Widget build(BuildContext context) {
return FutureBuilder(
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
}
return Container(
padding: EdgeInsets.all(20),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// your children
]
),
),
);
},
);
}
I hope it was useful for you.
I'm getting the error stated that Incorrect use of ParentDataWidget while using ListView widget into Stack widget and using ListView.builder widget into ListView widget. (I need a scrollable page that contains ListView and GridView)
It works fine in the emulator (not working in the real device) but in a log, I'm getting error.
I'm posting both screenshots and code here.
Please help!
Screenshot of emulator
Screenshot of a real device
Check the below code
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: buildAppBar(),
body: Stack(
children: [
buildBody()
],
)
);
}
Widget buildBody() {
return Container(
padding: EdgeInsets.all(15.0),
child: Expanded(
child: ListView(
shrinkWrap: true,
children: [
buildTitleSection(),
buildSearchSection(),
buildFilterSortSection(),
buildListView(),
buildGridView()
],
),
)
);
}
Widget buildListView() {
return Visibility(
visible: isListVisible,
child: Expanded(
child: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(),
child: ListView.builder(
itemCount: items.length,
shrinkWrap: true,
physics: PageScrollPhysics(),
scrollDirection: Axis.vertical,
itemBuilder: (context, index) =>
buildRowItemsList(context, index),
)))),
);
}
Widget buildGridView() {
var screenWidth = MediaQuery
.of(context)
.size
.width;
var screenHeight = MediaQuery
.of(context)
.size
.height;
return Builder(builder: (BuildContext context) {
return Visibility(
visible: isGridVisible,
child: Expanded(
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: screenWidth / (screenHeight * 0.7),
scrollDirection: Axis.vertical,
physics: PageScrollPhysics(),
shrinkWrap: true,
children: List.generate(items.length, (index) {
return buildRowItemsGrid(context, index);
})),
),
);
});
}
I have a ListView.builder widget on my page. The problem is the widget is not scrolling when it display its results. Please what am i doing wrong?. The following code show what i have tried so far.
I have tried putting only the ListView.builder Widget on a page, the widget scrolls in that case, but once i add another widget the Listview stop scrollng.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title,style: TextStyle(fontSize: 14),),
),
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
physics: AlwaysScrollableScrollPhysics(),
child:Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child:Expanded(
child: Image.asset("assets/images/1frenchToast.webp"),
),
// ),
),
],
),
SingleChildScrollView(
child: ListView.builder(
//scrollDirection: Axis.vertical,
physics: AlwaysScrollableScrollPhysics(),
itemCount: foodCategory != null?foodCategory.length:1,
itemBuilder: (context,index){
return ListTile(
//dense: true,
leading: Container(
margin: EdgeInsets.only(bottom: 10),
child:Image.asset('assets/images/3poached-egg.webp',),
),
title: Text(foodCategory != null?foodCategory[index].foodType:1),
onTap: (){
_navigate(dropDownSelectedItemState, foodCategory[index].foodType);
},
);
},shrinkWrap: true,
// physics: AlwaysScrollableScrollPhysics(),
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: null,
tooltip: 'Increment',
child: Icon(Icons.add),
I want to be able to make my ListView.builder scrolls using the code displayed
Based on the suggestions of #VidorVistrom in another thread, this is how i solved the problem. I wrapped the ListView.builder inside a container widget and simply gave it a height of 200 and removed the SingleChildScrollView around the ListView.builder, and boom that solved the problem. In case this help other people.
The complete code is as shown below:
#override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title,style: TextStyle(fontSize: 14),),
),
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
physics: AlwaysScrollableScrollPhysics(),
child:Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child:Expanded(
child: Image.asset("assets/images/1frenchToast.webp"),
),
// ),
),
],
),
Container(//child:SingleChildScrollView(
height: 200,
margin: EdgeInsets.only(top: 20),
//scrollDirection: Axis.vertical,
// physics: AlwaysScrollableScrollPhysics(),
child: ListView.builder(
scrollDirection: Axis.vertical,
physics: AlwaysScrollableScrollPhysics(),
itemCount: foodCategory != null?foodCategory.length:1,
itemBuilder: (context,index){
return ListTile(
dense: true,
leading: Container(
margin: EdgeInsets.only(bottom: 10),
child:Image.asset('assets/images/3poached-egg.webp',),
),
title: Text(foodCategory != null?foodCategory[index].foodType:1),
onTap: (){
_navigate(dropDownSelectedItemState, foodCategory[index].foodType);
},
);
},shrinkWrap: true,
// physics: AlwaysScrollableScrollPhysics(),
),//)
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: null,
tooltip: 'Increment',
child: Icon(Icons.add),