Custom Slider with Img in Flutter

Question

I try to return and image when i change the value on the slider but a some this is the code slider

the image is the template that i want to show on the screen

import 'package:flutter/material.dart';
import 'package:haphy_by_aquasense/Pain/ui/widgets/text_and_img.dart';

class PainScale extends StatefulWidget {
  @override
  State createState() => _Painscale();
}

class _Painscale extends State<PainScale>{
  double pain_value = 0.0;
  String pain_text = "No me duele";

  @override
  Widget build(BuildContext context) {

    final text_pain = Container(
      height: 100,
      width: 400,

      margin: EdgeInsets.only(
        top: 150,
        right: 50,
      ),
      child: Text(
        pain_text,
      ),

    );

    final pain_scale_slider = Container(
      child: Slider(
        min: 0,
        max: 10,
        value: pain_value,
        onChanged: (value) {
          setState(() {
            pain_value = value;
            if(pain_value >= 0.0 && pain_value <= 2.0){
                TextAndImgPain("Me duele", "assets/img/escala1-2.png");
            }
            if(pain_value >= 2.0 && pain_value <= 4.0){
              TextAndImgPain("Me duele", "assets/img/escala3-4.png");
            }
          });
        },
      ),
    );

    return Stack(
      alignment: Alignment.center,
      children: [
        TextAndImgPain("Me duele", "assets/img/escala3-4.png"),
        pain_scale_slider
      ],
    );
  }
}

and this is my code textandIMG

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

class TextAndImgPain extends StatelessWidget {
  String pain_text = "Sin Dolor";
  String path_img = "assets/img/escala1-2.png";

  TextAndImgPain(this.pain_text, this.path_img);

  @override
  Widget build(BuildContext context) {
    final text = Container(
      margin: EdgeInsets.only(
        top: 50.0,
        left: 20.0
      ),
      child: Text(
        pain_text
      ),
    );

    final img = Container(
      margin: EdgeInsets.only(
        top: 20.0,
        left: 20.0
      ),
      width: 100.0,
      height: 80.0,

      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        image: DecorationImage(
          fit:BoxFit.cover,
          image: AssetImage(path_img)
        )
      ),
    );

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        text,
        img
      ],
    );
  }
}

in this img is the screen but i want to change the img when the value of the slider change

enter image description here

Answer 1

If you want show image whether pain value is changing, then why don't you use

    onChanged: (value) {
      setState(() {
        pain_value = value;
        if(pain_value >= 0.0 && pain_value <= 2.0){
            TextAndImgPain("Me duele", "assets/img/escala1-2.png");
        } else if(pain_value > 2.0 && pain_value <= 4.0){
          TextAndImgPain("Me duele", "assets/img/escala3-4.png");
        } else {'default value here'}
      });
    },

instead of this

onChanged: (value) {
      setState(() {
        pain_value = value;
        if(pain_value >= 0.0 && pain_value <= 2.0){
            TextAndImgPain("Me duele", "assets/img/escala1-2.png");
        }
        if(pain_value >= 2.0 && pain_value <= 4.0){
          TextAndImgPain("Me duele", "assets/img/escala3-4.png");
        }
      });
    },