如何修复导致空白的列并忽略Flutter中的线性梯度

Question

我有一个带有线性渐变的容器，目的是成为我的应用程序的背景色。当我将“列”作为子级时，我的背景仅在列大小中起作用。剩余空间将变为空白。

我尝试将脚手架的背景色设置为透明，但这会将其变成黑色空间而不是白色空间

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Container(
          padding: EdgeInsets.all(32),
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: [0.1, 0.9],
              colors: [
                HexColor("#2a4644"),
                HexColor("#3c1630"),
              ],

            ),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text('test')
            ],
          )
        ),
    );
  }
}

以下是它的外观截图：http://prntscr.com/o64s1f

Answer 1

您必须使用堆栈。容器应占据整个屏幕的宽度和高度。然后将列放在容器的前面。

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Stack(
        children: <Widget>[
          Container(
            width: double.infinity,
            height: double.infinity,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                stops: [0.1, 0.9],
                colors: [
                  Color(0xFF2a4644),
                  Color(0xFF3c1630),
                ],
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(32.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text('test')
              ],
            ),
          ),
        ],
      ),
    );
  }