WedX - журнал о программировании и компьютерных науках

Пользовательский слайдер с Img во Flutter

Я пытаюсь вернуться и изображение, когда я меняю значение на ползунке, но это ползунок кода

изображение - это шаблон, который я хочу показать на экране

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
      ],
    );
  }
}

а это мой код 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
      ],
    );
  }
}

в этом img это экран, но я хочу изменить img при изменении значения ползунка

введите здесь описание изображения

12.10.2020

Ответы:


1

Если вы хотите показать изображение, меняется ли 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");
        } else if(pain_value > 2.0 && pain_value <= 4.0){
          TextAndImgPain("Me duele", "assets/img/escala3-4.png");
        } else {'default value here'}
      });
    },

вместо этого

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");
        }
      });
    },
12.10.2020
  • проблема в том, что он даже не меняет изображение или текст 12.10.2020
  • Новые материалы

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


    Для любых предложений по сайту: [email protected]