How to solve 'Incorrect use of ParentDataWidget error' in Flutter

Berke
March 27, 2023
136 views
0 votes
2 Answers

In my app I created an Elevated Button to pop up a bottom sheet. In onpressed I used:

UtilsUtils.bottomSheet(widget.context, widget.content)

But when I pressed this button I get ‘Exception caught by widgets library.Incorrect use of ParentDataWidget.’ the error.

static bottomSheet(
      BuildContext context, String content,
      ) {
    return showModalBottomSheet(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
        isScrollControlled: true .
        ,
        context: context,
        builder: ((context) {
         return Stack(
          alignment: Alignment.topCenter,
          clipBehavior: Clip.none,
          children: [
            DraggableScrollableSheet(
              expand: false,
              initialChildSize: 0.4,
              maxChildSize: 0.8,
              minChildSize: 0.3,
              builder: (context, scrollController) {
                return SingleChildScrollView(
                  controller: scrollController,
                  child: Container(
                    padding: EdgeInsets.all(15),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Align(
                          alignment: Alignment.topRight,
                          child: IconButton(
                            onPressed: ,(){}
                            icon: Icon(
                              Icons.edit,
                              color: Colors.blue,
                            ),
                          ),
                        ),
                        Text(
                          content,
                          style: TextStyle(fontSize: 18),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
            Positioned(
              top: -15,
              child: Container(
                width: 60,
                height: 7,
                decoration: BoxDecoration(
                  color: Colors.white,
                ),
              ),
            ),
          ],
        );
        }));
  }

So how can I solve this error? Because of which widget the error occurs?

Tags: flutter widget

Answers

My Friend this error happens because of your positioning of the Positioned widget inside the Stack. you just provided top but not right, left or bottom that is making error.

EDIT: here is completed code that is working fine for me:

import 'package:flutter/material.dart';

void main() {
 
  runApp(const MyScreen(
  ));

}

class MyScreen extends StatefulWidget {
  const MyScreen({Key key}) : super(key: key);

  @override
  State<MyScreen> createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Builder(
              builder: (context) => InkWell(
                onTap: () {
                  bottomSheet(context, 'hello');
                },
                child: const Text('hello'),
              ),
            ),
          ),
        ),
      ),
    );
  }

  bottomSheet(BuildContext context, String content) {
    return showModalBottomSheet(
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      isScrollControlled: true,
      context: context,
      builder: ((context) {
        return Stack(
          alignment: Alignment.topCenter,
          clipBehavior: Clip.none,
          children: [
            DraggableScrollableSheet(
              expand: false,
              initialChildSize: 0.4,
              maxChildSize: 0.8,
              minChildSize: 0.3,
              builder: (context, scrollController) {
                return SingleChildScrollView(
                  controller: scrollController,
                  child: Container(
                    padding: const EdgeInsets.all(15),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Align(
                          alignment: Alignment.topRight,
                          child: IconButton(
                            onPressed: () {},
                            icon: const Icon(
                              Icons.edit,
                              color: Colors.blue,
                            ),
                          ),
                        ),
                        Text(
                          content,
                          style: const TextStyle(fontSize: 18),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
            Positioned(
              top: -15,
              left: 0, // Add this line
              right: 0, // Add this line
              child: Container(
                width: 60,
                height: 7,
                decoration: const BoxDecoration(
                  color: Colors.white,
                ),
              ),
            ),
          ],
        );
      }),
    );
  }
}

this code is the update of your code to solve your problem.

happy coding…

I think the issue might be with the Stack widget that you are using as the parent widget. The Stack widget requires its children to have constraints set on them so that it can position them correctly. The SingleChildScrollView widget that you are using as a child widget of the DraggableScrollableSheet does not have any constraints set on it, so the Stack widget cannot position it correctly.

A possible fix would be by adding a SizedBox widget as a child of the SingleChildScrollView widget and set its height to a fixed value or use a widget that can set its constraints properly, such as the Expanded widget.

Here’s the code:

static bottomSheet(BuildContext context, String content) {
  return showModalBottomSheet(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
    isScrollControlled: true,
    context: context,
    builder: ((context) {
      return Stack(
        alignment: Alignment.topCenter,
        clipBehavior: Clip.none,
        children: [
          DraggableScrollableSheet(
            expand: false,
            initialChildSize: 0.4,
            maxChildSize: 0.8,
            minChildSize: 0.3,
            builder: (context, scrollController) {
              return Container(
                padding: EdgeInsets.all(15),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Align(
                      alignment: Alignment.topRight,
                      child: IconButton(
                        onPressed: () {},
                        icon: Icon(
                          Icons.edit,
                          color: Colors.blue,
                        ),
                      ),
                    ),
                    Expanded(
                      child: SingleChildScrollView(
                        controller: scrollController,
                        child: SizedBox(
                          height: MediaQuery.of(context).size.height,
                          child: Text(
                            content,
                            style: TextStyle(fontSize: 18),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
          Positioned(
            top: -15,
            child: Container(
              width: 60,
              height: 7,
              decoration: BoxDecoration(
                color: Colors.white,
              ),
            ),
          ),
        ],
      );
    }),
  );
}

Hope this helps.

Please signup or login to give your own answer.

Click here to cancel reply.