Flutter启动页代码图片无法居中、文本需放底部且加载不同步问题

问题原因 #

1. 布局异常：外层Column设置了mainAxisAlignment: MainAxisAlignment.end，所有子组件都被对齐到屏幕底部，导致图片无法居中显示。
2. 渲染不同步：Image.asset默认异步解码渲染，而文本是同步渲染，因此会出现文本先展示、图片滞后加载的情况。另外你将跳转计时器放在build方法中，每次页面重绘都会重复创建计时器，逻辑存在隐患。

修改后完整代码 #

import 'dart:async';
import 'package:flutter/material.dart';
import 'login_screen.dart';

class SplashScreen extends StatefulWidget {
  const SplashScreen({super.key});

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  bool _isResourceReady = false;
  late final ImageProvider _logoImage;

  @override
  void initState() {
    super.initState();
    _logoImage = const AssetImage('assets/images/bluelogo.png');
    _initResources();
    _initJumpTimer();
  }

  Future<void> _initResources() async {
    // 预加载图片，等图片加载完成再显示页面内容
    await precacheImage(_logoImage, context);
    if (mounted) {
      setState(() => _isResourceReady = true);
    }
  }

  void _initJumpTimer() {
    Timer(const Duration(seconds: 5), () {
      if (!mounted) return;
      Navigator.pushAndRemoveUntil(
        context,
        MaterialPageRoute(
          builder: (context) => const LoginScreen(name: "Genvcare"),
        ),
        (route) => false,
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0769AA),
      body: Visibility(
        visible: _isResourceReady,
        child: Column(
          children: [
            // 图片区域占满剩余空间，自然垂直居中
            Expanded(
              child: Center(
                child: Image(image: _logoImage),
              ),
            ),
            // 底部文本区域
            const Padding(
              padding: EdgeInsets.only(bottom: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text("From"),
                  Text("@2016 Google Health Pvt Ltd."),
                  Text("Version 1.3.4.7.0"),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

核心修改说明 #

• 调整布局结构：用Expanded包裹图片组件，让图片区域占满除底部文本外的所有屏幕空间，实现图片垂直居中、文本固定在底部的效果
• 新增图片预加载逻辑：在initState阶段调用precacheImage提前解码图片，等图片加载完成后再统一渲染所有内容，保证图片和文本同时显示
• 逻辑优化：将计时器、预加载逻辑放到initState中只执行一次，避免build重复执行导致的逻辑异常

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