Flutter Checkbox Not Working In Statelesswidget
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
),
);
})));
}
}
Post a Comment for "Flutter Checkbox Not Working In Statelesswidget"