Flutter Checkbox Not Working In Statelesswidget

Here is my class class Home extends StatelessWidget { and the Checkbox goes here. @override Widget build(BuildContext context) { return Scaffold( body: Center(

Solution 1:

You need to use a StatefulWidget since you're dealing with changing values. I've provided an example:

classMyAppOneextendsStatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class_MyAppStateextendsState<MyAppOne> {
  bool_myBoolean=false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Checkbox(
        value: _myBoolean,
        onChanged: (value) {
          setState(() {
            _myBoolean = value; // rebuilds with new value
          });
        },
      ),
    );
  }
}

Solution 2:

One way you can achieve this is using the provider package. I tried to create the shortest possible app to show how you can use it. The neat part is that you get to keep your widget stateless.

import'package:flutter/material.dart';
import'package:flutter/foundation.dart';
import'package:provider/provider.dart';

voidmain() {
  runApp(constMyApp());
}

classMyAppextendsStatelessWidget {
  constMyApp({Key? key}) : super(key: key);

  @overrideWidgetbuild(BuildContext context) {
    returnMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: constHome(),
    );
  }
}

classHomeextendsStatelessWidget {
  constHome({Key? key}) : super(key: key);

  @overrideWidgetbuild(BuildContext context) {
    returnScaffold(
      body: Center(
        child: ChangeNotifierProvider(
          create: (_) =>CheckboxProvider(),
          child: Consumer<CheckboxProvider>(
            builder: (context, checkboxProvider, _) =>Checkbox(
              value: checkboxProvider.isChecked,
              onChanged: (value) {
                checkboxProvider.isChecked = value ?? true;
              },
            ),
          ),
        ),
      ),
    );
  }
}

classCheckboxProviderwithChangeNotifier {
  bool _isChecked = false;

  bool get isChecked => _isChecked;

  setisChecked(bool value) {
    _isChecked = value;
    notifyListeners();
  }
}

It took me quite some time to understand the package but it is very useful and recommended if you want an easier way to manage state in your application. Here's a video from the Flutter team explaining how to use Provider. I would still recommend spending some time looking further into it.

P.S.: Don't forget to change the pubspec.yaml file.

Solution 3:

think of flutter like javascript and pass the position as a parameter to the medCheckedChanged function in the list builder. when the dart parser evaluates the expression or lambda function it will invoke the method with the position parameter as a value.

classtestWidget2extendsStatefulWidget {
    testWidget2({Key key}) : super(key: key);
    intnumberLines=50;
    List<bool> checkBoxValues = [];

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

 class_testWidget2StateextendsState<testWidget2> {
   _medCheckedChanged(bool value, int position) {
      setState(() => widget.checkBoxValues[position] = value);
  }

  @overridevoidinitState() {
  // TODO: implement initStatesuper.initState();
  inti=0;
   setState(() {
    while (i < widget.numberLines) {
    widget.checkBoxValues.add(false);
    i++;
   }
   });
  }

 @override
 Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
        child: ListView.builder(
            itemCount: widget.checkBoxValues.length,
            itemBuilder: (context, position) {
              return Container(
                height: MediaQuery.of(context).size.width * .06,
                width: MediaQuery.of(context).size.height * .14,
                alignment: Alignment(0, 0),
                child: Checkbox(
                  activeColor: Color(0xff06bbfb),
                  value: widget.checkBoxValues[position],
                  onChanged: (newValue) {
                    _medCheckedChanged(newValue, position);
                  }, //pass to medCheckedChanged() the position
                ),
              );
            })));
   }
 }