mardi 7 mai 2019

Change border color of Image on checkbox toggle in Flutter

So I have an ImageTexts() widget, which has an image and text. Which is populated by the api response. I have another widget InterestPicker widget which takes up the ImageText as an argument.

Since I want to toggle the border color of the Images in the ImageText() widget via the checkbox which is present in the InterestPicker. But after all my hard work I'm not getting the result.

What I have done so far is : I have globally declared one variable isAllSelected = false and setting the state of it in the onChange() inside the Checkbox field.

FAIL: The border color is not at all changing with that.

1. CLASS

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 Delcared the main content only. No full class description

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() Widget

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

NOTE: All classes are in the same class only. I have checked that the checkbox is changing the value of isAllSelected.

I have tried my level best to achieve what I want, but the color is not at all changing to my desired color based upon the value of isAllSeletced. Any help would be appreciated.

I have also tried to do one thing inside the ImageTexts() widget field :

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)
}




Aucun commentaire:

Enregistrer un commentaire