Flutter - Incorrect use of ParentDataWidget - flutter

Since I introduced a PageView widget, I get this error:
════════ Exception caught by widgets library ═══════════════════════════════════ 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 ParentData.
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 RepaintBoundary widget.
The ownership chain for the RenderObject that received the incompatible parent data was: Padding ← Container ← AnimatedContainer-[LabeledGlobalKey<ImplicitlyAnimatedWidgetState<ImplicitlyAnimatedWidget>>#758ef] ← KeyboardAvoider ← Expanded ← VpFormContainer ← LoggedOutNickNamePage ← RepaintBoundary ← IndexedSemantics ← NotificationListener<KeepAliveNotification> ← ⋯ When the exception was thrown, this was the stack
#0 RenderObjectElement._updateParentData.<anonymous closure> package:flutter/…/widgets/framework.dart:5770
#1 RenderObjectElement._updateParentData package:flutter/…/widgets/framework.dart:5786
#2 RenderObjectElement.attachRenderObject package:flutter/…/widgets/framework.dart:5808
#3 RenderObjectElement.mount package:flutter/…/widgets/framework.dart:5501
#4 SingleChildRenderObjectElement.mount package:flutter/…/widgets/framework.dart:6117 ...
════════ Exception caught by widgets library ═══════════════════════════════════ 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 ParentData.
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 RepaintBoundary widget.
The ownership chain for the RenderObject that received the incompatible parent data was: Padding ← Container ← AnimatedContainer-[LabeledGlobalKey<ImplicitlyAnimatedWidgetState<ImplicitlyAnimatedWidget>>#758ef] ← KeyboardAvoider ← Expanded ← VpFormContainer ← LoggedOutNickNamePage ← RepaintBoundary ← IndexedSemantics ← NotificationListener<KeepAliveNotification> ← ⋯ When the exception was thrown, this was the stack
#0 RenderObjectElement._updateParentData.<anonymous closure> package:flutter/…/widgets/framework.dart:5770
#1 RenderObjectElement._updateParentData package:flutter/…/widgets/framework.dart:5786
#2 RenderObjectElement.attachRenderObject package:flutter/…/widgets/framework.dart:5808
#3 RenderObjectElement.mount package:flutter/…/widgets/framework.dart:5501
#4 SingleChildRenderObjectElement.mount package:flutter/…/widgets/framework.dart:6117 ...
I have been trying fixes for the last couple of hours, but nothing is working. Does anyone know exactly where to apply a fix and what is the fix?
Here is the PageView:
class LoggedOutPageView extends StatelessWidget {
final _controller = PageController(
initialPage: 0,
);
#override
Widget build(BuildContext context) {
print('building loggedOutPageView');
final pageView = PageView(
physics: const NeverScrollableScrollPhysics(),
controller: _controller,
clipBehavior: Clip.none,
children: [
LoggedOutNickNamePage(_controller),
LoggedOutEmailPage(_controller),
LoggedOutPasswordPage(),
],
);
final _pageContent = Expanded(
child: Container(child: pageView, color: Colors.transparent), flex: 1);
final _pageIndicator = Container(
height: 50,
child: SmoothPageIndicator(
controller: _controller,
count: 3,
effect: const JumpingDotEffect(),
),
color: Colors.transparent);
return VpFormPageScaffold([
VpLogoHeader(
onPressed: () {
print(_controller.page);
if (_controller.page > 0) {
_controller.previousPage(
duration: const Duration(milliseconds: 800),
curve: Curves.easeInOutCubic);
} else {
Navigator.pop(context);
}
},
pop: false),
_pageContent,
_pageIndicator
]);
}
}
VpFormPageScaffold:
class VpFormPageScaffold extends StatelessWidget {
VpFormPageScaffold(this.children);
List<Widget> children;
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: ConstrainedBox(
constraints: BoxConstraints.tightFor(
height: MediaQuery.of(context).size.height),
child: VpGradientContainer(
beginColor: initialGradientColor,
endColor: endGradientColor,
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: children)))));
}
}
VpGradientContainer:
class VpGradientContainer extends StatelessWidget {
const VpGradientContainer({this.child, this.beginColor, this.endColor});
final Widget child;
final Color beginColor;
final Color endColor;
#override
Widget build(BuildContext context) {
return Container(
child: child,
height: double.infinity,
width: double.infinity,
padding: const EdgeInsets.all(40),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [beginColor, endColor],
),
),
);
}
}

Expanded widgets must be placed inside Flex widgets. You are using Expanded widget where it cannot be used. You'll have to remove Expanded widget from here :
final _pageContent = Expanded(
child: Container(child: pageView, color: Colors.transparent), flex: 1);
Please checkout Flutter docs for Expanded Widget:
Expanded
A widget that expands a child of a Row, Column, or Flex
so that the child fills the available space.
Using an Expanded widget makes a child of a Row, Column, or Flex
expand to fill the available space along the main axis (e.g.,
horizontally for a Row or vertically for a Column). If multiple
children are expanded, the available space is divided among them
according to the flex factor.
An Expanded widget must be a descendant of a Row, Column, or Flex, and
the path from the Expanded widget to its enclosing Row, Column, or
Flex must contain only StatelessWidgets or StatefulWidgets (not other
kinds of widgets, like RenderObjectWidgets).

Related

Flutter image asset not working another page

In my app i have banners in multiple pages,
all my banners image source is same, all same widget only difference is parent widget.
Working on emulator but not working on real device
My Home Page, only difference is working banners are in Row (in all other pages, if its not in row not working)
Column(
children: [
AspectRatio(aspectRatio: 16 / 9, child: HomePageBanner()),
scrollingItems(),
AspectRatio(
aspectRatio: 16 / 6,
child: Row(
children: [
HomePageBanner(),
HomePageBanner(),
],
),
),
scrollingItems2(),
AspectRatio(
aspectRatio: 16 / 6,
child: Row(
children: [
HomePageBanner(),
HomePageBanner(),
],
),
),
],
),
HomePageBanner
Expanded(
child: PageView.builder(
onPageChanged: (value) {
_currentPageBanner = value;
},
itemCount: participants.length,
controller: pageController,
itemBuilder: ((context, index) {
return GestureDetector(
onTap: () {
_launchURL(url: participants[index].url);
},
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 5),
margin: const MarginConstant.all(),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color:
ColorConstants.instance.kPrimaryColor.withOpacity(.3),
blurRadius: 5,
spreadRadius: 1),
],
borderRadius: const RadiusConstant.all(),
color: Colors.white,
),
child: ClipRRect(
borderRadius: const RadiusConstant.all(),
child: Image.asset(
participants[index].imageAsset,
fit: BoxFit.contain,
),
),
),
);
}),
),
);
Exception
════════ Exception caught by widgets library ═══════════════════════════════════
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 ParentData.
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 AspectRatio widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
RepaintBoundary ← NotificationListener<ScrollNotification> ← GlowingOverscrollIndicator ← Scrollable ← NotificationListener<ScrollNotification> ← PageView ← Expanded ← HomePageBanner ← AspectRatio ← Column ← ⋯
When the exception was thrown, this was the stack
════════ Exception caught by widgets library ═══════════════════════════════════
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 ParentData.
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 AspectRatio widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
RepaintBoundary ← NotificationListener<ScrollNotification> ← GlowingOverscrollIndicator ← Scrollable ← NotificationListener<ScrollNotification> ← PageView ← Expanded ← HomePageBanner ← AspectRatio ← Column ← ⋯
When the exception was thrown, this was the stack
As the third paragraph sait The offending Expanded is currently placed inside a AspectRatio widget. I used as HomePageBanner wrapped with expanded and wrapped it with aspectratio. Correct usage is wrapped pagebuilder with AspectRatio and its done, for horizontal banners just wrapped my HomePageBanner with Expanded.
Correct Usage
AspectRatio(
aspectRatio: widget.aspectRatio,
child: PageView.builder(
onPageChanged: (value) {
_currentPageBanner = value;
},
Correct Home Page
Column(
children: [
HomePageBanner(),
scrollingItems(),
Row(
children: [
Expanded(child: HomePageBanner()),
Expanded(child: HomePageBanner()),
],
),
scrollingItems2(),
Row(
children: [
Expanded(child: HomePageBanner()),
Expanded(child: HomePageBanner()),
],
),
],
),
One cause for Grey area in release mode is,
ignore warning note during debug mode when using Expended widget
Make sure to use Expended widget in proper way means, within column and row widget

The ownership chain for the RenderObject that received the incompatible parent data in Flutter

An error occurred saying Incorrect use of ParentDataWidget when I use the Expanded widget as follows,
What I did do wrong here?
As well, what is the ownership chain meaning?
Code is as follows,
Expanded(
child: Wrap(
alignment: WrapAlignment.spaceAround,
children: <Widget>[
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
verticalDirection: VerticalDirection.down,
children: <Widget>[
Text(
"${Constants.ASSIGNMENT_PREFIX} ${assignment?.id}",
style: Theme.of(context)
.textTheme
.headline6),
_getAssignState(
assignment?.status),
],
),
),
],
),
)
Full Error as follows,
======== Exception caught by widgets library =======================================================
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 WrapParentData.
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 Wrap widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
Row ← Expanded ← Wrap ← Expanded ← Row ← Padding ← Padding ← DecoratedBox ← Container ← Listener ← ⋯
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 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6228:11)
...
====================================================================================================
Reloaded 1 of 2005 libraries in 1,286ms.
you can only use Expanded as a child of Column and Row or FLex widget.
Expanded: A widget that expands a child of a Row, Column, or Flex so
that the child fills the available space.
child: Wrap(
alignment: WrapAlignment.spaceAround,
children: <Widget>[
// Expanded( => remove this
Row()

Flutter: background color for children of Column

I can't seem to wrap my head around the myriad of layout widgets Flutter throws at me. I'm trying to create the simple widget that displays a Column with three children: a spacer with red background, an Image and another spacer with a blue background. The Image should be centered on the screen vertically, with the first and the third child sharing the space equally. I managed to achieve the layout but have no idea how to set the background colors. Here's what I got:
Column(
children: [
Spacer(flex: 1),
Image(
image: AssetImage("assets/colorPicker.jpeg"),
),
Spacer(flex: 1),
],
)
I tried wrapping the Spacers with Containers with the appropriate color attribute, but I get an exception:
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
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 ParentData.
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 ColoredBox widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
SizedBox.shrink ← Expanded ← Spacer ← ColoredBox ← Container ← Column ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← ⋯
This doesn't tell me anything useful.
You can use a Flexible widget with a flex:1 and a child Container with color of your choice. Please see code below :
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: [
Flexible(flex: 1, child:Container(color:Colors.red)),
Image(
image: NetworkImage("https://picsum.photos/350/200"),
),
Flexible(flex: 1, child:Container(color:Colors.blue)),
],
);
}
}
You should wrap whichever column or row that has an Expanded child with another Expanded.
Expanded(child: Column(
children: [
Spacer(flex: 1),
Image(
image: AssetImage("assets/colorPicker.jpeg"),
),
Spacer(flex: 1),
],
))

Renderflex overflowed at bottom

I am trying to do animation where the HomePageTop widget shrinks whenever i scroll the listview and
the offset of listview is greater than > 100.
The animation works but just at the end of the animation renderflex overflowed error is being shown.
class HomePageView extends StatefulWidget {
#override
_HomePageViewState createState() => _HomePageViewState();
}
class _HomePageViewState extends State<HomePageView> {
ScrollController scrollController = ScrollController();
bool closeTopContainer = false;
#override
void initState() {
super.initState();
scrollController.addListener(() {
setState(() {
closeTopContainer = scrollController.offset > 100;
});
});
}
#override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Color.fromRGBO(235, 236, 240, 1),
body: Container(
height: size.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AnimatedContainer(
color: Colors.redAccent,
width: size.width,
duration: const Duration(milliseconds: 200),
height: closeTopContainer ? 0 : size.width * .33,
child: HomePageTop(
size: size,
)),
Expanded(
child: ListView(
controller: scrollcontroller),
],
),
),
);
}
}
Here the size of animated container is being controlled by listview scroll controller.
whenever i scroll down this error is being given
Error
The following assertion was thrown during layout:
A RenderFlex overflowed by 5.4 pixels on the bottom.
The relevant error-causing widget was:
Column file:///D:/flutter/app/app/lib/views/Widgets/widgets.dart:94:12
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
The specific RenderFlex in question is: RenderFlex#a37e0 OVERFLOWING:
needs compositing
creator: Column ← HomePageTop ← DecoratedBox ← ConstrainedBox ← Container ← AnimatedContainer ← Flex
← ConstrainedBox ← Container ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← ⋯
parentData: <none> (can use size)
constraints: BoxConstraints(w=470.2, h=49.6)
size: Size(470.2, 49.6)
direction: vertical
mainAxisAlignment: start
mainAxisSize: min
crossAxisAlignment: center
verticalDirection: down
My HomePageTop widget
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(
height: 55,
),
Expanded(
child: Stack(children: [
Positioned(right: 20, child: FittedBox(fit:BoxFit.fill,child: LogoutButton())),
Positioned(
top: 50,
child: Container(
alignment: Alignment.topCenter,
padding: EdgeInsets.all(20),
width: size.width,
child: searchField())),
]),
),
],
);
}
Wrapping the animated container with expanded removes the error but the animation where size decreases does not occur.
searchField() is a text field.Wrapping it in a fitted box also gives an error.
Any help is appreciated.Thanks in advance
It is because the SizedBox inside HomePageTop widget has a fixed height. If you remove it the error does not appear, you don't need it anyway.

Flutter: Clip a Column or Row to prevent overflow

I have a layout structure in Flutter like this:
Inkwell
Card
ScopedModelDescendant
Column
Container[]
The number of containers in the column is variable.
The goal is that it should look like this:
But instead, it ends up doing this:
I've tried adding a clipBehavior property to the Card, and I've tried mixing in ClipRects anywhere in the structure, but nothing seems to work. My best guess is that a ClipRect above the Column doesn't help because the overflow happens within the column.
This is the error I'm getting:
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following message was thrown during layout:
flutter: A RenderFlex overflowed by 15 pixels on the bottom.
flutter:
flutter: The overflowing RenderFlex has an orientation of Axis.vertical.
flutter: The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
flutter: black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
flutter: Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
flutter: RenderFlex to fit within the available space instead of being sized to their natural size.
flutter: This is considered an error condition because it indicates that there is content that cannot be
flutter: seen. If the content is legitimately bigger than the available space, consider clipping it with a
flutter: ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
flutter: like a ListView.
flutter: The specific RenderFlex in question is:
flutter: RenderFlex#094c9 OVERFLOWING
flutter: creator: Column ← ScopedModelDescendant<EventModel> ← Semantics ← DefaultTextStyle ←
flutter: AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#5fe8b ink renderer] ←
flutter: NotificationListener<LayoutChangedNotification> ← CustomPaint ← _ShapeBorderPaint ← PhysicalShape
flutter: ← _MaterialInterior ← Material ← ⋯
flutter: parentData: <none> (can use size)
flutter: constraints: BoxConstraints(w=56.0, h=104.3)
flutter: size: Size(56.0, 104.3)
flutter: direction: vertical
flutter: mainAxisAlignment: start
flutter: mainAxisSize: max
flutter: crossAxisAlignment: stretch
flutter: verticalDirection: down
flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
Wrap widget solves your problem. If there is not enough space to fit the child in a Column or Row, you can use Wrap. You can use alignment, directionality and spacing properties to customize it.
Here is the simple example:
class WrapExample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SizedBox(
width: 200,
height: 180,
child: Card(
clipBehavior: Clip.antiAlias,
child: Wrap(
direction: Axis.horizontal,
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: <Widget>[
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900, child: Text('AH')),
label: Text('Hamilton'),
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900, child: Text('ML')),
label: Text('Lafayette'),
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900, child: Text('HM')),
label: Text('Mulligan'),
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900, child: Text('JL')),
label: Text('Laurens'),
),
],
),
),
);
}
}
And here is the output:
You can also just wrap the widget you want to allow overflowing in a Positioned inside a Stack widget and set the the Positioned parameter top: 0.
Works like charm for me