6 C
New York
Thursday, January 26, 2023

Working with dynamic Checkboxes in Flutter

This tutorial walks you through a complete example of using dynamic checkboxes in Flutter.


Which widgets you should use?Advertisements

Example Preview

We’ll make a small Flutter app that displays a list of checkboxes based on a list of available hobbies (these things are hard-coded but you can fetch your own data from an API or a database). The user can choose their hobbies and the results will be reflected immediately on the screen.

No more talking, let’s dive into the code.

The Code

1. Create a new Flutter project:

flutter create kindacode_example

AdvertisementsThe project name is totally up to you.

2. Remove all the default code in the lib/main.dart file and add the following:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return const MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  _HomePageState createState() => _HomePageState();

class _HomePageState extends State<HomePage> {
  // Generate a list of available hobbies here
  List<Map> availableHobbies = [
    {"name": "Foobball", "isChecked": false},
    {"name": "Baseball", "isChecked": false},
      "name": "Video Games",
      "isChecked": false,
    {"name": "Readding Books", "isChecked": false},
    {"name": "Surfling The Internet", "isChecked": false}

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(20),
              Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            const Text(
              'Choose your hobbies:',
              style: TextStyle(fontSize: 24),
            const SizedBox(height: 10),
            const Divider(),
            const SizedBox(height: 10),

            // The checkboxes will be here
                children: availableHobbies.map((hobby) {
              return CheckboxListTile(
                  value: hobby["isChecked"],
                  title: Text(hobby["name"]),
                  onChanged: (newValue) {
                    setState(() {
                      hobby["isChecked"] = newValue;

            // Display the result here
            const SizedBox(height: 10),
            const Divider(),
            const SizedBox(height: 10),
              children: availableHobbies.map((hobby) {
                if (hobby["isChecked"] == true) {
                  return Card(
                    elevation: 3,
                    color: Colors.amber,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(hobby["name"]),

                return Container();

3. Launch the app by executing:

flutter run

Wrap Up


We’ve made a simple mobile app to learn about implementing multiple dynamic checkboxes and the CheckboxListTile widget in Flutter. If you’d like to explore more new things in Flutter and Dart, take a look at the following articles:

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.


Related Articles


Please enter your comment!
Please enter your name here

Latest Articles