如何在 App Bar Flutter 中创建线性渐变？答案

【问题标题】：How to create Linear Gradient in App Bar Flutter?如何在 App Bar Flutter 中创建线性渐变？
【发布时间】：2021-06-15 16:44:22
【问题描述】：

我正在尝试在 appBar 中添加线性渐变，但到目前为止我还没有设法做到这一点。有人知道我如何在我的 appBar 中添加它吗？谢谢

decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [const Color(0xFFF06292), const Color(0xff2A75BC)]),

我的代码是这样的

class RegisterAgree extends StatefulWidget {
  @override
  _RegisterAgreeState createState() => _RegisterAgreeState();
}

class _RegisterAgreeState extends State<RegisterAgree> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.pink,
        title: Row(
          children: <Widget>[
            Image.asset(
              'assets/images/logox.png',
              fit: BoxFit.cover,
              height: 45.0,
            )
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

查看这篇文章，hackernoon.com/flutter-gradient-app-bar-jm8a32fu

标签： flutter dart gradient android-appbarlayout flutter-appbar

【解决方案1】：

你也可以用这个：

appBar: AppBar(

  title: Text('Flutter Demo'),
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        colors: <Color>[
          Colors.red,
          Colors.blue
        ],
      ),
    ),
  ),
),

【讨论】：

【解决方案2】：

您可以通过将AppBar 包裹在带有渐变的Container 中来创建自己的可重复使用的应用栏小部件：

class GradientAppBar extends StatelessWidget with PreferredSizeWidget {
  static const _defaultHeight = 56.0;

  final double elevation;
  final Gradient gradient;
  final Widget title;
  final double barHeight;

  GradientAppBar(
      {this.elevation = 3.0,
      this.gradient,
      this.title,
      this.barHeight = _defaultHeight});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56.0,
      decoration: BoxDecoration(gradient: gradient, boxShadow: [
        BoxShadow(
          offset: Offset(0, elevation),
          color: Colors.black.withOpacity(0.3),
          blurRadius: 3,
        ),
      ]),
      child: AppBar(
        title: title,
        elevation: 0.0,
        backgroundColor: Colors.transparent,
      ),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(barHeight);
}

Try the full example on DartPad

截图

【讨论】：

非常感谢！