dimanche 2 février 2020

How change state in flutter?

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

enter image description here




Aucun commentaire:

Enregistrer un commentaire