0

Estou tentando criar uma Lista, que mostra os ingredientes necessários, e ao lado deles, uma CheckBox, simulando o que o usuário pegou ou não. Tentei Checkbox, CheckboxListTile, mas não faço ideia do que fazer. O checkbox somente precisa mudar de 'não checado' para 'checado'. Estou usando um 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,
          ),
        ]));
      }
    }
3
  • Se entendi bem seu código tem pontos a serem pensados... O ListTile() foi criado para apresentar informações de um modo organizado e bonito e funciona bem. O CheckboxListTile() é uma variação do ListTile... entendendo isso, qual motivo te fez colocar um CheckboxListTile dentro de uma Row que por sua vez está dentro de um ListTile?... Tentou usar apenas o CheckboxListTile e preencher os atributos que ele possui? Commented 14/04/2020 às 0:13
  • Não tentei, mas vou tentar agora! É que eu estou tentando mostrar uma lista, que está em outra classe, mas não consigo chamar o 'meal.ingredientes', que é a lista que vai ter o checkbox do ladinho, tentei usar um '.ToList()' e '.ToString()', mas não faço ideia do que fazer... Commented 14/04/2020 às 13:03
  • Coloquei como resposta um exemplo de utilização de uma lista com um check e pode rodar ela no dartpad mesmo... diante do que você apresentou de código foi o que deu pra orientar... caso não seja suficiente, edite sua pergunta e coloque o código completo da aplicação e assim será possível analisar o que está acontecendo. Commented 14/04/2020 às 14:28

2 Respostas 2

1

Recomendo que estude a documentação dos componentes ListTile e CheckboxListTile para entender melhor como funcionam. Lembre-se que eles foram criados apenas para facilitar a implementação de componentes úteis que são utilizados em inúmeros apps. No seu caso nota-se que não realizou os testes básicos de cada um isoladamente explorando suas propriedades.

Não existe a necessidade de inserir um CheckboxListTile dentro de um ListTile. O CheckboxListTile já foi criado visando mostrar o check, ele nasceu pra isso. Neste seu exemplo tudo que precisa é dele.

Montei um exemplo que poderá ser analisado por você com intuito de entender seu funcionamento.

Exemplo

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

Este código pode ser copiado e colado no Dartpad. Recomendo que utilize muito ele para criar exemplos e entender os comportamentos de cada componente que já te é oferecido pronto para utilizar.

-1

Consegui usar o CheckBox segundo suas dicas, agradeço muito. Agora só preciso fazer a chamada da classe no Widget que eu quero, porém da erro no Card(). Será que é por causa de um ser Stateful e a classe que eu vou fazer chamada do Checkbox é Stateless?

Segue o código.

//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;
        });
      },
    );
  }
}
1
  • 1
    Se o problema da pergunta original foi resolvido sinalize como resposta válida. Como surgiu outra coisa que não é o principal perguntado abra uma nova pergunta. É importante ressaltar também que o Stack segue um padrão de foco em problemas específicos e não é recomendado que sejam feitas réplicas e tréplicas em um post, caso queira fazer algum comentário utilize os próprios comentário da pergunta ou da resposta. Procure sempre seguir as regras da plataforma para não receber votos negativos. Commented 15/04/2020 às 23:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .