Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Incorrect use of ParentDataWidget. - How to fix it?

Tags:

flutter

I am getting Error Incorrect use of ParentDataWidget.

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:testapp/constants.dart';
import 'package:testapp/request/quotation_resources.dart';
import 'dart:math';

class AuctionDetails extends StatelessWidget {
  final QuotationResources quotationResources;

  const AuctionDetails({Key key, this.quotationResources}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kPrimaryColor,
      appBar: buildAppBar,
      body: BodyAuction(),
    );
  }

  AppBar get buildAppBar {
    return AppBar(
      backgroundColor: kBackgroundColor,
      elevation: 0,
      leading: Padding(
        padding: EdgeInsets.only(left: kDefaultPadding),
        child:
            IconButton(icon: Icon(FontAwesomeIcons.backward), onPressed: () {}),
      ),
    );
  }
}

class BodyAuction extends StatelessWidget {
  final QuotationResources quotationResources;

  const BodyAuction({Key key, this.quotationResources}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    var cardAspectRatio = 10.0 / 14.0;
    var widgetAspectRatio = cardAspectRatio * 1.2;
    return Column(
      children: <Widget>[
        Container(
          padding: EdgeInsets.symmetric(horizontal: kDefaultPadding),
          decoration: BoxDecoration(
            color: kBackgroundColor,
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(50),
              bottomRight: Radius.circular(50),
            ),
          ),
          child: Column(
            children: <Widget>[
              Container(
                margin: EdgeInsets.symmetric(vertical: kDefaultPadding),
                height: size.width * 0.8,
                child: CardSlider(),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

class CardSlider extends StatefulWidget {
  @override
  _CardSliderState createState() => _CardSliderState();
}

var cardAspectRatio = 10.0 / 14.0;
var widgetAspectRatio = cardAspectRatio * 1.2;

class _CardSliderState extends State<CardSlider> {
  var currentPage = images.length - 1.0;
  @override
  Widget build(BuildContext context) {
    PageController controller = PageController(initialPage: images.length - 1);
    controller.addListener(() {
      setState(() {
        currentPage = controller.page;
      });
    });
    return Column(
      children: <Widget>[
        CardScrollWidget(currentPage),
        Positioned.fill(
          child: PageView.builder(
            itemCount: images.length,
            controller: controller,
            reverse: true,
            itemBuilder: (context, index) {
              return Container();
            },
          ),
        )
      ],
    );
  }
}

class CardScrollWidget extends StatelessWidget {
  var currentPage;
  var padding = 20.0;
  var verticalInset = 20.0;

  CardScrollWidget(this.currentPage);

  @override
  Widget build(BuildContext context) {
    return new AspectRatio(
      aspectRatio: widgetAspectRatio,
      child: LayoutBuilder(builder: (context, contraints) {
        var width = contraints.maxWidth;
        var height = contraints.maxHeight;

        var safeWidth = width - 2 * padding;
        var safeHeight = height - 2 * padding;

        var heightOfPrimaryCard = safeHeight;
        var widthOfPrimaryCard = heightOfPrimaryCard * cardAspectRatio;

        var primaryCardLeft = safeWidth - widthOfPrimaryCard;
        var horizontalInset = primaryCardLeft / 2;

        List<Widget> cardList = new List();

        for (var i = 0; i < images.length; i++) {
          var delta = i - currentPage;
          bool isOnRight = delta > 0;

          var start = padding +
              max(
                  primaryCardLeft -
                      horizontalInset * -delta * (isOnRight ? 15 : 1),
                  0.0);

          var cardItem = Positioned.directional(
            top: padding + verticalInset * max(-delta, 0.0),
            bottom: padding + verticalInset * max(-delta, 0.0),
            start: start,
            textDirection: TextDirection.rtl,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16.0),
              child: Container(
                decoration: BoxDecoration(color: Colors.white, boxShadow: [
                  BoxShadow(
                      color: Colors.black12,
                      offset: Offset(3.0, 6.0),
                      blurRadius: 10.0)
                ]),
                child: AspectRatio(
                  aspectRatio: cardAspectRatio,
                  child: Stack(
                    fit: StackFit.expand,
                    children: <Widget>[
                      Image.asset(images[i], fit: BoxFit.cover),
                      Align(
                        alignment: Alignment.bottomLeft,
                      )
                    ],
                  ),
                ),
              ),
            ),
          );
          cardList.add(cardItem);
        }
        return Stack(
          children: cardList,
        );
      }),
    );
  }
}

Error Codes are

The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.

The ParentDataWidget Positioned(left: 0.0, top: 0.0, right: 0.0, bottom: 0.0) wants to apply ParentData of type StackParentData to a RenderObject, which has been set up to accept ParentData of incompatible type FlexParentData.

Usually, this means that the Positioned widget has the wrong ancestor RenderObjectWidget. Typically, Positioned widgets are placed directly inside Stack widgets.
The offending Positioned is currently placed inside a Column widget.

The ownership chain for the RenderObject that received the incompatible parent data was:
  _ScrollSemantics-[GlobalKey#8af92] ← Scrollable ← NotificationListener<ScrollNotification> ← PageView ← Positioned ← Column ← CardSlider ← ConstrainedBox ← Padding ← Container ← ⋯
When the exception was thrown, this was the stack: 
#0      RenderObjectElement._updateParentData.<anonymous closure> (package:flutter/src/widgets/framework.dart:5645:11)
#1      RenderObjectElement._updateParentData (package:flutter/src/widgets/framework.dart:5661:6)
#2      RenderObjectElement.attachRenderObject (package:flutter/src/widgets/framework.dart:5682:7)
#3      RenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5376:5)
#4      SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5829:11)
...
like image 696
MGR DR Avatar asked Jun 28 '20 14:06

MGR DR


People also ask

How do you fix incorrect use of Parentdatawidget in flutter?

This error means that you can only place an Expanded Widget inside Flex Widget. For example, below code will throw this kind of error. The fix for this above issue, is to move the expanded widget inside a flex widget.

What is incorrect use of Parentdatawidget?

This error occurs when the parent widget has an infinite container and the child widget has infinite width or height.

What is the difference between expanded and flexible widgets?

Flexible is a built-in widget in flutter which controls how a child of base flex widgets that are Row, Column, and Flex will fill the space available to it. The Expanded widget in flutter is shorthand of Flexible with the default fit of FlexFit.

What is positioned widget in flutter?

Positioned is a widget that comes built-in with flutter SDK. Positioned does exactly what it sounds like, which is it arbitrarily positioned widgets on top of each other. It is usually used to position child widgets in Stack widget or similar. It only works for Stateless and Stateful widgets.


1 Answers

The error code already show whats wrong. "Positioned widgets are placed directly inside Stack widgets. The offending Positioned is currently placed inside a Column widget." You have to place Positioned Widget inside Stacks. You cant place them inside a Column.

Column(
      children: <Widget>[
        CardScrollWidget(currentPage),
        Positioned.fill(
          child: PageView.builder(
            itemCount: images.length,
            controller: controller,
            reverse: true,
            itemBuilder: (context, index) {
              return Container();
            },
          ),
        )
      ],
    );

Just replace Column with Stack or dont use Positioned.fill.

like image 86
Quasi Avatar answered Oct 04 '22 23:10

Quasi