如何在 Flutter 中圆化此面板的边缘？答案

【问题标题】：How do I round the edges of this panel in Flutter?如何在 Flutter 中圆化此面板的边缘？
【发布时间】：2020-04-14 14:45:48
【问题描述】：

我正在使用https://pub.dev/packages/flutter_sliding_up_panel 依赖项，我想将下面面板的边缘变圆。这是我正在使用的代码

 SlidingUpPanelWidget(
      child: Column(
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(35.0),
              topRight: Radius.circular(35.0),
            ),
            child: Container(
              color: Colors.red,
              alignment: Alignment.center,
              child: Row(
                children: <Widget>[
                  Icon(
                    Icons.menu,
                    size: 30,
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      left: 8.0,
                    ),
                  ),
                  Text(
                    'click or drag',
                  )
                ],
                mainAxisAlignment: MainAxisAlignment.center,
              ),
              height: 50.0,
            ),
          ),
          Divider(
            height: 0.5,
            color: Colors.grey,
          ),
          Flexible(
            child: Container(
              child: ListView.separated(
                controller: scrollController,
                physics: ClampingScrollPhysics(),
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('list item $index'),
                  );
                },
                separatorBuilder: (context, index) {
                  return Divider(
                    height: 0.5,
                  );
                },
                shrinkWrap: true,
                itemCount: 20,
              ),
              color: Colors.white,
            ),
          ),
        ],
        mainAxisSize: MainAxisSize.min,
      ),
      controlHeight: 50.0,
      anchor: 0.4,
      panelController: panelController,
    ),

这就是折叠面板当前的样子：

我希望整个面板像红色容器一样圆润。

【问题讨论】：

标签： user-interface flutter dart

【解决方案1】：

你做不到。该库在您提供的小部件周围有一个硬编码的 Material 小部件。

您唯一能做的就是复制整个库并对其进行修改。这是一个小型库，只有一个文件需要复制。

在库的第 192 行，您有以下代码：

child: Material(
                key: _childKey,
                color: Theme.of(context).backgroundColor,
                elevation: widget.elevation,
                child: SizedBox(
                  height: MediaQuery.of(context).size.height,
                  child: widget.child,
                ),
              ),

修改如下：

child: Material(
                key: _childKey,
                color: Colors.transparent,
                shadowColor: Colors.transparent,
                elevation: widget.elevation,
                child: SizedBox(
                  height: MediaQuery.of(context).size.height,
                  child: widget.child,
                ),
              ),

【讨论】：