是否可以在颤振中制作渐变标题

时间:2021-07-23 22:22:16

标签: flutter dart

我正在努力实现以下目标: A header that act as a navigator, with a gradient background 我搜索了很多,但一无所获。 是否可以制作这样的 AppBar?

编辑

这是完整的 figma 应用程序链接:Click Here

2 个答案:

答案 0 :(得分:0)

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

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

enter image description here

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

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

答案 1 :(得分:0)

最后,我做了一个名为 header 的组件,并放了 2 个按钮和一个文本来获得效果