Is there a way to stop the image darkening that intro_slider does to backgroundImage?-CodePudding

I'm currently making a 3-slides long Intro Slider for my application, using the Flutter package intro_slider. Everything works flawlessly and looks perfect, but since I decided to use a custom png image as my backgroundImage, it seems that the package shows the image with extremely darker colors.

In the image I've attached I'm showing the effective problem. The one on top (using centerWidget to show it) is the expected image that should show with the exact same colors. On the back there is the backgroundImage, darkened automatically.

I couldn't find anyone else talking about this issue and hope someone found a way to "solve" it. Is there a way to stop the darkening of the image?

Thanks in advance.

I have currently tried:

Changing image extensions and trying again.
Remove everything but the backgroundImage (I thought that the image was darkened because of the items on top of it)

Here is the code I wrote for the slides:

Main

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

// Main
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Goals App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: IntroScreen(),
    );
  }
}

IntroScreen

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

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

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

  @override
  void initState() {
    super.initState();
    
    slides.add(Slide(
      backgroundImage: 'assets/images/intro_first_slide.png',
      centerWidget:
          Image(image: AssetImage('assets/images/intro_first_slide.png')),
    ));
  }

  Widget renderNextBtn() {
    return const Icon(
      Icons.navigate_next,
      color: Colors.white,
      size: 35.0,
    );
  }

  Widget renderDoneBtn() {
    return const Icon(
      Icons.done,
      color: Colors.white,
      size: 35.0,
    );
  }

  Widget renderSkipBtn() {
    return const Icon(
      Icons.skip_next,
      color: Colors.white,
      size: 35.0,
    );
  }

  @override
  Widget build(BuildContext context) {
    return IntroSlider(
      // List Slides
      slides: slides,
      // Skip button
      // renderSkipBtn: renderSkipBtn(),
      // Next button
      renderNextBtn: renderNextBtn(),
      // Done button
      renderDoneBtn: renderDoneBtn(),
      // Dot indicator
      colorDot: Colors.white,
      colorActiveDot: Colors.grey[300],
      sizeDot: 13.0,

      // show/hide status bar
      hideStatusBar: true,
      backgroundColorAllSlides: Colors.grey,

      // Scrollbar
      verticalScrollbarBehavior: scrollbarBehavior.HIDE,
    );
  }
}

CodePudding user response：

Maybe this is what you are looking for? https://pub.dev/packages/intro_slider#slide-object-properties all the way down at the bottom of the properties list:

backgroundBlendMode BlendMode? BlendMode.darken Background tab image filter blend mode

probably like so

slides.add(
  Slide(
    backgroundImage: 'assets/images/intro_first_slide.png',
    centerWidget: Image(
      image: AssetImage('assets/images/intro_first_slide.png'),
    ),
    backgroundBlendMode: BlendMode.srcOver    //  <- try this

),);