用容器包装脚手架以获得渐变背景，如何在颤动中将渐变设置为容器背景？

Posted 2023-02-16

【中文标题】用容器包装脚手架以获得渐变背景，如何在颤动中将渐变设置为容器背景？

【英文标题】：wrapping Scaffold with Container for gradient background, How to set gradient to container background in flutter?

【发布时间】：2019-04-23 20:04:45

【问题描述】：

我想用Container 包裹Scaffold，以获得同样位于AppBar 下方的渐变背景。基本上是全屏gradient 背景。但是，我的尝试没有做任何事情。 有没有另一种方法，我可以保留AppBar 功能但将它放在跨越整个屏幕的gradient 之上？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Test',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: MyHomePage(title: 'Test'),
    );
  


class MyHomePage extends StatelessWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) 
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          stops: [0.1, 0.5, 0.7, 0.9],
          colors: [
            Colors.yellow[800],
            Colors.yellow[700],
            Colors.yellow[600],
            Colors.yellow[400],
          ],
        ),
      ),
      child: Scaffold(
        appBar: AppBar(
          title: Icon(Icons.menu),
          backgroundColor: Color(0x00000000),
          elevation: 0.0,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'dummy text',
              ),
              Text(
                '5',
                style: Theme.of(context).textTheme.display1,
              ),
              FloatingActionButton(
                backgroundColor: Colors.white,
                foregroundColor: Colors.black45,
                elevation: 0.0,
                onPressed: () ,
                tooltip: 'Play',
                child: Icon(Icons.play_arrow),
              ),
            ],
          ),
        ),
      ),
    );
  

【问题讨论】：

在ThemeData( ... 中添加scaffoldBackgroundColor: Colors.transparent

谢谢！仍处于颤振的早期阶段..

当然，不客气……

【参考方案1】：

您也可以像这样向AppBar 添加渐变，

new Scaffold(
      appBar: AppBar(
        title: Center(child: Text('Awesome AppBar')),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: [
                  const Color(0xFF3366FF),
                  const Color(0xFF00CCFF),
                ],
                begin: const FractionalOffset(0.0, 0.0),
                end: const FractionalOffset(1.0, 0.0),
                stops: [0.0, 1.0],
                tileMode: TileMode.clamp),
          ),
        ),
        child: ...,
      ),
      body: ...,
    );

LinearGradient 参数：

colors：渐变中使用的颜色数组，在本例中为两种蓝色。

begin,end：第一种颜色和最后一种颜色的位置，本例中，

FractionalOffset 允许我们将 x 和 y 的坐标视为 0 到 1 的范围。由于我们想要一个水平梯度，我们对两个度量使用相同的 Y，x 从 0.0（左）变为 1.0（右）。

stops: 这个数组的大小应该与颜色相同。它定义了颜色的分布方式。 [0.0, 1.0] 将从左到右填充它。 [0.0, 0.5] 将填充颜色从左到半条等。

tileMode: 如果停靠点没有填满整个区域怎么办。在这种情况下，我们添加了钳位（它将重用最后使用的颜色），但随着我们的渐变从 0.0 变为 1.0，这并不是真正必要的。

您还可以将孩子添加到Container。例如：一些标志图像

    child: Align(
          alignment: Alignment.center,
          child: Image.asset(
            "images/logo.png",
            width: 128,
            height: 128,
          )),
    ),

希望这会有所帮助。

【参考方案2】：

在您的代码中 - 在 Scaffold 下添加 - backgroundColor: Colors.transparent,

child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
        ..

【讨论】：

我错过了脚手架背景颜色，非常感谢！

@dan 这是正确答案。您能否标记为正确。谢谢！

【参考方案3】：

只需在AppBar 中添加FlexibleSpace 并装饰容器。那么app bar就是背景渐变了。

appBar: AppBar(

      title: Text('Flutter Demo'),
      flexibleSpace: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: <Color>[
              Colors.red,
              Colors.blue
            ],
          ),
        ),
      ),
    ),

【讨论】：

谢基·阿布拉姆奇克，。为什么你投反对票，这个答案有什么问题

因为你的答案和上面一模一样

上面的答案有些不同，我只是定义如何使用..

【参考方案4】：

我使用这段代码将background颜色设置为gradient

return MaterialApp(
        home: Scaffold(
          body: Container(
            decoration: new BoxDecoration(
                gradient: new LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Color.fromARGB(255, 25,178,238),
                    Color.fromARGB(255, 21,236,229)
                  ],
                )),
            child: Align(
                alignment: Alignment.center,
                child: Image.asset(
                  "images/app_logo.png",
                  width: 128,
                  height: 128,
                )),
          ),
        ),
      );

【参考方案5】：

您只需在应用栏中使用 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
            ])
           ),
          ),
         ),

【讨论】：

this answer的精确副本

【参考方案6】：

您可以直接在下面的代码中使用任何容器或视图的渐变颜色

class HomePage extends StatelessWidget 
 @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text("Dashboard"),
      ),
      body: Container(
         alignment: Alignment.center,
         decoration: BoxDecoration(
         gradient: LinearGradient(colors: [Colors.red, Colors.blue, Colors.black])
         )
       ),
    );