如何在Flutter中实现全屏背景图并居中显示按钮？

我想要实现全屏显示的背景图，并在图上居中放置一个按钮，但当前代码无法达到预期效果。

当前代码 #

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kings of Iran',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WelcomePage(),
    );
  }
}

class WelcomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          "Kings of Iran",
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 40.0,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/images/back.jpg"),
                fit: BoxFit.cover,
                alignment: Alignment.center)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 50.0,
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => HomePage()),
                );
              },
              child: Text(
                "Explore",
                style: TextStyle(
                    fontSize: 20.0, color: Color.fromARGB(255, 191, 211, 9)),
              ),
            )
          ],
        ),
      ),
    );
  }
}

当前效果截图 #

修改方案 #

要实现全屏背景图+按钮居中，需要对代码做以下调整：

修改后的完整代码 #

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kings of Iran',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WelcomePage(),
    );
  }
}

class WelcomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 允许body延伸到AppBar下方，实现全屏背景
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        centerTitle: true,
        // 设置AppBar透明，不遮挡背景图
        backgroundColor: Colors.transparent,
        // 移除AppBar阴影
        elevation: 0,
        title: Text(
          "Kings of Iran",
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 40.0,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/back.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: Column(
          // 让Column占满父容器高度
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => HomePage()),
                );
              },
              child: Text(
                "Explore",
                style: TextStyle(
                    fontSize: 20.0, color: Color.fromARGB(255, 191, 211, 9)),
              ),
            )
          ],
        ),
      ),
    );
  }
}

关键修改点说明 #

• 全屏背景实现：给Scaffold添加extendBodyBehindAppBar: true，让背景图延伸到AppBar所在的顶部区域；同时将AppBar的backgroundColor设为透明、elevation设为0，避免遮挡背景图。
• 按钮居中实现：移除原代码中导致按钮偏移的SizedBox(height: 50.0)；给Column设置mainAxisSize: MainAxisSize.max，确保Column占满父容器的高度，这样mainAxisAlignment: MainAxisAlignment.center就能让按钮在垂直方向完全居中。

内容的提问来源于stack exchange，提问作者iSaber