Expanded in Column but throwing Incorrect use of ParentDataWidget - flutter

I was using an Expanded widget within a FutureBuilder directly in a column and all was well. However, adding a RefreshIndicator widget seems to have broken things and I can't see why.
return Scaffold(
body: Column(
children: [
Row(...),
FutureBuilder(
future: ...,
builder: (context, snapshot) {
return RefreshIndicator(
onRefresh: ...,
child: getList(snapshot.connectionState, user),
);
},
),
],
),
);
Widget getList(ConnectionState connectionState, UserRepository user) {
switch (connectionState) {
case ConnectionState.done:
return Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: number,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: ...,
child: Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
...,
Expanded(
child: Container(
padding: ...,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"",
softWrap: false,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
),
Text(
"",
softWrap: false,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontSize: 14),
),
],
),
),
),
],
),
),
);
},
),
);
default:
return const Text("other");
}
}
Error:
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type StackParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a Stack widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
_ScrollSemantics-[GlobalKey#85a8f] ← NotificationListener<ScrollMetricsNotification> ← Scrollable ← PrimaryScrollController ← ListView ← Expanded ← NotificationListener<OverscrollIndicatorNotification> ← NotificationListener<ScrollNotification> ← Stack ← RefreshIndicator ← ⋯
I've looked at other posts with similar error and they just talk about using expanded within a Column, which I'm already doing, so I'm lost. I'm trying to get my list view to be the remaining height of the screen, which was working before adding RefreshIndicator.

I found a solution, although I'm sure it's the best one.
I removed the Expanded directly surrounding the ListView and added a Column and two Expandeds inside the FutureBuilder.
return Expanded(
child: RefreshIndicator(
onRefresh: () {
return user.fetchUserEvents(client, Environment().config.baseApiUrl, user.userId);
},
child: Column(
children: [
Expanded(
child: getList(snapshot.connectionState, user),
),
],
),
),
);

Related

Widgets render in debug, but not in release

In one of my Flutter files I have this code that theoretically doesn't seem it should be a problem to run at all. It renders nicely in the debug version but when I build a release iOS and Android app files, it becomes partly invisible. There's a widget that renders called _heyName() which is just a text widget. The _whatWouldYouLike() widget is pretty much a 1:1 copy of the _heyName() one, yet this one doesn't render and neither does any widget afterwards.
Console does throw this warning though:
======== Exception caught by widgets library =======================================================
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Flexible(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Flexible widget has the wrong ancestor RenderObjectWidget. Typically, Flexible widgets are placed directly inside Flex widgets.
The offending Flexible is currently placed inside a RepaintBoundary widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
ConstrainedBox ← Container ← Flexible ← RepaintBoundary ← IndexedSemantics ← NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree ← SliverList ← ⋯
When the exception was thrown, this was the stack:
#0 RenderObjectElement._updateParentData.<anonymous closure> (package:flutter/src/widgets/framework.dart:5723:11)
#1 RenderObjectElement._updateParentData (package:flutter/src/widgets/framework.dart:5739:6)
#2 RenderObjectElement.attachRenderObject (package:flutter/src/widgets/framework.dart:5761:7)
#3 RenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5440:5)
#4 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6082:11)
...
====================================================================================================
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
backgroundColor: Colors.transparent,
shadowColor: Colors.transparent,
pinned: false,
expandedHeight: appBarHeight,
automaticallyImplyLeading: false,
floating: true,
flexibleSpace: LayoutBuilder(
builder: (context, constraints) {
return Container(
alignment: Alignment.bottomCenter,
child: Container(
height: SizeConfig.screenWidth * 0.13,
child: GestureDetector(
onTap: () {
},
child: _searchCategories(context))),
);
},
),
),
];
},
body: ListView(
shrinkWrap: true,
children: [
_heyName(),
SizedBox(
height: 10,
),
_whatWouldYouLike(),
SizedBox(
height: 10,
),
_requests(),
SizedBox(
height: 10,
),
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_categoriesText(),
_seeAll(),
],
),
SizedBox(
height: SizeConfig.screenWidth * 0.03,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_category("Food and Beverages", 1),
_category("Design", 2),
],
),
SizedBox(
height: SizeConfig.screenWidth * 0.1,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_category("Music", 3),
_category("Sports and Fitness", 4),
],
),
SizedBox(
height: SizeConfig.screenWidth * 0.1,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_category("Personal Grooming", 5),
_category("Information Technology", 6),
],
),
SizedBox(
height: SizeConfig.screenWidth * 0.1,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_category("Home Services", 7),
_category("Lifestyle", 8),
],
),
SizedBox(
height: SizeConfig.screenWidth * 0.1,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_category("Pet Services", 9),
_category("Consulting", 10),
],
),
SizedBox(
height: SizeConfig.screenWidth * 0.25,
),
],
),
],
),
),
);
}
}
Is there any other widget I could use instead of ListView here? I feel like that's the source of the problem as when I use a Column instead of ListView, it renders fine, just because it's bigger than the screen, it throws the good old RenderFlex error. I tried putting the Column in Expanded, but no luck. I feel I'm missing something here.
It's probably being caused by one of your custom widgets like _heyName() or _whatWouldYouLike().
Share the code for those widgets, or better to look into the code you wrote, and make sure they don't start with a Flexible widget.
The error is self explanatory, You are using a Flexible widget inside something besides a Row or Column. So in your listView, the children start with a Flexible, and thus, you get this error. Same goes for Expanded, you can't put an Expanded inside a container or listview for example.

ListView inside Column throws error 'Vertical viewport was given unbounded height'

My question seems to be a duplicate of ListView inside Column causes 'Vertical viewport was given unbounded height' but the solution to add an Expanded or Flexible widget around the ListView doesn't work at all. It still throws the same error: Vertical viewport was given unbounded height.
var data = ['a','b','c','d'];
Column(
children: <Widget>[
ListView.builder(
itemCount: data.length,
itemBuilder: (ctx, i) {
return Row(
children: <Widget>[
Text(data[i], style: TextStyle(fontSize: 24 * Rat.rat, color: Colors.white)),
],
);
},
),
],
);
Obviously it can easily be fixed by adding a container around the ListView with a fixed height but there should be no need for that, I want it to be dynamically sized.
UPDATE:
Try something like this:
class Esempio1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("WAKAWAKA"),
),
body: Container(
child: Column(
children: <Widget>[
Text("eg1"),
Text("eg2"),
Text("eg3"),
Expanded(
child: ListView.builder(
itemCount: 20,
itemBuilder: (ctx,i){
return ListTile(title: Text("aaaaaa$i"),);
},
),
)
],
),
),
);
}
}
I just tried this code and it should do what you want.
The OP actually had the block of code posted contained inside another Column, that's why the Expanded wasn't working as it should when wrapped around the ListView. Wrapping the Column inside another Expanded solved the problem and made it all work as expected.
How about wrapping ListView builder in SingleChildScrollView and setting up its physics to
physics: NeverScrollableScrollPhysics(),

Getting Incorrect use of ParentDataWidget error when I use ListView

In this part of my application I have ListView, when I run app I get this error and I can't resolve that:
Scaffold(
body: Directionality(
textDirection: TextDirection.rtl,
child: Container(
child: StreamBuilder(
stream: globals.database.ticketsDao.getTicketsStream(),
builder: (BuildContext context, AsyncSnapshot<List<Tickets>> snapshot) {
if (snapshot.hasData) {
return Column(
children: <Widget>[
Expanded(
child: ListView.separated(
itemBuilder: (context, index) {
return ListTile(
title: Flexible(
child: Text(
snapshot.data[index].subject,
style: Theme.of(context).textTheme.caption.copyWith(fontFamily: 'IranSansBold'),
),
),
subtitle: Text(
snapshot.data[index].description,
style: Theme.of(context).textTheme.caption.copyWith(fontFamily: 'IranSansLight'),
),
);
},
separatorBuilder: (context, index) {
return Divider();
},
itemCount: snapshot.data.length),
),
],
);
} else {
return Container(
child: Center(
child: Text(
Strings.notAnyTickets,),
),
));
}
},
),
),
));
error:
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown building DefaultTextStyle(debugLabel:
((englishLike subhead 2014).merge(blackMountainView
subhead)).copyWith, inherit: false, color: Color(0xdd000000), family:
Roboto, size: 16.0, weight: 400, baseline: alphabetic, decoration:
TextDecoration.none, softWrap: wrapping at box width, overflow:
clip): Incorrect use of ParentDataWidget.
Flexible widgets must be
placed directly inside Flex widgets. Flexible(no depth, flex: 1,
dirty) has a Flex ancestor, but there are other widgets between them:
- _ListTile
- Padding(padding: EdgeInsets(16.0, 0.0, 16.0, 0.0))
- Semantics(container: false, properties: SemanticsProperties, selected: false, label: null, value: null, hint: null, hintOverrides:
null)
- Listener(listeners: [down], behavior: opaque)
- _GestureSemantics
- Listener(listeners: <none behavior: translucent)
- RepaintBoundary
- IndexedSemantics(index: 0)
- KeepAlive(keepAlive: false)
- SliverList(delegate: SliverChildBuilderDelegate#6802e(estimated child count: 19))
- SliverPadding(padding: EdgeInsets(0.0, 0.0, 0.0, 50.0))
- Viewport(axisDirection: down, anchor: 0.0, offset: ScrollPositionWithSingleContext#c95ba(offset:
0.0, range: null..null, viewport: 335.0, ScrollableState, AlwaysScrollableScrollPhysics - ClampingScrollPhysics,
IdleScrollActivity#05a39, ScrollDirection.idle))
- IgnorePointer-[GlobalKey#a3d1a](ignoring: false, ignoringSemantics: false)
- Semantics(container: false, properties: SemanticsProperties, label: null, value: null, hint: null, hintOverrides: null)
- Listener(listeners: [down], behavior: opaque)
- _GestureSemantics
- Listener(listeners: [signal], behavior: deferToChild)
- _ScrollSemantics-[GlobalKey#7cd1b]
- RepaintBoundary
- CustomPaint
- RepaintBoundary
- Expanded(flex: 1) These widgets cannot come between a Flexible and its Flex. The ownership chain for the parent of the offending
Flexible was: DefaultTextStyle ← AnimatedDefaultTextStyle ←
_ListTile ← MediaQuery ← Padding ← SafeArea ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector ← ⋯
Flexible Widgets must be the direct child of an Expanded or Flex Widget.
In your case, you are using Flexible as a part of a ListTile widget, which is not a suitable parent.
Flexible widgets must be placed directly inside Flex widgets.
Flexible has a Flex ancestor, but there are other widgets between them: - _ListTile
Flexible and Expanded can have row, column or flex as child, but not ListView related widgets.
If you still want the same feel of expanded properties in your widgets, use ConstrainedBox
Ex:
ConstrainedBox(
constraints: BoxConstraints(minHeight: 50, maxHeight: 500),
child: ListView.separated(...),
)
For me the issue was using Expanded as a parent widget. I have unknowingly added an Expanded as:
child: Expanded(
child: Row(
children: [
const SizedBox(
width: 15,
),
Expanded().....
])
)
Then I removed the first Expanded
child: Row(
children: [
const SizedBox(
width: 15,
),
Expanded().....
]
)
and prob solved!!!

Flutter ListView crashes inside column

I need some help figuring out how I can render the ListView.
I have been following along a Flutter tutorial and I have had to stop because I can't get around this issue.
From what I can understand the ListView tries to take up an infinite amount of space which obviously crashes the app.
I have also come to understand the you can't have a ListView as a direct child of a Column/Row (I explain what I have tried to do about that below)
https://flutter.io/docs/development/ui/layout/box-constraints#flex
Here's the code:
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
child: ProductControl(_addProduct),
),
ListView.builder(
itemCount: _products.length,
itemBuilder: (BuildContext context, int index) => Card(
child: Column(
children: <Widget>[
Image.asset('assets/food.jpg'),
Text(_products[index])
],
),
),
)
],
);
}
This is what is being said in the beginning of the stacktrace:
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during performResize():
flutter: Vertical viewport was given unbounded height.
flutter: Viewports expand in the scrolling direction to fill their
container.In this case, a vertical
flutter: viewport was given an unlimited amount of vertical space in
which to expand. This situation
flutter: typically happens when a scrollable widget is nested inside
another scrollable widget.
flutter: If this widget is always nested in a scrollable widget there
is no need to use a viewport because
flutter: there will always be enough vertical space for the children.
In this case, consider using a Column
flutter: instead. Otherwise, consider using the "shrinkWrap" property
(or a ShrinkWrappingViewport) to size
flutter: the height of the viewport to the sum of the heights of its children.
And this is taken from the bottom of the stacktrace:
flutter: The following RenderObject was being processed when the
exception was fired:
flutter: RenderViewport#cab62 NEEDS-LAYOUT NEEDS-PAINT
flutter: creator: Viewport ← _ScrollableScope ← IgnorePointer-
[GlobalKey#b71f9] ← Semantics ← Listener ←
flutter: _GestureSemantics ← RawGestureDetector-
[LabeledGlobalKey<RawGestureDetectorState>#d0420] ←
flutter: _ScrollSemantics-[GlobalKey#02b55] ← Scrollable ←
PrimaryScrollController ← ListView ← Column ← ⋯
flutter: parentData: <none> (can use size)
flutter: constraints: BoxConstraints(0.0<=w<=375.0, 0.0<=h<=Infinity)
flutter: size: MISSING
flutter: axisDirection: down
flutter: crossAxisDirection: right
flutter: offset: ScrollPositionWithSingleContext#892dc(offset: 0.0,
range: null..null, viewport: null,
flutter: ScrollableState, AlwaysScrollableScrollPhysics ->
BouncingScrollPhysics, IdleScrollActivity#9455f,
flutter: ScrollDirection.idle)
flutter: anchor: 0.0
flutter: This RenderObject had the following descendants (showing up to
depth 5):
flutter: RenderSliverPadding#c8ab3 NEEDS-LAYOUT NEEDS-PAINT
flutter: RenderSliverList#66f1b NEEDS-LAYOUT NEEDS-PAINT
I have tried to wrap the ListView.builder in an Expanded widget but that doesn't work for me. (Which is what is being done in the tutorial)
I tried to wrap the Column in an IntrinsicHeight Widget with no success.
The only way I manage to get around this issue is by wrapping the ListView.builder in a Container widget with a set height property. But having to use a Container with a set height does not seem right to me.
I can try to post the full code to recreate this if needed.
try using 'Expanded' instead of Container or other layouts:
Column(
children: <Widget>[
Expanded(
//color: Colors.white,
child:
ListView.builder(
itemCount: list.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
contentPadding: EdgeInsets.all(10.0),
title: new Text('title'),
subtitle: new Text('sub title'),
onTap: () => clicked(list[index]['url']),
onLongPress: () => downloadAndStoreFile(list[index]['url'],
list[index]['name'], list[index]['title']),
);
}),
)
],
),
Add this to ListView.Builder =
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
child: ProductControl(_addProduct),
),
ListView.builder(
physics: NeverScrollableScrollPhysics(), ///
shrinkWrap: true, ///
scrollDirection: Axis.vertical, ///
itemCount: _products.length,
itemBuilder: (BuildContext context, int index) => Card(
child: Column(
children: <Widget>[
Image.asset('assets/food.jpg'),
Text(_products[index])
],
),
),
)
],
);
}
I think I managed to solve this as a last minute effort right after posting the question.
Something I didn't show in my question was another piece of code.
Basically this is what my code looked like.
body: Column(
children: <Widget>[
Column(
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
child: ProductControl(_addProduct),
),
ListView.builder(
itemCount: _products.length,
itemBuilder: (BuildContext context, int index) => Card(
child: Column(
children: <Widget>[
Image.asset('assets/food.jpg'),
Text(_products[index])
],
),
),
)
],
),
],
),
The issue was that I had a Column with a Column as a direct child and apparently ListView does not like that.. So by removing the first Column I could then wrap my ListView in an Expanded widget and everything works. Maybe this can help someone else.
Both Column and ListView expands their size to maximum => Error
3 Solutions:
Wrap ListView with Expanded or Flexible
Column(
children: <Widget>[
Expanded(
child: ListView(),
)
],
)
Limit ListView height with Container or SizedBox
Column(
children: <Widget>[
Container(
height: 200,
child: ListView(),
)
],
)
My favorite solution: just add shrinkWrap and NeverScrollableScrollPhysics()
Column(
children: <Widget>[
ListView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
)
],
)

Flutter ListView.Builder() in scrollable Column with other widgets

I have a TabBarView() with an amount of different views. I want of them to be a Column with a TextField at top and a ListView.Builder() below, but both widgets should be in the same scrollable area (scrollview). The way I implemented it threw some errors:
#override
Widget build(BuildContext context) {
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
child: new TextField(
decoration: new InputDecoration(
hintText: "Type in here!"
),
)
),
new ListView.builder(
itemCount: _posts.length, itemBuilder: _postBuilder)
],
);
}
Error:
I/flutter (23520): The following assertion was thrown during performResize():
I/flutter (23520): Vertical viewport was given unbounded height.
I/flutter (23520): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter (23520): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter (23520): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (23520): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (23520): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter (23520): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter (23520): the height of the viewport to the sum of the heights of its children.
I read about stacking the ListView.builder() in an Expanded-Area but it made the textfield kind of "sticky" which is not what I want. :-)
I also came across CustomScrollView but didn't fully understand how to implement it.
Here is the solution:
SingleChildScrollView(
physics: ScrollPhysics(),
child: Column(
children: <Widget>[
Text('Hey'),
ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount:18,
itemBuilder: (context,index){
return Text('Some text');
})
],
),
),
Placing the ListView inside an Expanded widget should solve your problem:
#override
Widget build(BuildContext context) {
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
child: new TextField(
decoration: new InputDecoration(
hintText: "Type in here!"
),
)
),
new Expanded(child: ListView.builder(
itemCount: _posts.length, itemBuilder: _postBuilder))
],
);
}
Use SingleChildScrollView which allows the child widget to scroll
Solution
SingleChildScrollView(
child: Column(
children: <Widget>[
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
Two properties used here
shrinkWrap: true
only occupies the space it needs (it will still scroll when there more items).
physics: NeverScrollableScrollPhysics()
Scroll physics that does not allow the user to scroll. Means only Column+SingleChildScrollView Scrolling work.
Reason for the error:
Column expands to the maximum size in main axis direction (vertical axis), and so does the ListView
Solution
You need to constrain the height of the ListView, so that it does expand to match Column, there are several ways of solving this issue, I'm listing a few here:
If you want to allow ListView to take up all remaining space inside Column use Flexible.
Column(
children: <Widget>[
Flexible(
child: ListView(...),
)
],
)
If you want to limit your ListView to certain height, you can use SizedBox.
Column(
children: <Widget>[
SizedBox(
height: 200, // constrain height
child: ListView(),
)
],
)
If your ListView is small, you may try shrinkWrap property on it.
Column(
children: <Widget>[
ListView(
shrinkWrap: true, // use it
)
],
)
Use physics: NeverScrollableScrollPhysics() and shrinkWrap: true inside ListView.Builder() and enjoy
Here is an efficient solution:
class NestedListExample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: [
const SliverToBoxAdapter(
child: Text('Header'),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(ctx, index) {
return ListTile(title:Text('Item $index'));
},
),
),
],
);
}
}
Here is a preview on dartpad.
You can use a SliverToBoxAdapter for the other children as only Slivers can be a direct child of a CustomScrollView.
If all the list items are the same height, then you could use SliverFixedExtentList, which is more efficient because the height of each child isn't calculated on the fly, but you will have to know the exact pixel height. You could also use a SliverPrototypeExtentList, where you provide the first item in the list(the prototype), and all the other children will use the height of the prototype so you don't need to know the exact height in pixels.
Use Expanded widget to constrain without overflowing those pixels, :)
Column(
children: <Widget>[
Expanded(
child: ListView(),
),
Expanded(
child: ListView(),
),
],
)
just add
Column(
mainAxisSize: MainAxisSize.max, //Add this line onyour column
children:[
SomeWidget(),
Expanded(child:ListView.builder())
]
)
In my case with a future i did it like this:
SingleChildScrollView(
physics: ScrollPhysics(),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("Hey ho let's go!"),
Flexible(
child: FutureBuilder(
future: getData(),
builder: (BuildContext context,
AsyncSnapshot<List<Sale>> snapshot) {
if (snapshot.connectionState != ConnectionState.done ||
snapshot.hasData == null) {
return CircularProgressIndicator();
} else {
data = snapshot.data;
return ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return dataItemWidget(size, data[index], context);
},
itemCount: data.length,
);
}
},
),
),
],
),
),
//If you want Listview.builder inside ListView and want to scroll the parent ListView// //whenever the Items in ListView.builder ends or start you can do it like this
body: ListView(
physics: ScrollPhysics(),
children: [
SizedBox(height: 20),
Container( height: 110.0 *5, // *5 to give size to the container //according to items in the ListView.builder. Otherwise will give hasSize Error
child:ListView.builder(
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
itemCount: 5,
itemBuilder: (BuildContext context, int indexChild) {
return InkWell(child:Container(height:100));}))
),]),
The best way will be to make the column scrollable by making the column child of SingleChildScrollView and then assigning the same ScrollController to both the SingleChildScrollView and the ListView.builder. This will make the text field and the below ListView as scrollable.
Just add physics: NeverScrollableScrollPhysics() in ListView.builder() so you can scroll
Add physics: NeverScrollableScrollPhysics() inside Listview.builder() method and the nested Listview will scroll
Column is not scrollable, which is why the TextField on top wouldn't scroll but the ListView on the bottom would.
The best way to solve this in my opinion is to make your TextField the first item in your ListView.
So you won't need a column, your parent widget is the ListView, and its children are the TextField followed by the remaining items you build with _postBuilder.
return Column(
children: [
Text("Popular Category"),
Expanded(
child: ListView.builder(`enter code here`
shrinkWrap: false,
scrollDirection: Axis.horizontal,
itemCount: 3,
itemBuilder: (context, index) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("hello"),
],
);
}),
),
],
);
body: SingleChildScrollView(
physics: ScrollPhysics(),
child: Column(
children: [
getFiltersOnHomePage(),
SizedBox(
child: StreamBuilder(
stream: FirebaseFirestore.instance.collection('posts').snapshots(),
builder: (context,
AsyncSnapshot<QuerySnapshot<Map<String, dynamic>>> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);
}
return ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: snapshot.data!.docs.length,
itemBuilder: (ctx, index) => Container(
margin: EdgeInsets.symmetric(
horizontal: width > webScreenSize ? width * 0.3 : 0,
vertical: width > webScreenSize ? 15 : 0,
),
child: PostCard(
snap: snapshot.data!.docs[index].data(),
),
));
},
),
),
],
),
),[enter image description here][1]***You will be able to scroll through the page by using Expanded Widget
Blockquote
Using this you can scroll over the entire page. This page includes a row and a listview builder inside a scrollable column.
In my case, I added a Container with transparent color and height up to 270 to solve this one.
Column(
children: <Widget>[
ListView(
shrinkWrap: true, // use it
),
Container(
color: Colors.transparent,
height: 270.0,
),
],
)