Flutter AppBar 上的渐变背景

Posted 2023-02-23

【中文标题】Flutter AppBar 上的渐变背景

【英文标题】：Gradient Background on Flutter AppBar

【发布时间】：2018-10-28 23:07:56

【问题描述】：

如何将AppBar的backgroundColor设置为渐变色？

【问题讨论】：

为其他人pub.dev/packages/gradientscaffoldwidget

可以使用AppBar中的flexibleSpace属性来实现渐变背景。

看看这个：hackernoon.com/flutter-gradient-app-bar-jm8a32fu

【参考方案1】：

AppBar 默认不具备该功能。但是你可以制作一个类似 AppBar 的小部件，它具有如下渐变背景：

  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: new PreferredSize(
        child: new Container(
          padding: new EdgeInsets.only(
            top: MediaQuery.of(context).padding.top
          ),
          child: new Padding(
            padding: const EdgeInsets.only(
              left: 30.0,
              top: 20.0,
              bottom: 20.0
            ),
            child: new Text(
              'Arnold Parge',
              style: new TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w500,
                color: Colors.white
              ),
            ),
          ),
          decoration: new BoxDecoration(
            gradient: new LinearGradient(
              colors: [
                Colors.red,
                Colors.yellow
              ]
            ),
            boxShadow: [
              new BoxShadow(
                color: Colors.grey[500],
                blurRadius: 20.0,
                spreadRadius: 1.0,
              )
            ]
          ),
        ),
        preferredSize: new Size(
          MediaQuery.of(context).size.width,
          150.0
        ),
      ),
      body: new Center(
        child: new Text('Hello'),
      ),
    );
  

这里boxShadow 会给人一种高尚的感觉。

【讨论】：

这个答案很好，我赞成，但是，它不支持 Drawers 和其他原生 AppBar 功能，而且这个库很棒 github.com/joostlek/GradientAppBar

只能使用 Appbar 完成。按照这个链接。 hackernoon.com/flutter-gradient-app-bar-jm8a32fu

【参考方案2】：

我不相信您可以将渐变传递给 AppBar，因为它需要颜色而不是渐变。

但是，您可以创建自己的小部件来模仿 AppBar，除非使用渐变。 看看我从Planets-Flutter tutorial 拼凑的这个例子以及它下面的代码。

import "package:flutter/material.dart";

class Page extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Column(children : <Widget>[GradientAppBar("Custom Gradient App Bar"), Container()],);
  



class GradientAppBar extends StatelessWidget 

  final String title;
  final double barHeight = 50.0;

  GradientAppBar(this.title);

  @override
  Widget build(BuildContext context) 
    final double statusbarHeight = MediaQuery
        .of(context)
        .padding
        .top;

    return new Container(
      padding: EdgeInsets.only(top: statusbarHeight),
      height: statusbarHeight + barHeight,
      child: Center(
        child: Text(
          title,
          style: TextStyle(fontSize: 20.0, color: Colors.white, fontWeight: FontWeight.bold),
        ),
      ),
      decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.red, Colors.blue],
            begin: const FractionalOffset(0.0, 0.0),
            end: const FractionalOffset(0.5, 0.0),
            stops: [0.0, 1.0],
            tileMode: TileMode.clamp
        ),
      ),
    );
  

希望这会有所帮助。如果您有任何问题，请告诉我。

【讨论】：

可以在定制的AppBar中添加动作按钮

这不会有问题，因为 appbar 的所有其他默认行为都需要重写？以导航的后退按钮为例。这个假设正确吗？

看来使用这个库是终极解决方案github.com/joostlek/GradientAppBar

我们怎样才能在状态栏也隐藏黑色透明层？

可以使用 PreferredSizeWidget 直接将 GradientAppBar 设置为 appBar。

【参考方案3】：

这应该完美无缺：

return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
    flexibleSpace: Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: <Color>[Colors.black, Colors.blue]),
      ),
    ),
  ),
);