Home > OS >  How can I add a checkbox for one item in flutter
How can I add a checkbox for one item in flutter

Time:12-06

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

CodePudding user response:

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.

  • Related