Flutter原生启动屏如何设置GIF背景？

先纠正你的配置错误 #

你当前的配置里有拼写错误：backgoround_image_android 应该改为 background_image_android，不过即使修正后，flutter_native_splash 包本身不支持将GIF作为原生启动屏背景——因为Android和iOS的原生启动屏机制（Android的layer-list、iOS的Launch Screen）都只支持静态图片，不支持GIF动效。

两种可行的实现方案 #

方案1：Flutter初始化后显示过渡GIF页面 #

这是最简单的方案，无需修改原生代码：

1. 保持flutter_native_splash的静态启动屏配置（可以用GIF的首帧作为静态图）
2. 当Flutter初始化完成后，先显示一个全屏的GIF页面，停留指定时长后再跳转到主页面

示例代码：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:gif/gif.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const SplashGifPage(),
    );
  }
}

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

  @override
  State<SplashGifPage> createState() => _SplashGifPageState();
}

class _SplashGifPageState extends State<SplashGifPage> with SingleTickerProviderStateMixin {
  late GifController _controller;

  @override
  void initState() {
    super.initState();
    // 隐藏状态栏和导航栏，实现全屏
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
    _controller = GifController(vsync: this);
    // 设置3秒后跳转到主页面，可根据GIF时长调整
    Future.delayed(const Duration(seconds: 3), () {
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => const MainPage()));
      // 恢复状态栏显示
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GifImage(
        controller: _controller,
        image: const AssetImage('assets/images/splash.gif'),
        fit: BoxFit.cover,
      ),
    );
  }
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主页面')),
    );
  }
}

需要在pubspec.yaml中添加依赖：

dependencies:
  gif: ^4.0.1

方案2：原生端自定义GIF启动屏 #

如果需要在Flutter初始化前就显示GIF动效，需要分别修改Android和iOS的原生代码：

Android端实现

1. 在android/app/src/main/res/layout下创建splash_layout.xml，使用VideoView播放转成MP4格式的GIF（或用ImageView加载GIF并启用动画）
2. 创建自定义的SplashActivity作为启动Activity，在其中完成GIF播放后跳转到Flutter的MainActivity
3. 修改AndroidManifest.xml，将默认启动Activity改为自定义的SplashActivity

iOS端实现

1. 在Xcode中创建新的ViewController，用UIImageView加载GIF的序列帧实现动画，或用AVPlayer播放转码后的视频文件
2. 设置该ViewController为启动页面，动画结束后跳转到Flutter的ViewController

这种方案需要具备原生开发基础，适合对启动阶段动效有严格要求的场景。

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