Flutter，使用布尔值将图标状态从一个小部件更改为另一个

Question

I have two widgets. First is the ParticipantScreen() that displays the second widget in GridView.builder() - ParticipantCard(). Both widgets have mic icons to mute participants. When I mute local participant I click mic icon on ParticipantScreen(), and regarding to that I want to change mic icon state in ParticipantCard() too to the same boolean value, but only for the first item in list that is used to create GridView with ParticipantCards. Is it possible to pass boolean value from one widget to another?

Answer 1

You can use callback function(can be typedef) for this like

final Function(bool isMuted) onChanged;

Play with this widget

class ParentWidget extends StatefulWidget {
  const ParentWidget({Key? key}) : super(key: key);

  @override
  State<ParentWidget> createState() => _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
  bool _isMuted = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Switch(
              value: _isMuted,
              onChanged: (v) {
                setState(() {
                  _isMuted = !_isMuted;
                });
              }),
          ChildC(
            isMuted: _isMuted,
            onChanged: (isMuted) {
              setState(() {
                _isMuted = isMuted;
              });
            },
          ),
        ],
      ),
    );
  }
}

class ChildC extends StatefulWidget {
  final bool isMuted;
  final Function(bool isMuted) onChanged;

  const ChildC({
    Key? key,
    required this.isMuted,
    required this.onChanged,
  }) : super(key: key);

  @override
  State<ChildC> createState() => _ChildCState();
}

class _ChildCState extends State<ChildC> {
  @override
  Widget build(BuildContext context) {
    return Switch(
        value: widget.isMuted,
        onChanged: (v) {
          widget.onChanged(v);
        });
  }
}