我如何在 Flutter 中使用渐变颜色作为背景颜色或其他普通颜色属性..？

Question

假设我想使用这个渐变颜色

final myGradient = LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomLeft,
    colors: [
      const Color(0xFFF8A150).withOpacity(0.09),
      const Color(0xFFF15B2C).withOpacity(0.98)
    ]);

其实我想这样做

backgroundColor = myGradient

而不是

backgroundColor: Colors.red

我可以使用这个吗？不用 Container

Answer 1

要更改应用程序从应用栏顶部到屏幕末端的渐变，只需用装饰容器包裹您的脚手架，并将

backgroundColor: Colors.transparent.withOpacity(0)

添加到您的脚手架以及所有脚手架子项（例如应用程序栏或底部导航栏）。您需要一个容器来向脚手架添加渐变颜色。 Scaffold的backgroundColor参数不接受任何LinerGradient。

return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [Colors.blue, Colors.red],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter),
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent.withOpacity(0),
          appBar: AppBar(
            backgroundColor: Colors.transparent.withOpacity(0),
            title: const Text("Test"),
          ),
          body: Home(),
        ),
      ),
    );

Answer 2

尝试下面的代码，我认为如果没有容器，您就不会应用渐变颜色参考

LinearGradient

您的颜色声明：

final myGradient = LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomLeft,
    colors: [
      const Color(0xFFF8A150).withOpacity(0.09),
      const Color(0xFFF15B2C).withOpacity(0.98)
    ]); 

您的小部件：

Container(
        decoration: BoxDecoration(
          gradient: myGradient,
        ),
        child: const Center(
          child: Text(
            'Gradient Color Background',
            style: TextStyle(
              fontSize: 40,
            ),
          ),
        ),
      ),

结果屏幕->

Answer 3

你可以像这样与容器一起使用...

Container(
  decoration: BoxDecoration(
    gradient: myGradient
  ),
);