AlertDialog with a CheckboxListTile in flutter

Question

I'm having some problems when I use a CheckboxListTile inside a AlertDialog. The problem is that when I try to check, the box doesn't work correctly. This is my code:

import 'package:flutter/material.dart';

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

class PadelApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner: false, //esto es para quitar el cartelito de debug
      title: 'Test',
      theme: ThemeData( primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget{
  //@override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>{

  var _formkey = GlobalKey<FormState>();

  var _lstgrupos = ['Group 1', 'Group 2'];
  List<String> _SelectedGroupsItems = [];
  String _SelectedGroups = 'Groups';
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Test')),

      body: Form(
        key: _formkey,
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: ListView(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Expanded(
                    child: ListTile(
                      title: Text(_SelectedGroups),
                      onTap: () => showDialog(
                        context: context,
                        barrierDismissible: true,
                        builder: (context) {
                          return AlertDialog(
                            title: Text("Choose a group"),
                            content: SingleChildScrollView(
                              child: Container(
                                width: double.infinity,
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: _lstgrupos.map((lst) => CheckboxListTile(
                                    title: Text(lst),
                                    value:_SelectedGroupsItems.contains(lst),
                                    onChanged: (value) {
                                      setState(() {
                                        if (value!) {
                                          if (!_SelectedGroupsItems.contains(lst)) {
                                            _SelectedGroupsItems.add(lst);
                                          }
                                        } else {
                                          if (_SelectedGroupsItems.contains(lst)) {
                                            _SelectedGroupsItems.add(lst);
                                          }
                                        }
                                      });
                                    },
                                  )).toList(),
                                ),
                              ),
                            ),
                            actions: <Widget>[
                              TextButton(
                                child: Text('Cerrar'),
                                  onPressed: ()=> Navigator.of(context).pop(),
                              )
                            ]
                          );
                        }
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

I have tried to modify in several ways but I realize that the problem is in "value" variable (in onChanged: (value)). This variable is always true or always false but doesn't change.

Thanks for your quick answer. How can I overlay it using a stack? I don't know what does it means, sorry. — zorro68, Oct 29 '21 at 12:00

score 0 · Accepted Answer · answered Oct 27 '21 at 13:57

0

You need surround your AlertDialog with StatefullBuilder Otherwise the setState does not rebuild the dialog Like this :

StatefulBuilder(
        builder: (context, setState) {
return AlertDialog(...)
})

answered Oct 27 '21 at 13:57

montauvergne

175
3
9

I have fixed it by wrapping the AlertDialog in the StatefulBuilder as you say. There was also a bug in the code: there are two .add, and one of them is a .remove. Thanks – zorro68 Oct 29 '21 at 13:16
I have modified the code like montauvergne said, but I have a little problem. I want that the text where i click before going to the alertdialog widget (in this line -> title: Text(_SelectedGroups)) change with the list of the groups selected each time. – zorro68 Nov 01 '21 at 13:29

AlertDialog with a CheckboxListTile in flutter

1 Answers1