如何在Flutter框架中添加渐变作为AppBar的背景

Z时代
2024-01-10
分类：问答

改善这个问题

我想使AppBar的背景渐变，我该怎么做。

回答：

我不认为您可以将渐变传递给AppBar，因为它期望使用Color而不是渐变。

但是，您可以创建自己的小部件来模仿AppBar，除非使用渐变。请看一下我从Planets-Flutter教程中拼凑而成的示例及其下面的代码。

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