Background black

[florent6001]

Hi everyone,

I don't know why, i got a black background on all my slides.

Here is my code :

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';

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

  @override
  IntroScreenState createState() => new IntroScreenState();
}

class IntroScreenState extends State<IntroScreen> {
  List<Slide> slides = [];

  Function goToTab;

  @override
  void initState() {
    super.initState();

    slides.add(
      new Slide(
          title: "Trouve les évènements proches",
          styleTitle: TextStyle(color: Colors.white, fontSize: 21),
          description:
              "Grâce à ta géolocalisation, MotoGroup met en avant les rassemblements et manifestations proches de chez toi.",
          styleDescription: TextStyle(color: Colors.grey[700], fontSize: 16.0),
          pathImage: 'assets/img/intro/map.png',
          widthImage: 128,
          heightImage: 128,
          backgroundColor: Color(0xffff5a66)),
    );
    slides.add(
      new Slide(
          title: "Fais des rencontres formidables",
          styleTitle: TextStyle(color: Colors.white, fontSize: 21),
          description:
              "Discute avec des centaines de personnes qui partagent la même passion que toi grâce au système de messagerie instantanée.",
          styleDescription: TextStyle(color: Colors.grey[700], fontSize: 16.0),
          pathImage: "assets/img/intro/chat.png",
          widthImage: 128,
          heightImage: 128,
          backgroundColor: Color(0xff22bcb5)),
    );
    slides.add(
      new Slide(
          title: "Rejoins des balades communautaires",
          styleTitle: TextStyle(color: Colors.white, fontSize: 21),
          description:
              "Créer ou rejoins un itinéaire communautaire pour te balader avec d'autre membres.",
          styleDescription: TextStyle(color: Colors.grey[700], fontSize: 16.0),
          pathImage: "assets/img/intro/road.png",
          widthImage: 128,
          heightImage: 128,
          backgroundColor: Color(0xffa480cf)),
    );
  }

  void onDonePress() {
    // Back to the first tab
    this.goToTab(0);
  }

  void onTabChangeCompleted(index) {
    // Index of current tab is focused
  }

  Widget renderNextBtn() {
    return Icon(
      Icons.navigate_next,
      color: Color(0xffffffff),
      size: 35.0,
    );
  }

  Widget renderDoneBtn() {
    return Icon(
      Icons.done,
      color: Color(0xffffffff),
    );
  }

  List<Widget> renderListCustomTabs() {
    List<Widget> tabs = [];
    for (int i = 0; i < slides.length; i++) {
      Slide currentSlide = slides[i];
      tabs.add(Container(
        width: double.infinity,
        height: double.infinity,
        child: Container(
          margin: EdgeInsets.only(bottom: 60.0, top: 60.0),
          child: ListView(
            children: <Widget>[
              GestureDetector(
                  child: Image.asset(
                currentSlide.pathImage,
                width: 200.0,
                height: 200.0,
                fit: BoxFit.contain,
              )),
              Container(
                child: Text(
                  currentSlide.title,
                  style: currentSlide.styleTitle,
                  textAlign: TextAlign.center,
                ),
                margin: EdgeInsets.only(top: 20.0),
              ),
              Container(
                child: Text(
                  currentSlide.description,
                  style: currentSlide.styleDescription,
                  textAlign: TextAlign.center,
                  maxLines: 5,
                  overflow: TextOverflow.ellipsis,
                ),
                margin: EdgeInsets.only(top: 20.0),
              ),
            ],
          ),
        ),
      ));
    }
    return tabs;
  }

  @override
  Widget build(BuildContext context) {
    return new IntroSlider(
      showSkipBtn: false,

      // Next button
      renderNextBtn: this.renderNextBtn(),

      // Done button
      renderDoneBtn: this.renderDoneBtn(),
      onDonePress: this.onDonePress,
      colorDoneBtn: Color(0xffffffff),
      highlightColorDoneBtn: Color(0xffffffff),

      // Dot indicator
      colorDot: Color(0xffffffff),
      sizeDot: 13.0,
      typeDotAnimation: dotSliderAnimation.SIZE_TRANSITION,

      // Tabs
      listCustomTabs: this.renderListCustomTabs(),
      refFuncGoToTab: (refFunc) {
        this.goToTab = refFunc;
      },

      // Behavior
      scrollPhysics: BouncingScrollPhysics(),

      // Show or hide status bar
      hideStatusBar: false,

      // On tab change completed
      onTabChangeCompleted: this.onTabChangeCompleted,
    );
  }
}

[davinderkumar]

add

   color: currentSlide.backgroundColor,

in function renderListCustomTabs, after following line tabs.add(Container(

[duytq94]

Seem @davinderkumar 's solution is working. Or you can using backgroundColorAllSlides if you would like to set all slides the same background color