Checkbox in the Flutter

Question

I’m trying to create a List, which shows the necessary ingredients, and next to them, a Checkbox, simulating what the user took or not. I tried Checkbox, Checkboxlisttile, but I have no idea what to do. The checkbox only needs to change from 'unchecked' to 'checked'. I’m using a Statefulwidget.

 class CheckboxClasse extends StatefulWidget {
      @override
      _CheckboxState createState() => _CheckboxState();
    }

    class _CheckboxState extends State<CheckboxClasse> {
      bool isCheck = false;
      List<Meal> meal;

      @override
      Widget build(BuildContext context) {
        return ListTile(
            title: new Row(children: <Widget>[
          new CheckboxListTile(
            value: isCheck,
            onChanged: (bool newValue) {
              setState(() {
                isCheck = newValue;
              });
            },
            activeColor: Colors.pink,
            checkColor: Colors.green,
          ),
        ]));
      }
    }

Answer 1

I recommend you study the documentation of the components Listtile and Checkboxlisttile to better understand how they work. Remember that they were created only to facilitate the implementation of useful components that are used in numerous apps. In his case it is noted that he did not perform the basic tests of each one alone exploiting its properties.

No need to insert a CheckboxListTile within a ListTile. The CheckboxListTile was already created to show the check, he was born for it. In this example all you need is it.

I have put together an example that can be analyzed by you in order to understand how it works.

Example

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final itens = <Map>[
    {"nome": "Arroz", "check": false},
    {"nome": "Feijão", "check": false},
    {"nome": "Macarrão", "check": false},
    {"nome": "Leite", "check": false},
  ];
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: itens.length,
      itemBuilder: (ctx, index) {
        return CheckboxListTile(
          title: Text(itens[index]["nome"]),
          subtitle: Text(
            "Este item ${itens[index]["check"] ? "" : "não"} está selecionado",
          ),
          value: itens[index]["check"],
          onChanged: (newValue) {
            setState(() {
              itens[index]["check"] = newValue;
            });
            print(
              "Mudou check da palavra ${itens[index]["nome"]} para: $newValue",
            );
          },
        );
      },
    );
  }
}

This code can be copied and pasted on Dartpad. I recommend that you use it a lot to create examples and understand the behaviors of each component that is already offered ready to use.

Answer 2

I managed to use Checkbox according to your tips, I really appreciate it. Now I just need to call the class in the widget I want, but the error in Card(). Is it because of a stateful being and the class I’m going to make Checkbox call is stateless?

Follows the code.

//Imports

class Mealdetailscreen extends Statelesswidget { @override Widget build(Buildcontext context) { final Meal = Modalroute.of(context).settings.Arguments as Meal;

return Scaffold(
    appBar: AppBar(
      title: Text(meal.title),
    ),
    body: SingleChildScrollView(
        child: Column(
        children: <Widget>[
          Container(
            height: 300,
            width: double.infinity,
            child: Image.network(
              meal.imageUrl,
              fit: BoxFit.cover,
            ),
          ),
          Container(
            margin: EdgeInsets.symmetric(vertical: 10),
            child: Text('Ingredientes', style: Theme.of(context).textTheme.title),
          ),
          Container(
            width: double.maxFinite,
            height: 400,
            child: ListView.builder(
              itemCount: meal.ingredientes.length,
              itemBuilder: (context, index){
              return Card(
                CheckboxClasse(),  //classe Stateful
                child: Text(meal.ingredientes[index], 
                style: TextStyle(fontSize: 18)),
                color: Colors.red[50],
                elevation: 5,
               );
            }),
          ),

            ],
          ),
        ));
  }
}
//-----------------------------------------------------------------------

class CheckboxClasse extends StatefulWidget {
  @override
  _CheckboxState createState() => _CheckboxState();
}

class _CheckboxState extends State<CheckboxClasse> {
  // void changeBox(bool valorzim) => setState(() => changedBox = valorzim);
  final List<Meal> meal = new List<Meal>();
  bool changedBox = false;

  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      value: changedBox,
      onChanged: (bool valCheck) {
        setState(() {
          changedBox = valCheck;
        });
      },
    );
  }
}