Flutter引导页背景修复：实现全屏背景+SVG居中显示

问题根源 #

1. 你在每个PageViewModel的image字段内嵌套了背景容器，但image区域仅占据页面局部空间，导致背景无法铺满全屏。
2. IntroductionScreen默认带有不透明背景色，遮挡了Scaffold的Stack中设置的全屏背景。

修改方案 #

• 移除所有PageViewModel内部的背景图片容器，仅保留居中的SVG组件。
• 为IntroductionScreen设置透明全局背景，让底层全屏背景可见。
• 确保Stack中的全屏背景容器尺寸正确。

修改后的完整代码 #

class IntroScreen extends StatelessWidget {
  IntroScreen({Key? key}) : super(key: key);

  final List<PageViewModel> pages = [
    PageViewModel(
      title: '',
      body: '',
      image: Center(
        child: SvgPicture.asset(
          'assets/images/img_group_deep_orange_50.svg',
          height: 900,
          fit: BoxFit.contain,
        ),
      ),
    ),
    PageViewModel(
      title: '',
      body: '',
      footer: SizedBox(
        height: 45,
        width: 300,
      ),
      image: Center(
        child: SvgPicture.asset(
          'assets/images/img_group_deep_orange_a100_01.svg',
          height: 900,
          fit: BoxFit.contain,
        ),
      ),
    ),
    PageViewModel(
      title: '',
      body: '',
      footer: SizedBox(
        height: 45,
        width: 300,
      ),
      image: Center(
        child: SvgPicture.asset(
          'assets/images/img_group_deep_orange_100_01.svg',
          height: 900,
          fit: BoxFit.contain,
        ),
      ),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 全屏背景图片
          Container(
            width: double.infinity,
            height: double.infinity,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(ImageConstant.imgBgplain1),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(10, 80, 10, 10),
            child: IntroductionScreen(
              // 设置全局背景透明，让底层全屏背景显示
              globalBackgroundColor: Colors.transparent,
              pages: pages,
              dotsDecorator: const DotsDecorator(
                size: Size(10, 10),
                color: Color.fromARGB(255, 234, 230, 226),
                activeSize: Size.square(15),
                activeColor: Color.fromARGB(255, 153, 13, 3),
              ),
              showDoneButton: true,
              done: const Text('Done', style: TextStyle(fontSize: 20)),
              showSkipButton: true,
              skip: const Icon(Icons.close, size: 25),
              showNextButton: true,
              next: const Icon(Icons.arrow_forward, size: 25),
              onDone: () => onDone(context),
              curve: Curves.bounceOut,
            ),
          ),
        ],
      ),
    );
  }

  // 补充onDone方法（原代码缺失，需确保已实现）
  void onDone(BuildContext context) {
    // 这里添加点击Done后的逻辑，比如跳转到首页
    Navigator.of(context).pushReplacementNamed('/home');
  }
}

关键修改点说明 #

• 移除PageViewModel内的背景容器：每个页面仅保留居中的SVG，避免局部背景干扰全屏效果。
• 设置globalBackgroundColor为透明：这是核心，让IntroductionScreen不再遮挡底层的全屏背景图片。
• 保留Stack中的全屏背景容器：确保背景图片铺满整个屏幕，不受引导页组件的布局限制。

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