Flutter中如何实现圆角悬浮App Bar？原依赖包已废弃

以下是无需依赖第三方包、基于Flutter原生组件的几种实现方案，稳定性高且适配当前Flutter版本：

方案1：基础圆角悬浮AppBar（适配Scaffold结构） #

直接通过ClipRRect裁剪原生AppBar实现圆角，结合阴影和背景色区分营造悬浮感：

Scaffold(
  backgroundColor: Colors.grey[100],
  appBar: ClipRRect(
    borderRadius: const BorderRadius.only(
      bottomLeft: Radius.circular(20),
      bottomRight: Radius.circular(20),
    ),
    child: AppBar(
      elevation: 4, // 阴影增强悬浮效果
      backgroundColor: Colors.white,
      title: const Text('圆角悬浮AppBar'),
      centerTitle: true,
    ),
  ),
  body: const Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('页面内容区域'),
  ),
)

方案2：完全自定义悬浮AppBar（独立于Scaffold的appBar位置） #

如果需要AppBar悬浮在页面内容上方而非占据顶部栏位置，用Stack+Positioned实现：

Scaffold(
  backgroundColor: Colors.grey[100],
  body: Stack(
    children: [
      // 主内容区：需给悬浮AppBar留出顶部空间
      const Padding(
        padding: EdgeInsets.only(top: 80),
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(
              children: [
                Text('内容行1'),
                SizedBox(height: 20),
                Text('内容行2'),
                // 更多内容...
              ],
            ),
          ),
        ),
      ),
      // 悬浮圆角AppBar
      Positioned(
        top: 20,
        left: 16,
        right: 16,
        child: ClipRRect(
          borderRadius: BorderRadius.circular(20),
          child: AppBar(
            elevation: 6,
            backgroundColor: Colors.white,
            title: const Text('悬浮圆角AppBar'),
            centerTitle: true,
            leading: IconButton(
              icon: const Icon(Icons.arrow_back),
              onPressed: () {},
            ),
          ),
        ),
      ),
    ],
  ),
)

方案3：滚动动态效果（可选） #

如果需要滚动时改变AppBar的圆角、高度等参数，结合ScrollController+AnimatedContainer实现平滑过渡：

class FloatingAppBar extends StatefulWidget {
  const FloatingAppBar({super.key});

  @override
  State<FloatingAppBar> createState() => _FloatingAppBarState();
}

class _FloatingAppBarState extends State<FloatingAppBar> {
  final ScrollController _scrollController = ScrollController();
  double _appBarHeight = 60;
  double _borderRadius = 20;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      setState(() {
        // 根据滚动距离动态调整参数
        if (_scrollController.offset > 50) {
          _appBarHeight = 50;
          _borderRadius = 10;
        } else {
          _appBarHeight = 60;
          _borderRadius = 20;
        }
      });
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: Stack(
        children: [
          Padding(
            padding: EdgeInsets.only(top: _appBarHeight + 20),
            child: ListView.builder(
              controller: _scrollController,
              itemCount: 50,
              itemBuilder: (context, index) {
                return const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                  child: Text('列表项'),
                );
              },
            ),
          ),
          Positioned(
            top: 20,
            left: 16,
            right: 16,
            height: _appBarHeight,
            child: AnimatedContainer(
              duration: const Duration(milliseconds: 200),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(_borderRadius),
                color: Colors.white,
                boxShadow: const [
                  BoxShadow(
                    color: Colors.black12,
                    blurRadius: 6,
                    offset: Offset(0, 2),
                  ),
                ],
              ),
              child: const Center(child: Text('动态悬浮AppBar')),
            ),
          ),
        ],
      ),
    );
  }
}

以上方案均可根据你的视觉需求调整圆角半径、阴影强度、位置偏移等参数，完全替代已废弃的第三方包功能。

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