Flutter中如何为IntroSlider添加自定义背景组件？

问题描述 #

已通过IntroSlider包实现引导页功能，但不想仅使用纯色背景，希望将单独dart文件中创建的Background组件作为IntroSlider的背景，实现Background作为底层背景，上方显示IntroSlider的文本、图片等元素的UI效果。

解决方案 #

只需完成3个关键修改即可实现需求：

• 将IntroSlider的全局背景设为透明
• 将每个自定义Slide的容器背景设为透明
• 用Background组件包裹整个IntroSlider

修改后的完整intro_slider.dart代码

import 'package:ehatid_driver_app/Screens/Welcome/components/background.dart';
import 'package:flutter/material.dart';
import 'package:intro_slider/dot_animation_enum.dart';
import 'package:intro_slider/intro_slider.dart';
import 'package:intro_slider/slide_object.dart';

import 'signup.dart';

class IntroSliderPage extends StatefulWidget {
  @override
  _IntroSliderPageState createState() => _IntroSliderPageState();
}

class _IntroSliderPageState extends State<IntroSliderPage> {
  List<Slide> slides = [];

  @override
  void initState() {
    super.initState();
    slides.add(
      new Slide(
        title: "More Passengers",
        description:
        "No need to worry about getting passengers, \n as they will be able to connect directly to you",
        pathImage: "assets/images/illus8.png",
      ),
    );
    slides.add(
      new Slide(
        title: "Convenient",
        description: "Efficient way of acquiring new \n passengers for all stray tricycle drivers",
        pathImage: "assets/images/illus2.png",
      ),
    );
    slides.add(
      new Slide(
        title: "Earn More",
        description: "Higher revenue pay for maximizing \n every trip journey",
        pathImage: "assets/images/illus11.png",
      ),
    );
    slides.add(
      new Slide(
        title: "Accept a Job",
        description: "Register in TODA G5 Terminal and \n experience your first trip.",
        pathImage: "assets/images/ehatid logo.png",
      ),
    );
  }

  List<Widget> renderListCustomTabs() {
    List<Widget> tabs = [];
    for (int i = 0; i < slides.length; i++) {
      Slide currentSlide = slides[i];
      tabs.add(
        // 修改点1：自定义Slide容器设为透明
        Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.transparent,
          child: Container(
            margin: EdgeInsets.only(bottom: 10, top: 20),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                    child: Image.asset(
                    currentSlide.pathImage.toString(),
                    matchTextDirection: true,
                    height: 250,
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 5),
                  child: Text(
                    currentSlide.title.toString(),
                    style: TextStyle(fontFamily: 'Montserrat', fontSize: 32, letterSpacing: -2, fontWeight: FontWeight.bold),
                  ),
                ),
                Container(
                  padding: EdgeInsets.symmetric(
                    horizontal: 3,
                  ),
                  child: Text(
                    currentSlide.description.toString(),
                    style: TextStyle(
                        fontFamily: 'Montserrat', fontSize: 15, color: Color(0xff646262), letterSpacing: -0.5, fontWeight: FontWeight.w500
                    ),
                    maxLines: 3,
                    textAlign: TextAlign.center,
                    overflow: TextOverflow.ellipsis,
                  ),
                  margin: EdgeInsets.only(
                    top: 15,
                    left: 20,
                    right: 20,
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
    return tabs;
  }

  @override
  Widget build(BuildContext context) {
    // 修改点2：用Background包裹IntroSlider
    return Background(
      child: IntroSlider(
        // 修改点3：IntroSlider全局背景设为透明
        backgroundColorAllSlides: Colors.transparent,
        renderSkipBtn: Text(
          "Skip",
          style: TextStyle(fontFamily: 'Montserrat', fontSize: 20, color: Color(0xff8C8C8C)),
        ),
        renderNextBtn: Text(
          "Next",
          style: TextStyle(fontFamily: 'Montserrat', fontSize: 20, color: Colors.white),
        ),
        renderDoneBtn: Text(
          "Done",
          style: TextStyle(fontFamily: 'Montserrat', fontSize: 20, color: Colors.white),
        ),
        colorDot: Colors.white,
        sizeDot: 10.0,
        typeDotAnimation: dotSliderAnimation.SIZE_TRANSITION,
        listCustomTabs: this.renderListCustomTabs(),
        scrollPhysics: BouncingScrollPhysics(),
        onDonePress: () => Navigator.pushReplacement(
          context,
          MaterialPageRoute(
            builder: (_) => HomePage(),
          ),
        ),
      ),
    );
  }
}

修改点说明

1. IntroSlider全局背景透明：将backgroundColorAllSlides从Colors.yellow改为Colors.transparent，让底层Background组件可见
2. 自定义Slide容器透明：给renderListCustomTabs中每个Slide的外层Container添加color: Colors.transparent，避免默认背景遮挡底层Background
3. Background包裹IntroSlider：把IntroSlider作为Background的child传入，让Background成为整个引导页的底层背景

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