Flutter AppBar 上的渐变背景 [英] Gradient Background on Flutter AppBar

问题描述

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

解决方案

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

但是，您可以创建自己的小部件来模仿 AppBar，除非使用渐变.看看我从

import "package:flutter/material.dart";类页面扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){return Column(children : <Widget>[GradientAppBar("Custom Gradient App Bar"), Container()],);}}类 GradientAppBar 扩展 StatelessWidget {最终字符串标题；最终双 barHeight = 50.0;GradientAppBar(this.title);@覆盖小部件构建(BuildContext 上下文){最终双状态栏高度 = MediaQuery.of(上下文).填充.最佳;返回新容器(填充:EdgeInsets.only(顶部:statusbarHeight)，高度:statusbarHeight + barHeight，孩子:中心(孩子:文本(标题，样式:TextStyle(fontSize:20.0，颜色:Colors.white，fontWeight:FontWeight.bold)，),),装饰:盒子装饰(渐变:线性渐变(颜色:[Colors.red，Colors.blue]，开始: const FractionalOffset(0.0, 0.0),结束: const FractionalOffset(0.5, 0.0),停止:[0.0, 1.0]，tileMode:TileMode.clamp),),);}}

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

How do I set the backgroundColor of theAppBar to a gradient?

解决方案

I don't believe you can pass a gradient to an AppBar as it expects a Color rather than a gradient.

You can, however, create your own widget that mimics an AppBar except by using a gradient. Take a look at this example that I've pieced together from the Planets-Flutter tutorial along with the code below it.

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
        ),
      ),
    );
  }
}

Hope this helps. Let me know if you have any questions.

这篇关于Flutter AppBar 上的渐变背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！