I'm trying to make a checkbox with images. But i don't know how make the stateChange, i have declared a variable named selected
. In the GestureDetector
i change the value of selected
, if the value of selected
is the same of the index
i put the border. But the border of the checkbox doesn't change:
class FormularioTransferencia extends StatefulWidget {
final Champion champion;
const FormularioTransferencia({Key key, @required this.champion})
: super(key: key);
@override
State<StatefulWidget> createState() {
return FormularioTransferenciaState();
}
}
class FormularioTransferenciaState extends State<FormularioTransferencia> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.champion.feName),
),
body: FutureBuilder(
future: fetchPost(widget.champion.feName),
builder: (context, snapshot) {
if (snapshot.hasData) {
final champion = json.decode(snapshot.data.toString());
return _championDetail(champion);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
));
}
.....
Widget _championDetail(champion) {
return SingleChildScrollView(
child: Column(
children: <Widget>[
_avatarPage(champion),
_titlePage(champion),
_titleTopic('talents', 30.0),
_legendaries(champion),
_titleTopic('abilites', 45.0),
_abilites(champion),
],
),
);
}
Widget _abilites(champion) {
String selected = '1';
return Container(
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: GestureDetector(
onTap: () {
selected = '1';
debugPrint(selected);
},
child: _abilityIcon(champion, '1', selected),
),
),
Expanded(
flex: 1,
child: GestureDetector(
onTap: () {
selected = '2';
debugPrint(selected);
},
child: _abilityIcon(champion, '2', selected),
),
),
Expanded(
flex: 1,
child: GestureDetector(
onTap: () {
selected = '3';
debugPrint(selected);
},
child: _abilityIcon(champion, '3', selected),
),
),
Expanded(
flex: 1,
child: GestureDetector(
onTap: () {
selected = '4';
debugPrint(selected);
},
child: _abilityIcon(champion, '4', selected),
),
),
Expanded(
flex: 1,
child: GestureDetector(
onTap: () {
selected = '5';
debugPrint(selected);
},
child: _abilityIcon(champion, '5', selected),
),
),
],
),
);
}
Widget _abilityIcon(champion, index, selected) {
var colorBorder =
index == selected ? const Color(0x547a8c00) : const Color(0x00000000);
return Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(width: 10.0, color: colorBorder),
left: BorderSide(width: 10.0, color: colorBorder),
right: BorderSide(width: 10.0, color: colorBorder),
bottom: BorderSide(width: 10.0, color: colorBorder),
),
),
child: Image.network(
champion[0]['api_information']['Ability_' + index]['URL']),
);
}
Aucun commentaire:
Enregistrer un commentaire