Flutter 背景卡在圖像上，沒有覆蓋整個屏幕

Question

這是我第一次使用 flutter，當我添加背景時，它可以正常工作：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    const darkBlueColor = const Color(0xff131f40);
    const lightBlueColor = const Color(0xff445c9e);
    return Scaffold(
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                darkBlueColor,
                lightBlueColor,
              ],
              stops: [0.5, 1],
              begin: const FractionalOffset(0.5, 0.2),
              end: const FractionalOffset(1, 1),
            ),
          ),
        ),
      ),
    );
  }
}

但是當我添加 Column 以便我可以擁有更多子功能時，背景僅顯示在我添加的照片上：

這是我使用 Column 的代碼：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    const darkBlueColor = const Color(0xff131f40);
    const lightBlueColor = const Color(0xff445c9e);
    return Scaffold(
      body: Column(
        children: [
          Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  darkBlueColor,
                  lightBlueColor,
                ],
                stops: [0.5, 1],
                begin: const FractionalOffset(0.5, 0.2),
                end: const FractionalOffset(1, 1),
              ),
            ),
            child: LppImage(),
          ),
        ],
      ),
    );
  }
}

因此，如果有人知道如何解決此問題，請提供幫助。 謝謝：）

Answer 1

如果要將其他 ui 元素放置在背景之上，最好使用Stack而不是Column 。 要使背景填充全屏，請在Stack中使用Positioned.fill ：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    const darkBlueColor = const Color(0xff131f40);
    const lightBlueColor = const Color(0xff445c9e);
    return Scaffold(
      body: Stack(
        children: [
          Positioned.fill(
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    darkBlueColor,
                    lightBlueColor,
                  ],
                  stops: [0.5, 1],
                  begin: const FractionalOffset(0.5, 0.2),
                  end: const FractionalOffset(1, 1),
                ),
              ),
              child: LppImage(),
            ),
          ),
        ],
      ),
    );
  }
}