Shutter start from zero 006 radio switches and checkboxes

In the usual project preparation work , We use radio switches and checkboxes more often , Let's briefly introduce the principle of radio switch and check box today , Later, we will introduce the customization and encapsulation of radio switches and check boxes in detail .

Material Component library provides Material Style radio switch Switch And check boxes Checkbox, Although they are all inherited from StatefulWidget, But they themselves don't save the currently selected state , The selected state is managed by the parent component . When Switch or Checkbox When clicked , It will trigger them onChanged Callback , We can handle the selected state change logic in this callback . Here's a simple example

class _MyHomePageState extends State<MyHomePage> {  bool _swithSelected = true; //  The status of the radio switch , We select by default   bool _checkBoxSelected = true; //  Check box status , We select by default   @override  Widget build(BuildContext context) {    return Scaffold(        appBar: AppBar(          title: Text(widget.title),        ),        body: Column(          mainAxisAlignment: MainAxisAlignment.start,          crossAxisAlignment: CrossAxisAlignment.center,          children: [            Switch(              value: _swithSelected, //  current state               onChanged: (value) {                // State monitoring ,  Rebuild status                 setState(() {                  _swithSelected = value;                });              },            ),            Checkbox(              value: _checkBoxSelected,              activeColor: Colors.blue,      // Color when selected               onChanged: (value) {                setState(() {                  _checkBoxSelected = value!;                });              },            ),          ],        ));  }}

The operation effect is shown below

In the next section, we will solve Input box and form