Flutter中如何解决'Incorrect use of ParentDataWidget'错误？

我在Flutter应用中使用ElevatedButton触发底部弹窗，点击按钮时调用UtilsUtils.bottomSheet(widget.context, widget.content)，但出现了**Exception caught by widgets library.Incorrect use of ParentDataWidget.**错误。以下是bottomSheet方法的实现代码：

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,
                ),
              ),
            ),
          ],
        );
        }));
  }

错误原因 #

该错误由DraggableScrollableSheet直接作为Stack的子组件导致。DraggableScrollableSheet内部会生成带有特殊ParentData的组件，而Stack无法正确解析这种ParentData，因此触发了"Incorrect use of ParentDataWidget"错误。另外原代码还存在两处语法错误：isScrollControlled: true后面多了一个点，IconButton的onPressed参数前多了逗号，这些也需要修复才能正常运行。

解决方法 #

方法一：给DraggableScrollableSheet添加容器包裹 #

在DraggableScrollableSheet外层包裹Container或SizedBox，让Stack能正确识别子组件的布局约束：

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: [
          // 外层添加Container包裹
          Container(
            width: double.infinity,
            height: MediaQuery.of(context).size.height,
            child: 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,
              ),
            ),
          ),
        ],
      );
    }));
}

方法二：调整布局结构，移除Stack #

将顶部的拖拽指示器放到DraggableScrollableSheet的内容内部，无需使用Stack，这种方式更符合Flutter的布局规范：

static bottomSheet(BuildContext context, String content) {
  return showModalBottomSheet(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(20))
    ),
    isScrollControlled: true,
    context: context,
    builder: ((context) {
      return DraggableScrollableSheet(
        expand: false,
        initialChildSize: 0.4,
        maxChildSize: 0.8,
        minChildSize: 0.3,
        builder: (context, scrollController) {
          return SingleChildScrollView(
            controller: scrollController,
            child: Container(
              padding: EdgeInsets.only(top: 30, left:15, right:15, bottom:15),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  // 将拖拽指示器放在内容最顶部
                  Container(
                    width: 60,
                    height: 7,
                    decoration: BoxDecoration(
                      color: Colors.grey[300],
                      borderRadius: BorderRadius.circular(4),
                    ),
                  ),
                  SizedBox(height: 15),
                  Align(
                    alignment: Alignment.topRight,
                    child: IconButton(
                      onPressed: (){},
                      icon: Icon(
                        Icons.edit,
                        color: Colors.blue,
                      ),
                    ),
                  ),
                  Text(
                    content,
                    style: TextStyle(fontSize: 18),
                  ),
                ],
              ),
            ),
          );
        },
      );
    }));
}

内容的提问来源于stack exchange，提问作者Berke