flutter AppBar背景渐变色

最新推荐文章于 2025-09-24 14:25:40 发布

原创最新推荐文章于 2025-09-24 14:25:40 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #css #css3

本文介绍如何在Flutter中为AppBar设置具有渐变效果的背景，并实现状态栏的沉浸式体验。通过设置AppBar的flexibleSpace属性并使用BoxDecoration与LinearGradient结合，可以轻松实现这一效果。

设置AppBar属性：flexibleSpace

AppBar(
        title: const Text('XXXXX', style: Styles.pageTitle),
        centerTitle: true,
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(colors: [
            ColorConfig.gradient_begin,
             ColorConfig.gradient_end,
            ], begin: Alignment.bottomCenter, end: Alignment.topCenter),
          ),
        ),