Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How can I add a checkbox for one item in flutter

Okay so basically I have this problem with the checkbox,I actually build a todolist app so I need a checkbox widget to check all the activities you’re done with.
But there is a problem, when I want to check one activity all the activities are checked in the same time.
I’ve already read all the things on the flutter page of the widget but I don’t understand who I can just check one item without define it in advance.
Will be really greatful if you can help me with that thanks.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

 @override
 _HomeState createState() => _HomeState();
 }

 class _HomeState extends State<Home> {
 List todos = [];
 String input = "";
@override
bool checkedValue =  false;
void initState() {
super.initState();
todos.add("Item1");
todos.add("Item2");
todos.add("Item3");
todos.add("Item4");

 }
 @override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("TASKS",style: TextStyle(
      fontFamily: "BaksoSapi",
    ),),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      showDialog(context: context, builder: (BuildContext context){
        return AlertDialog(
          title: Text("Add Todolist !"),
          content: TextField(
            onChanged: (String value){
              input = value;
            },
          ),
          actions: <Widget>[
            FlatButton(onPressed: (){setState(() {
              todos.add(input);
            });

            }, child: Text("Add"))
          ],
        );
      });
    },
  child: Icon(Icons.add,
              color: Colors.white,
  ),
  ),
  body: ListView.builder(
      itemCount: todos.length,
      itemBuilder:(BuildContext context,int index){
        return Dismissible(key: Key(todos[index]),
          child: Card(
            elevation: 4,
            margin: EdgeInsets.all(8),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadiusDirectional.circular(8)
            ),
          child: CheckboxListTile(
            title: Text(todos[index]),
            controlAffinity: ListTileControlAffinity.leading,
            activeColor: Colors.redAccent,
            value: checkedValue,onChanged: (newValue){
              setState(() {
                checkedValue = newValue!;
              });
          },
            ),
        ),);
      },
      )
    );

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

ok, so you declared a List to store your items, and a bool checkedValue to store whether your value items are checked or not.

But the obvious problem is that you only declare ONE bool but you have a possibly infinite number of items. What do you think is gonna happen when you change the one value??

The easiest way to fix this is to simply make the bool a list, like this:

List<bool> checkedValues = [];

then whenever you add a new item to your list of items, you need to add false to the list of checkedValues.

todos.add("Item1");
todos.add("Item2");
todos.add("Item3");
todos.add("Item4");
checkedValues.addAll([false, false, false, false]);

Then, you just change the value and onChanged properties like this:

value: checkedValues[index],onChanged: (newValue){
              setState(() {
                checkedValues[index] = newValue!;
              });

There is one small problem with this approach, which is that if you forget to add a bool every time you add a todo item, your app will not work. To fix this, you could write a class that holds both a string and a bool value and just have a list of that.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading