Crear opciones Checkbox en Flutter con Dart

Tiempo de lectura: < 1 minuto

En este ejemplo voy a mostrar cómo crear un conjunto de opciones checkbox en Flutter en el lenguaje de programación Dart.

Para ello vamos a crear un componente que vamos a llamar en este caso CheckboxGroup. Este elemento o componente, tendrá sus propiedades y eventos para manejar la selección de opciones, y así, poder usarlo en cualquier vista o Widget.

class CheckboxGroup extends StatefulWidget {
  final List<String> options;
  final ValueChanged<List<String>> onChanged;

  CheckboxGroup({required this.options, required this.onChanged});

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

class _CheckboxGroupState extends State<CheckboxGroup> {
  List<String> _selectedOptions = [];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: widget.options.map((String value) {
        return CheckboxListTile(
          title: Text(value),
          value: _selectedOptions.contains(value),
          onChanged: (bool? checked) {
            setState(() {
              if (checked != null && checked) {
                _selectedOptions.add(value);
              } else {
                _selectedOptions.remove(value);
              }
              widget.onChanged(_selectedOptions);
            });
          },
        );
      }).toList(),
    );
  }
}

Ahora, en la vista MyApp, usaremos este componente CheckboxGroup que acabamos de crear como muestro a continuación.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Checkbox Ejemplo para DevCodeLight'),
        ),
        body: Center(
          child: CheckboxGroup(
            options: ['Opción 1', 'Opción 2', 'Opción 3'],
            onChanged: (selected) {
              print('Selected: $selected');
            },
          ),
        ),
      ),
    );
  }
}

Por último, observamos a continuación el resultado del ejemplo completo.

Espero que les sirva de ayuda. ¡Que tengan un feliz día!