Изменить цвет рамки изображения на переключатель флажок во флаттере - PullRequest
Новая
       16

Изменить цвет рамки изображения на переключатель флажок во флаттере

0 голосов
/ 07 мая 2019

Итак, у меня есть виджет ImageTexts(), в котором есть изображение и текст. Который заполняется ответом API. У меня есть другой виджет InterestPicker виджет, который принимает ImageText в качестве аргумента.

Поскольку я хочу переключать цвет границы изображений в виджете ImageText() с помощью флажка, который присутствует в InterestPicker. Но после всей моей тяжелой работы я не получаю результат.

На данный момент я сделал следующее: Я объявил глобально одну переменную isAllSelected = false и установил ее состояние в onChange () внутри поля Checkbox .

FAIL: Цвет границы при этом не меняется.

1. КЛАСС 

bool isAllSelected = false;
class SelectInterestPage extends StatefulWidget {
  @override
  _SelectInterestPageState createState() => _SelectInterestPageState();
}

class _SelectInterestPageState extends State<SelectInterestPage> {
  List<abc> abs = [];
  @override
  void initState() {
   // TODO: implement initState
   super.initState();
   this.run();
  }

  void run(){
    //calling api
  }

  Widget get getDrinks{
    return GridView.count(
      shrinkWrap: true,
      crossAxisCount: 3,
      mainAxisSpacing: 8,
      children: this.abc.map((o){
       return ImageTexts(userInterest: o);
      }).toList()
    );
  }

  @override
  Widget build(BuildContext context) {
     return Scaffold(
        body: Builder(
          builder: (BuildContext context){
            return Stack(
               Positioned(
                left: 24, right: 24, top: 0, bottom: 78.0, 
                child: InterestPicker(
                  containerWidget: this.getDrinks
                )
               )
            );
          }
        )
     );
  }
}

2. ImageTexts () Widget Только основной контент. Нет полного описания класса 

GestureDetector(
   onTap: () {onTapEvent();},
   child: Container(
     height: 88.7,
     width: 88.7,
     decoration: BoxDecoration(
        image: DecorationImage(
        image: NetworkImage(widget.userInterest.interest.image),
               fit: BoxFit.fill
        ),
        shape: BoxShape.circle,
        border: Border.all(color: isAllSelected ? Theme.of(context).primaryColor : Colors.transparent, width: 2.0)
     )
)

3. InterestPicker () Виджет 

class InterestPicker extends StatefulWidget {
  final Widget containerWidget;

  InterestPicker({this.containerWidget});

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

class _InterestPickerState extends State<InterestPicker> {
   @override
   Widget build(BuildContext context) {
      return Column(
         children: [
           Container(
             height: MediaQuery.of(context).size.height/2,
             child: widget.containerWidget
           ),
           Transform.scale(
              scale: 1.2,
              child: new Checkbox(
              value: isAllSelected,
              activeColor: Theme.of(context).primaryColor,
              onChanged: (bool value) {
                 setState(() {
                    isAllSelected = value;
                 });
              }
             )
           )
         ] 
      );
   }
}

ПРИМЕЧАНИЕ: Все классы только в одном классе. Я проверил, что флажок изменяет значение isAllSelected.

  • ТОЛЬКО ВРЕМЯ РАБОТАЕТ, КОГДА Я ОБЪЯВЛЯЮ isAllSelected = true ГЛОБАЛЬНО, И ГОРЯЧИЙ ПЕРЕЗАПУСКАЕ ПРИЛОЖЕНИЕ.

Я старался изо всех сил, чтобы достичь того, чего я хочу, но цвет совсем не меняется на желаемый, в зависимости от значения isAllSeletced. Любая помощь будет оценена.

Я также пытался сделать одну вещь в поле виджета ImageTexts(): 

bool isSelected = false;
@override
Widget build(BuildContext context){
   if(isAllSelected == true){
      setState((){
        this.isSelected = true;
      });
   }

   border: Border.all(color: isSelected ? Theme.of(context).primaryColor : Colors.transparent, width: 2.0)
}
...