在 ThemeData 中的 AppBarTheme 中定义 AppBar 的渐变

Question

我正在尝试在 flutter 中创建应用程序主题数据，在定义 ThemeData 时，我想使用渐变外观自定义应用程序的 AppBar。现在，在 ThemeData 中我们有 AppBarTheme 选项但不确定如何使用 AppBarTheme.

定义渐变

但是，在 Scaffold 中使用 AppBar 我能够定义渐变，但正在寻找一种在 ThemeData

中定义它的方法

以下是渐变的工作代码，但在 Scaffold 中，不确定如何在 AppBarTheme

中添加 flexibleSpace

return Scaffold(
      appBar: AppBar(
       
        title: Text(
          'Dashboard',
        ),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: <Color>[
                const Color(0xFFD26934),
                const Color(0xFFFF9B44),
              ],
            ),
          ),
        ),
      ),

想在这里定义渐变

ThemeData(
    fontFamily: 'Lato-Regular',
    appBarTheme: AppBarTheme(
      titleTextStyle: TextStyle(color: Colors.white),
    ),
  ),

Answer 1

你问的是不可能的。遗憾的是，您无法为颜色分配渐变。唯一的方法是使用 flexibleSpace。

appBar: AppBar(
          centerTitle: true,
            title: Text(widget.title),
            flexibleSpace: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: <Color>[
                  Colors.red,
                  Colors.blue
                ])          
             ),        
         ),      
     ),

Answer 2

package:flutter/material 尝试实现 Google 的 Material 设计：https://material.io/design

这是一套特定的风格指南，由 Google 制定，并制定了某些规则。他们制定的规则之一是应用栏应该是纯色（即不是渐变色）。

因为 Flutter 试图匹配此规范，所以它不允许在 AppBar 小部件中使用渐变。但是你总是可以自己制作。

例如：

class GradientAppBar extends StatelessWidget with PreferredSizeWidget {
  @override
  Widget build(BuildContext context) => DecoratedBox(
    child: Text('My Title'),
    decoration: BoxDecoration(
      gradient: // your gradient here
    ),
  );

  @override
  Size get preferredSize => Size(double.infinity, 60);  
}

请注意，如果您想将自定义应用栏传递给 Scaffold.appBar，它需要实施 PreferredSizeWidget 并重写 preferredSize，以便脚手架知道它的大小。

您可能还想将 title、actions 等内容提取到 GradientAppBar 的参数中，以便您可以重复使用它

在 ThemeData 中的 AppBarTheme 中定义 AppBar 的渐变

Define gradient of AppBar in AppBarTheme within ThemeData

dart

flutter

flutter-layout

flutter-appbar