flutter - 我如何将 Gradient 与 Flutter ThemeData backgroundColor 属性一起使用？

Question

是否可以在 flutter ThemeData 的 backgroundColor 属性中设置渐变颜色而不是单一颜色？

final ThemeData base = ThemeData.light();
return base.copyWith(
  visualDensity: VisualDensity.adaptivePlatformDensity,
  textTheme: _texttheme(base.textTheme),
  buttonTheme: _buttonTheme(base.buttonTheme),
  inputDecorationTheme: _inputDecorationTheme(base.inputDecorationTheme),
  bottomAppBarTheme: _bottomAppBarTheme(base.bottomAppBarTheme),

  backgroundColor: Colors.blueGrey // gradient color instead of single color
);

Answer 1

您不能在 backgroundColor 中直接使用渐变因为它接受 Color而不是 Gradient ，但这并不意味着您不能制作自己的自定义背景。

如果您需要更新整个应用程序的颜色，您可以尝试自定义 Scaffold .否则，以下 GradientBackground将使您轻松创建具有渐变背景的小部件，但您可能需要根据您的布局需求对其进行自定义(例如向 Stack 添加对齐属性。

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: GradientBackground(
          gradient: LinearGradient(
            colors: [Colors.lightBlue, Colors.purpleAccent],
          ),
          child: Center(child: Text("Hello World!",
            style: Theme.of(context).textTheme.headline3,
          )),
        ),
      )
    );
  }
}

class GradientBackground extends StatelessWidget {
  GradientBackground({Key key, this.gradient, this.child}) : super(key: key);
  final Gradient gradient;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          decoration: BoxDecoration(
            gradient: gradient,
          ),
        ),
        child,
      ],
    );
  }

}