How to make a button select all Flutter checkboxes?

Question

The problem is that I cannot make the button select all checkboxes, since I am using an automatically generated list of checkboxes.

Since I created a class with a list item, WordBlock, which is a container with a Checkbox and each checkbox has its own checked value, and therefore I can not select everything in any way. And if I set the checked value through the constructor, then it selects everything, but the onChanged () method does not work and the value of one checkbox does not change. But you need to be able to select the checkboxes one at a time or all at once, select all with the button.

Here is the code for my WordBlock class that appears in the list.

class WordBlock extends StatefulWidget {

  final bool checkAll;
  WordBlock(this.checkAll);
  @override
  _WordBlockState createState() => _WordBlockState();
}

class _WordBlockState extends State<WordBlock> {
  FlutterTts tts = FlutterTts();
  bool checked = false;
  Future _speak(String text) async {
    await tts.setLanguage('en-US');
    await tts.speak(text);
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 35.w),
      child: Card(
        color: checked ? MyColors().scaffoldBG : Colors.white,
        elevation: 4.0,
        shadowColor: MyColors().black.withOpacity(0.1),
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(25.ssp)),
        child: CheckboxListTile(
          value: checked,
          activeColor: MyColors().purple,
          onChanged: (value) {
            print('changed');
            setState(() {
              checked = value;
            });
          },
          title: h2(text: 'Car'),
          secondary: Padding(
            padding: EdgeInsets.only(top: 10.h),
            child: InkWell(
              onTap: () => _speak('Car'),
              child: Icon(
                Icons.volume_up_rounded,
                color: MyColors().purple,
                size: 60.ssp,
              ),
            ),
          ),
          subtitle: Text(
            'Машина',
            style: TextStyle(color: Color(0xFFB8A98BA), fontSize: 27.ssp),
          ),
        ),
      ),
    );
  }
}

Here is the code for my page that displays the WordBloc list:

class WordPage extends StatefulWidget {
  @override
  _WordPageState createState() => _WordPageState();
}

class _WordPageState extends State<WordPage> {
  bool visible = true;
  double banerHeight;
  bool checked = false;

  @override
  void initState() {
    super.initState();
  }

  Widget _wrapWithBanner() {
    if (!visible) {
      setState(() {
        banerHeight = 0;
      });
    }
    return visible
        ? Container(
            margin: EdgeInsets.only(
                left: 35.w, right: 35.w, top: 30.h, bottom: 30.h),
            padding: EdgeInsets.symmetric(vertical: 25.h),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(25.ssp),
                color: MyColors().scaffoldBG,
                boxShadow: [boxShadow4Y10Blur()]),
            child: ListTile(
              onTap: () {
                print('close');
              },
              trailing: visible
                  ? InkWell(
                      onTap: () {
                        print('tapped');
                        setState(() {
                          visible = false;
                        });
                      },
                      child: Icon(Icons.close))
                  : Container(),
              leading: CircleAvatar(),
              title: h3bold(text: 'Совет'),
              subtitle: Text(
                'Чтобы запомнить как можно больше слов, регулярно повторяйте их: каждые два-три часа :)',
                style: TextStyle(color: MyColors().black, fontSize: 27.ssp),
              ),
            ))
        : Container();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      backgroundColor: MyColors().white,
      appBar: AppBar(
        elevation: 2.0,
        title: h2(text: 'Работа'),
        iconTheme: IconThemeData(size: 20.ssp, color: MyColors().purple),
        backgroundColor: MyColors().white,
      ),
      body: Column(
        children: [
          _wrapWithBanner(),
          Row(
            children: [
              FlatButton( // my selectAll button
                  onPressed: () {},
                  child: Row(
                    children: [
                      Checkbox(
                          value: checked,
                          onChanged: (val) {
                            setState(() {
                              checked = val;
                            });
                          }),
                      Text(
                        'Выделить все',
                        style: TextStyle(
                            color: MyColors().purple, fontSize: 27.ssp),
                      )
                    ],
                  ))
            ],
          ),
          Expanded(
              child: ListView.builder(
            itemCount: 4,
            itemBuilder: (context, index) {
              return WordBlock(checked);
            },
          ))
        ],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: Container(
        width: 667.w,
        height: 91.h,
        child: FloatingActionButton(
          backgroundColor: MyColors().purple,
          onPressed: () {},
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(24.ssp)),
          child: h2reg(
              text: "Добавить в мой словарь", textColor: MyColors().white),
        ),
      ),
    ));
  }

}

How can this function be implemented?

Answer 1

try below code for with button all checkbox check and uncheck

Output :-

Code :-

import 'package:flutter/material.dart';

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

  @override
  State<CheckBoxExample> createState() => _CheckBoxExampleState();
}

class _CheckBoxExampleState extends State<CheckBoxExample> {
  List multipleSelected = [];
  List checkListItems = [
    {
      "id": 0,
      "value": false,
      "title": "Sunday",
    },
    {
      "id": 1,
      "value": false,
      "title": "Monday",
    },
    {
      "id": 2,
      "value": false,
      "title": "Tuesday",
    },
    {
      "id": 3,
      "value": false,
      "title": "Wednesday",
    },
    {
      "id": 4,
      "value": false,
      "title": "Thursday",
    },
    {
      "id": 5,
      "value": false,
      "title": "Friday",
    },
    {
      "id": 6,
      "value": false,
      "title": "Saturday",
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 64.0),
        child: Column(
          children: [
            InkWell(
              onTap: () => setState(() {
                multipleSelected.clear();
                for (var element in checkListItems) {
                  if (element["value"] == false) {
                    element["value"] = true;
                    multipleSelected.add(element);
                  } else {
                    element["value"] = false;
                    multipleSelected.remove(element);
                  }
                }
              }),
              child: const Text(
                "Select All",
                style: TextStyle(
                  fontSize: 22.0,
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            Column(
              children: List.generate(
                checkListItems.length,
                (index) => CheckboxListTile(
                  controlAffinity: ListTileControlAffinity.leading,
                  contentPadding: EdgeInsets.zero,
                  dense: true,
                  title: Text(
                    checkListItems[index]["title"],
                    style: const TextStyle(
                      fontSize: 16.0,
                      color: Colors.black,
                    ),
                  ),
                  value: checkListItems[index]["value"],
                  onChanged: (value) {
                    setState(() {
                      checkListItems[index]["value"] = value;
                    });
                  },
                ),
              ),
            ),
            Text(
              multipleSelected.isEmpty ? "" : multipleSelected.toString(),
              style: const TextStyle(
                fontSize: 22.0,
                color: Colors.black,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

If you put bool checked = false; in as

class WordBlock extends StatefulWidget {

 bool checked = false;
  WordBlock();
  @override
  _WordBlockState createState() => _WordBlockState();
}

You can change it and reach it from _WordBlockState as widget.checked

Checkbox(
          value: widget.checked,
          onChanged: (val) {
           setState(() {
           widget.checked = val;
           });
          }),

it can be modified by both class and not constant.