Flutter 如何实现仅单侧带圆角的Sliding up Panel上滑面板

方案1：使用sliding_up_panel第三方库实现（最简方案） #

• 第一步：在pubspec.yaml中添加依赖

dependencies:
  flutter:
    sdk: flutter
  sliding_up_panel: ^2.0.0+1

• 第二步：编写核心代码，重点通过borderRadius属性仅设置面板顶部圆角，实现单侧圆角效果

import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

class CustomSlidingPanel extends StatelessWidget {
  const CustomSlidingPanel({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SlidingUpPanel(
        // 面板收起时的高度，可自定义调整
        minHeight: 100,
        // 面板展开时的最大高度，可自定义调整
        maxHeight: MediaQuery.of(context).size.height * 0.85,
        // 核心配置：仅设置顶部两个角的圆角
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(28),
          topRight: Radius.circular(28),
        ),
        // 上滑面板的内容区域
        panel: const Center(
          child: Text("上滑面板内容区域"),
        ),
        // 底层页面的内容区域
        body: const Center(
          child: Text("底层主页面内容区域"),
        ),
      ),
    );
  }
}

• 调整说明：如果需要实现仅单个角的圆角效果（如仅左上圆角），只需保留BorderRadius.only中对应的参数即可；修改Radius.circular的数值即可调整圆角大小。

方案2：使用Flutter原生组件实现（无第三方依赖） #

如果不想引入外部依赖，可以用DraggableScrollableSheet原生组件实现：

import 'package:flutter/material.dart';

class NativeSlidingPanel extends StatelessWidget {
  const NativeSlidingPanel({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 底层主页面内容
          const Center(child: Text("底层主页面内容区域")),
          DraggableScrollableSheet(
            // 面板收起时的高度占屏幕比例，可自定义
            minChildSize: 0.12,
            // 面板展开时的最大高度占屏幕比例，可自定义
            maxChildSize: 0.85,
            initialChildSize: 0.12,
            builder: (context, scrollController) {
              return Container(
                decoration: const BoxDecoration(
                  color: Colors.white,
                  // 仅设置顶部圆角
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(28),
                    topRight: Radius.circular(28),
                  ),
                  boxShadow: [
                    BoxShadow(
                      blurRadius: 8,
                      color: Colors.black12,
                      spreadRadius: 2,
                    )
                  ],
                ),
                child: ListView(
                  // 绑定滚动控制器，避免面板内列表滚动冲突
                  controller: scrollController,
                  children: const [
                    SizedBox(height: 16),
                    Center(child: Text("上滑面板内容区域")),
                    // 可添加更多面板内组件
                  ],
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

注意事项 #

• 圆角效果生效的前提是给容器设置了明确的背景色，否则圆角不会显示。
• 如果面板内部是可滚动列表，使用原生方案时必须把builder返回的scrollController绑定到列表的controller属性上，否则会出现滚动冲突。

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