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);
})),
),
);
});
}
Related
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(),
........
),
I am trying to make my main screen scrollable using SingleChildScrollView but it's not working as expected
here is my code:
SingleChildScrollView(
child: Column(
children: [
Row(...),
Container(
child: Column(
children: [
Text(...),
SizedBox(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, count) {
return Container(
height: 300,
child: Text("hi there $count"),
);
},
itemCount: 4,
),
)
],
),
)
],
),
);
change the column to list view
like this
SingleChildScrollView(
child: Column(
children: [
Row(...),
Container(
child: ListView(
children: [
Text(...),
SizedBox(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, count) {
return Container(
height: 300,
child: Text("hi there $count"),
);
},
itemCount: 4,
),
)
],
),
)
],
),
);
try this code
I am using a ListView.builder and a Gridview.builder and need to make ListView horizontal but when I set its scrollDirection property it throws error (picture attached)
[![enter image description here][1]][1]
import 'package:flutter/material.dart';
class MenuPage extends StatefulWidget {
#override
_MenuPageState createState() => _MenuPageState();
}
class _MenuPageState extends State<MenuPage> {
List<String> litems = ["Hello", "how"];
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
physics: ScrollPhysics(),
child: Column(
children: <Widget>[
ListView.builder(
scrollDirection: Axis.horizontal,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
padding: EdgeInsets.all(8),
itemCount: 18,
itemBuilder: (context, index) {
return CategoryButton(title: "title");
}),
GridView.builder(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 3 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20),
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 18,
itemBuilder: (context, index) {
return Text('Some text more');
})
],
),
),
);
}
}
[1]: https://i.stack.imgur.com/D2knH.png
You have used ListView.builder directly to the column widget. Column and its parent SingleChildScrollView widgets have infinity height and width. You should set width and height for the ListView.builder widget or warp inside the Expanded widget. I have resolved it by setting the height and widget. Find the codes below.
class MenuPage extends StatefulWidget {
#override
_MenuPageState createState() => _MenuPageState();
}
class _MenuPageState extends State<MenuPage> {
final List<String> litems = ["Hello", "how"];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SingleChildScrollView(
physics: ScrollPhysics(),
child: Column(
children: <Widget>[_buildListView(), _buildGridView()],
),
),
);
}
GridView _buildGridView() {
return GridView.builder(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 3 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20),
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 18,
itemBuilder: (context, index) {
return Text('Some text more');
},
);
}
Widget _buildListView() {
final deviceWidth = MediaQuery.of(context).size.width;
return Container(
width: deviceWidth,
height: 150.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
padding: EdgeInsets.all(8),
itemCount: 18,
itemBuilder: (context, index) {
return Container(
width: 100,
height: 100,
child: TextButton(
onPressed: () {},
child: Text("title"),
),
);
},
),
);
}
}
When the scrollDirection is set to vertical, it works as expected. The problem is when I set the section.axis to Axis.horizontal so that the ListView displays the widgets horizontally.
This problem wont solve using Flexible or Expanded widget, because the the height of the ListView needs to be defined by the widgets in the list.
As you can see shrinkWrap is also enabled. So I dont know wth is going on here, thanks for helping.
Console says:
'constraints.hasBoundedHeight': is not true.
The relevant error-causing widget was: ListView
class SectionWidget extends StatelessWidget {
final Section section;
const SectionWidget({#required this.section});
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(section.title),
ListView.separated(
shrinkWrap: true,
scrollDirection: section.axis,
physics: section.axis == Axis.vertical
? NeverScrollableScrollPhysics()
: null,
itemCount: section.itemList.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 100,
width: 100,
color: Colors.red,
); // Just to test if it works
},
separatorBuilder: (BuildContext context, int index) {
double paddingBetween = 10;
if (section.axis == Axis.horizontal) {
return SizedBox(width: paddingBetween);
} else {
return SizedBox(height: paddingBetween);
}
},
),
],
);
}
}
That's because Column or Row gives as much height/width that their children need and ListView takes as much height/width available from its parent.
To fix this, just wrap ListView in a Container. Like this:
import 'package:flutter/material.dart';
class SectionWidget extends StatelessWidget {
final Section section;
const SectionWidget({#required this.section});
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(section.title),
Container(
height: section.axis == Axis.horizontal ? 100 : 700, // I just set these values
width: section.axis == Axis.horizontal ? 350 : 100, // to fit with my device.
child: ListView.separated( // If you want to fit for
shrinkWrap: true, // all devices, use MediaQuery
scrollDirection: section.axis,
physics: section.axis == Axis.vertical
? NeverScrollableScrollPhysics()
: null,
itemCount: section.itemList.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 100,
width: 100,
color: Colors.red,
); // Just to test if it works
},
separatorBuilder: (BuildContext context, int index) {
double paddingBetween = 10;
if (section.axis == Axis.horizontal) {
return SizedBox(width: paddingBetween);
} else {
return SizedBox(height: paddingBetween);
}
},
),
),
],
);
}
}
For more info about MediaQuery
Edit:
I think using a gridview would be more suited for this. I've remade the build code for ya to suit different children's sizes. The positioning of the children and other stuff I think you can manage.
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Expanded(
child: Text(section.title),
),
SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1),
shrinkWrap: true,
scrollDirection: section.axis,
physics: section.axis == Axis.vertical
? NeverScrollableScrollPhysics()
: null,
itemCount: section.itemList.length,
itemBuilder: (context, index) {
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
// Spacer(),
Container(
margin: EdgeInsets.all(10),
height: 100,
width: 100,
color: Colors.red,
),
// Spacer(),
],
);
},
),
),
],
);
}
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),