I have a screen where three sliders for red green and blue as demo example..

I want to change scaffold background colour based on these 3 values of slider

I have done already but now I want to make a widget of slider so that duplicate code should be not written ..

Slider has a onChange event where a parameter is necessary to how to deal with it in custom widget

here is my code

Column(
          children: [
            Container(
              decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),color: Colors.grey),
              child:Slider(
                max: 255,
                min: 0,
                value: red.toDouble(),onChanged: (x){
                red=x.toInt();
                setState(() {
                  changeColor();
                });

              },) ,),
            Container(
              decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),color: Colors.grey),
              child:Slider(
                max: 255,
                min: 0,
                value: green.toDouble(),onChanged: (x){
                green=x.toInt();
                setState(() {
                  changeColor();
                });
              },) ,),

            Container(
              decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),color: Colors.grey),
              child:Slider(
                max: 255,
                min: 0,
                value: blue.toDouble(),onChanged: (x){
                blue=x.toInt();
                setState(() {
                  changeColor();
                });

              },) ,),




          ],
        ),

here is my function of changeColor

void changeColor()
  {
    scaffoldcolor=Color.fromRGBO(red, green, blue, 1);
  }

CodePudding user response：

I guess you are looking for something like this.

Main Page:

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int red = 0;
  int blue = 0;
  int green = 0;

  changeColor() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color.fromRGBO(red, green, blue, 1),
        body: Column(
          children: [
            ColorSlider(
                value: red,
                trackColor: Colors.red,
                onChange: (int value) {
                  red = value;
                  changeColor();
                }),
            ColorSlider(
                value: green,
                trackColor: Colors.green,
                onChange: (int value) {
                  green = value;
                  changeColor();
                }),
            ColorSlider(
                value: blue,
                trackColor: Colors.blue,
                onChange: (int value) {
                  blue = value;
                  changeColor();
                })
          ],
        ));
  }
}

Color slider Widget: (May be a separate file or same file)

class ColorSlider extends StatefulWidget {
  const ColorSlider({Key? key, required this.value, required this.onChange, required this.trackColor})
      : super(key: key);
  final int value;
  final Function(int) onChange;
  final Color trackColor;

  @override
  State<ColorSlider> createState() => _ColorSliderState();
}

class _ColorSliderState extends State<ColorSlider> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(4),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20), color: Colors.grey),
      child: Slider(
        activeColor: widget.trackColor.withOpacity(0.8),
        inactiveColor: widget.trackColor.withOpacity(0.3),
        thumbColor: widget.trackColor,
        max: 255,
        min: 0,
        value: widget.value.toDouble(),
        onChanged: (value) {
          widget.onChange(value.toInt());
        },
      ),
    );
  }
}

CodePudding user response：

You can create a callBack for slider widget like

final Function(int r, int g, int b) onChange;

Play With this widget

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

  @override
  State<RGBScaffoldBG> createState() => _RGBScaffoldBGState();
}

class _RGBScaffoldBGState extends State<RGBScaffoldBG> {
  Color bgColor = Colors.grey[50]!;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: bgColor,
      body: BGController(
        initColor: bgColor,
        onChange: (r, g, b) {
          bgColor = Color.fromRGBO(r, g, b, 1);
          setState(() {});
        },
      ),
    );
  }
}

class BGController extends StatefulWidget {
  final Color initColor;
  final Function(int r, int g, int b) onChange;

  BGController({
    Key? key,
    required this.initColor,
    required this.onChange,
  }) : super(key: key);

  @override
  State<BGController> createState() => _BGControllerState();
}

class _BGControllerState extends State<BGController> {
  late int red = widget.initColor.red;
  late int blue = widget.initColor.red;
  late int green = widget.initColor.red;

  onChanged() {
    widget.onChange(red, green, blue);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20), color: Colors.grey),
          child: Slider(
            max: 255,
            min: 0,
            value: red.toDouble(),
            onChanged: (x) {
              red = x.toInt();
              onChanged();
              setState(() {});
            },
          ),
        ),
        Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20), color: Colors.grey),
          child: Slider(
            max: 255,
            min: 0,
            value: green.toDouble(),
            onChanged: (x) {
              green = x.toInt();
              onChanged();
              setState(() {});
            },
          ),
        ),
        Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20), color: Colors.grey),
          child: Slider(
            max: 255,
            min: 0,
            value: blue.toDouble(),
            onChanged: (x) {
              blue = x.toInt();
              onChanged();
              setState(() {});
            },
          ),
        ),
      ],
    );
  }
}