如何将渐变作为背景添加到我的 Flutter Web 应用程序的主体？答案

【问题标题】：How do I add a gradient as a background to the body of my flutter web app?如何将渐变作为背景添加到我的 Flutter Web 应用程序的主体？
【发布时间】：2020-01-09 18:05:14
【问题描述】：

这是我尝试过的：

body: Container(
          height: MediaQuery.of(context).size.height,
         width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(
            gradient:
            LinearGradient(colors: [Color(0xFFc2e59c), Color(0xFF64b3f4)]),
          )

我也尝试过不指定宽度和高度，但最终结果始终是不会完全填充主体的渐变 -

【问题讨论】：

你的父小部件是什么？
Scaffold 是父级。@ZPrime

标签： flutter flutter-web

【解决方案1】：

尝试将代码封装在 Scaffold 中。这是sn-p：

 Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          gradient:
          LinearGradient(colors: [Color(0xFFc2e59c), Color(0xFF64b3f4)]),
        )
      ),
   }

【讨论】：

我的代码也是 Scaffold 的子代码。如果使用纯色没有问题，但线性渐变总是占用有限的空间，如果放置在容器中甚至不会居中，这似乎只是 Flutter web 的问题。

【解决方案2】：

代码片段：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [
                Color(0xFFF6A064),
                Color(0xFFF24223),
                Color(0xFFEA7A6C),
                Color(0xFF27823),
              ],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: [0.0, 0.3, 0.6, 1.0],
              tileMode: TileMode.clamp),
        ),
        child: Center(
          child: Text(
           'Hello',
            style: TextStyle(fontSize: 29),
          ),
        ),
      ),
    );
  }

图像输出：

【讨论】：