vendredi 8 juillet 2022

Flutter - how to implement checkboxes with Bloc

I am trying to create a list with checkboxes with a Select All option at the top. The current code works fine with the SelectAll/De-selectAll.

The problem is, even the individual checkboxes are working as a SelectAll checkbox. Meaning, any checkbox when selected/de-selected, selects/de-selects all other checkboxes.

HomePage:

    import 'dart:convert';
    import 'dart:io';
    import 'package:flutter_bloc/flutter_bloc.dart';
    import 'package:http/http.dart' as http;
    import 'package:boost/resources/toast_display.dart';
    import 'package:flutter/material.dart';
    import 'package:internet_connection_checker/internet_connection_checker.dart';
    import '../models/meetings.dart';
    import '../models/test.dart';
    import '../resources/app_strings.dart';
    import '../utils/accesss_token_manager.dart';
    import '../utils/app_urls.dart';
    import '../utils/constants.dart';
    import '../utils/routes.dart';
    import '../widgets/cubit/notification_cubit.dart';

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

      @override
      State<NewHomeScreen> createState() => _NewHomeScreenState();
    }

    class _NewHomeScreenState extends State<NewHomeScreen> {
      Meeting meeting = Meeting();
      List<WeeklyMeeting> weeklyMeetingsList = [];
      bool isSelectAll = false;
      bool isMeetingSelected = false;
      final allowNotifications = NotificationSetting(title: 'Allow Notifications');

      final notifications = [
        NotificationSetting(title: 'Show Message'),
        NotificationSetting(title: 'Show Group'),
        NotificationSetting(title: 'Show Calling'),
      ];

      @override
      Widget build(BuildContext context) => Scaffold(
            appBar: AppBar(
              title: const Text('Test'),
            ),
            body: ListView(
              children: [
                buildToggleCheckbox(allowNotifications),
                const Divider(),
                ...notifications.map(buildSingleCheckbox).toList(),
              ],
            ),
          );

      Widget buildToggleCheckbox(NotificationSetting notification) => buildCheckbox(
          notification: notification,
          onClicked: () {
            BlocProvider.of<NotificationSelectionCubit>(context)
                .toggleAllowNotificationSelection();
          });


      Widget buildSingleCheckbox(NotificationSetting notification) => buildCheckbox(
            notification: notification,
            onClicked: () {
              BlocProvider.of<NotificationSelectionCubit>(context)
                  .toggleIndividualNotificationSelection();
            },
          );

      Widget buildCheckbox({
        required NotificationSetting notification,
        required VoidCallback onClicked,
      }) {
        return BlocBuilder<NotificationSelectionCubit, NotificationState>(
          builder: (context, state) {
            return ListTile(
              onTap: onClicked,

 /// stack is used only to give the checkboxes a radio button look, when a checkbox
     is selected it will look like a checked radio button, and when de-selected, it will
     look like an unselected radio button.

              leading: Stack(children: [
                Visibility(
                  visible: state.value,
                  child: Checkbox(
                      shape: const CircleBorder(),
                      value: !state.value,
                      onChanged: (val) {
                        onClicked();
                      }),
                ),
                Visibility(
                  visible: !state.value,
                  child: IconButton(
                    onPressed: () {
                      onClicked();
                    },
                    icon: const Icon(Icons.radio_button_checked),
                  ),
                )
              ]),
              title: Text(
                notification.title,
                style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
            );
          },
        );
      }
    }

NotificationSelectionCubit class

        class NotificationSelectionCubit extends Cubit<NotificationState> {
      NotificationSelectionCubit()
          : super(NotificationState(value: false, allowNotification: false));
      final allowNotifications = NotificationSetting(title: 'Allow Notifications');

      final notifications = [
        NotificationSetting(title: 'Show Message'),
        NotificationSetting(title: 'Show Group'),
        NotificationSetting(title: 'Show Calling'),
      ];

      void toggleIndividualNotificationSelection() {
        for (var notification in notifications) {
          return emit(NotificationState(
              value: !state.value, allowNotification: state.allowNotification));
        }
      }

      void toggleAllowNotificationSelection() => emit(NotificationState(
          value: state.allowNotification,
          allowNotification: !state.allowNotification));
    }

And

    class NotificationState {
      bool value;
      bool allowNotification;
      NotificationState({required this.value, required this.allowNotification});
    }



Aucun commentaire:

Enregistrer un commentaire