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

如何解决如何在 App Bar Flutter 中创建线性渐变？

我正在尝试在 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,)
          ],),);
  }
}

解决方法

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

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

截图