checkbox with Inkwell

user_18296908 0
Viewed 80

I had working CheckboxListTile but i changed it to Checkbox to remove its spacing between Checkbox and Text. I wrapped it with Inkwell. My problem is i am not being able to get value of onChange:(bool? value) of checkbox which i need use it onTap method of Inkwell. below is code of onChange of checkbox and i want it to use it in onTap method of Inkwell. Please suggest how to do do this.

onChanged: (bool? value) {
                if (_allSelectedItems.length == correctAnswerList.length) {
                  myGroupValue = value ?? myGroupValue;
                  for (int i = 0; i < _allSelectedItems.length; i++) {
                    if (optionLength[index] == _allSelectedItems[i]) {
                      setState(() {
                        _allSelectedItems.remove(_allSelectedItems[i]);
                      });
                    }
                  }


                } else {
                  _selectedAnswers.clear();
                  myGroupValue = value ?? myGroupValue;

                  if (value == false) {
                    for (int i = 0; i < _allSelectedItems.length; i++) {
                      if (optionLength[index] == _allSelectedItems[i]) {
                        _allSelectedItems.remove(_allSelectedItems[i]);
                      }
                    }
                  } else {
                    _allSelectedItems.add(optionLength[index]);
                  }
                  setState(() {});
                }

                _initialList = _allSelectedItems;

                print(_initialList.length);
                
                _selectedAnswers.clear();
                for (var element in _allSelectedItems) {
                  _selectedAnswers.add(element);
                }
              },

CheckboxListTile

SizedBox(
                                                width:
                                                    getWidth(screenWidth, 6.5),
                                                child: Padding(
                                                    padding:
                                                        const EdgeInsets.only(
                                                            left: 0.0),
                                                    child: ListView.builder(
                                                        shrinkWrap: true,
                                                        itemCount:
                                                            optionLength.length,
                                                        itemBuilder:
                                                            (BuildContext
                                                                    context,
                                                                index) {
                                                          List<String>
                                                              listValues =
                                                              List.from(mySnapshot
                                                                          .docs[
                                                                      _counter
                                                                          .value]
                                                                  ['options']);

                                                          bool? myGroupValue =
                                                              checkSelected4CheckBox(
                                                                  mySnapshot,
                                                                  index);

                                                          List<String>
                                                              correctAnswerList =
                                                              List.from(mySnapshot
                                                                          .docs[
                                                                      _counter
                                                                          .value]
                                                                  [
                                                                  'correctAnswers']);

                                                          List selectedAnswers =
                                                              List.from(mySnapshot
                                                                          .docs[
                                                                      _counter
                                                                          .value]
                                                                  [
                                                                  'selectedAnswers']);

                                                          List
                                                              tempSelectedList =
                                                              List.from(mySnapshot
                                                                          .docs[
                                                                      _counter
                                                                          .value]
                                                                  [
                                                                  'selectedAnswers']);

                                                         
                                                          return StatefulBuilder(
                                                              builder: (
                                                            BuildContext
                                                                context,
                                                            StateSetter
                                                                setState,
                                                          ) {
                                                            return
                                                               
                                                                Padding(
                                                              padding:
                                                                  const EdgeInsets
                                                                          .only(
                                                                      left: 8.0,
                                                                      top: 0,
                                                                      bottom:
                                                                          0),
                                                              child: Transform
                                                                  .translate(
                                                                offset:
                                                                    const Offset(
                                                                        -16, 0),
                                                                child:
                                                                    CheckboxListTile(
                                                                  visualDensity: const VisualDensity(
                                                                      horizontal:
                                                                          VisualDensity
                                                                              .minimumDensity,
                                                                      vertical:
                                                                          VisualDensity
                                                                              .minimumDensity),
                                                                  //  selected: true,
                                                                  value:
                                                                      myGroupValue,
                                                                  controlAffinity:
                                                                      ListTileControlAffinity
                                                                          .leading,
                                                                  // selected: checkSelected4CheckBox(mySnapshot, index),
                                                                  dense: true,
                                                                  title: Transform
                                                                      .translate(
                                                                    offset:
                                                                        const Offset(
                                                                            -16,
                                                                            0),
                                                                    child: Text(
                                                                      listValues[
                                                                          index],
                                                                      style: Theme.of(
                                                                              context)
                                                                          .textTheme
                                                                          .bodySmall,

                                                                      //* to change Text color according to the selected use below
                                                                      // style: Theme.of(context).textTheme.bodySmall!.copyWith(
                                                                      //       color: (e == myGroupValue) ? containerHeader : radioUnSelectedColor,
                                                                      //     ),
                                                                    ),
                                                                  ),

                                                                  onChanged:
                                                                      (bool?
                                                                          value) {
                                                         
                                                                    if (_allSelectedItems
                                                                            .length ==
                                                                        correctAnswerList
                                                                            .length) {
                                                                      myGroupValue =
                                                                          value ??
                                                                              myGroupValue;
                                                                      for (int i =
                                                                              0;
                                                                          i < _allSelectedItems.length;
                                                                          i++) {
                                                                        if (optionLength[index] ==
                                                                            _allSelectedItems[i]) {
                                                                          setState(
                                                                              () {
                                                                            _allSelectedItems.remove(_allSelectedItems[i]);
                                                                          });
                                                                        }
                                                                      }
                                                         
                                                                    } else {
                                                                      _selectedAnswers
                                                                          .clear();
                                                                      myGroupValue =
                                                                          value ??
                                                                              myGroupValue;

                                                                      if (value ==
                                                                          false) {
                                                                        for (int i =
                                                                                0;
                                                                            i < _allSelectedItems.length;
                                                                            i++) {
                                                                          if (optionLength[index] ==
                                                                              _allSelectedItems[i]) {
                                                                            _allSelectedItems.remove(_allSelectedItems[i]);
                                                                          }
                                                                        }
                                                                      } else {
                                                         
                                                                        _allSelectedItems
                                                                            .add(optionLength[index]);
                                                                      }
                                                                      setState(
                                                                          () {});
                                                                    }

                                                                    _initialList =
                                                                        _allSelectedItems;
                                                                                                                             print(_initialList
                                                                        .length);
                                                                    _selectedAnswers
                                                                        .clear();
                                                                    for (var element
                                                                        in _allSelectedItems) {
                                                                      _selectedAnswers
                                                                          .add(
                                                                              element);
                                                                    }
                                                                  },
                                                                ),
                                                              ),
                                                            );

                                                           
                                                          });
                                                        })),
                                              ),
dart flutter
1 Answers

Just wrap the Checkbox into an IgnorePointer to passthrough tappings in the checkbox to the parent InkWell. Then ignore completely the Checkbox.onChange event and use the state itself as the checkbox value.

Check it out (Also live demo on DartPad)

Screenshot

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const checkboxCount = 4;
  final checkboxValue = <int, bool>{};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 120,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              for (var i = 0; i < checkboxCount; i++)
                InkWell(
                  onTap: () => setState(
                      () => checkboxValue[i] = !(checkboxValue[i] ?? false)),
                  child: SizedBox(
                    height: 32,
                    child: Row(
                      children: [
                        IgnorePointer(
                          child: SizedBox(
                            height: 16,
                            width: 32,
                            child: Checkbox(
                              checkColor: Colors.black,
                              value: checkboxValue[i] ?? false,
                              onChanged: (_) {},
                            ),
                          ),
                        ),
                        Expanded(
                          child: Text('Checkbox ${i + 1}'),
                        )
                      ],
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}
user_28283410
Related