Rendering problem

[nanox77]

Hello everyone,

I'm having a rendering problem. I have a texture loaded for the first time and I can change the configuration with different filters using buttons. The problem is, as seen in the video, the rendering white flickering. How can I avoid it? Thank you!.

Here is video:

Here is code:

import 'package:flutter/material.dart';
import 'package:flutter_image_filters/flutter_image_filters.dart';

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

  @override
  State<PreviewPage> createState() => _PreviewPageState();
}

class _PreviewPageState extends State<PreviewPage> {
  final imageUrl = 'assets/demo.jpeg';

  late TextureSource texture;
  late ShaderConfiguration configuration;
  bool textureLoaded = false;

  @override
  void initState() {
    super.initState();
    TextureSource.fromAsset(imageUrl).then((value) {
      setState(() {
        texture = value;
        configuration = NoneShaderConfiguration();
        textureLoaded = true;
      });
    });
  }

  Widget buildImage() {
    if (!textureLoaded) {
      return const Center(child: CircularProgressIndicator());
    }

    return ImageShaderPreview(
      fix: BoxFit.cover,
      texture: texture,
      configuration: configuration,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: false,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              flex: 4,
              child: buildImage(),
            ),
            const SizedBox(height: 16),
            SizedBox(
              height: 100,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  _buildBrightnessEffect(),
                  _buildContrastEffect(),
                  _buildGrayscaleEffect(),
                  _buildExposureEffect(),
                  _resetButton(),
                ],
              ),
            ),
            const SizedBox(height: 20),
          ],
        ),
      ),
    );
  }

  Widget _buildExposureEffect() {
    return _buildEffect(
      'Exposure',
      Icons.brightness_7,
      () {
        final newConfig = ExposureShaderConfiguration()..exposure = 0.5;
        setState(() => configuration = newConfig);
      },
    );
  }

  Widget _buildGrayscaleEffect() {
    return _buildEffect(
      'Greyscale',
      Icons.filter_b_and_w,
      () {
        final newConfig = GrayscaleShaderConfiguration();
        setState(() => configuration = newConfig);
      },
    );
  }

  Widget _buildContrastEffect() {
    return _buildEffect(
      'Contrast',
      Icons.contrast,
      () {
        final newConfig = ContrastShaderConfiguration()..contrast = 0.6;
        setState(() => configuration = newConfig);
      },
    );
  }

  Widget _buildBrightnessEffect() {
    return _buildEffect(
      'Brightness',
      Icons.brightness_6,
      () {
        final newConfig = BrightnessShaderConfiguration()..brightness = 0.1;
        setState(() => configuration = newConfig);
      },
    );
  }

  Widget _resetButton() {
    return _buildEffect(
      'Reset',
      Icons.refresh,
      () async {
        final newTexture = await TextureSource.fromAsset(imageUrl);
        setState(() {
          texture = newTexture;
          configuration = NoneShaderConfiguration();
        });
      },
    );
  }

  Widget _buildEffect(String effectName, IconData icon, Function()? onPressed) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        elevation: 0,
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(icon),
          const SizedBox(height: 8),
          Text(effectName),
        ],
      ),
    );
  }
}