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?

You are sharing data between statefulWidget. Would you like to use some package like provider or even riverpod? — yellowgray
– yellowgray, Commented Dec 30, 2020 at 10:19
Traditional solution is like getting other statefulWidget current state with GlobalKey. And then control them. Or something like inheritedwidget. It is much easier to do your case with some packages help. — yellowgray
– yellowgray, Commented Dec 30, 2020 at 10:23

mfturkcan · Accepted Answer · 2020-12-25 06:24:05Z

1

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.

answered Dec 25, 2020 at 6:24

mfturkcan

391 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tolegen Akilbekov Over a year ago

Hello! Thanks for the answer! Unfortunately, in this case the onChanged () method does not work, all values change, etc., however, the onChanged method does not work.((

MohammedAli Kadiwal · Accepted Answer · 2022-03-30 07:06:14Z

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

Collectives™ on Stack Overflow

How to make a button select all Flutter checkboxes?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related