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