In this chapter, we will talk about Switch and Checkbox.

Radio buttons (Switch)

Because buttons are stateful, it is important to create stateful templates when creating templates (using the STF shortcut), as well as check buttons

However, the buttons themselves do not store the current selected state, so their selected state is managed by the parent component. But when you click it will trigger their onChange function, where we can handle the code logic.

The source code example

Constructors are as follows:

const Switch({
	Key key,
	@required this.value,
	@required this.onChanged,
	this.activeColor,
	this.activeTrackColor,
	this.inactiveThumbColor,
	this.inactiveTrackColor,
	this.activeThumbImage,
	this.inactiveThumbImage,
	this.materialTapTargetSize,
	this.dragStartBehavior = DragStartBehavior.start,
})
Copy the code

Value and onChange are mandatory attributes

Attribute interpretation

value

The current status of the button is selected or unselected, and the value is true or false

onChanged

The execution logic of the code when a button changes state

ActiveColor, activeTrackColor

Both properties show the color of the button when it is selected

ActiveColor displays the color of the button activeTrackColor displays the color inside the button

Code examples:

class _CategoryPageState extends State<CategoryPage> { bool _switchSelected = true; @override Widget Build (BuildContext Context) {return Center(child: Column(children: <Widget>[Switch(value: _switchSelected, // Current status, onChanged mandatory: SetState (() {_switchSelected = value;});}, activeColor: color.red, // The color of the selected button, Default is blue activeTrackColor: Colors, yellow, / / selected after the color of the button on the inside),],),); }}Copy the code

Operation effect:

InactiveThumbColor, inactiveTrackColor

Represents the color of a button when the button is not selected

Code examples:

class _CategoryPageState extends State<CategoryPage> { bool _switchSelected = true; @override Widget Build (BuildContext Context) {return Center(child: Column(children: <Widget>[Switch(value: _switchSelected, // Current status, onChanged mandatory: SetState (() {_switchSelected = value;});}, activeColor: color.red, Default is blue activeTrackColor: Colors, yellow, after / / on the color of the button inside inactiveThumbColor: Colors, pink, / / not selected the color of the button inactiveTrackColor: Colors, green, / / / / not selected the color of the button on the inside),,,); }}Copy the code

Operation effect:

ActiveThumbImage, inactiveThumbImage

The image used on the thumb of the switch when the switch is on or off. If the switch is created with switch, it is ignored.

Generally not used, do not give too much introduction

materialTapTargetSize

Configures the minimum size of the hit target, with parameters being padded, shrinkWrap, and Value

Code examples:

class _CategoryPageState extends State<CategoryPage> { bool _switchSelected = true; @override Widget Build (BuildContext Context) {return Center(child: Column(children: <Widget>[Switch(value: _switchSelected, // Current status, onChanged mandatory: SetState (() {_switchSelected = value;});}, activeColor: color.red, Default is blue activeTrackColor: Colors, yellow, after / / on the color of the button inside inactiveThumbColor: Colors, pink, / / not selected the color of the button inactiveTrackColor: Colors, green, / / / / not selected the color of the button inside materialTapTargetSize: materialTapTargetSize. ShrinkWrap, // Set the minimum size of the hit target, with parameters being padded and shrinkWrap // activeThumbImage The image being used on the thumb of the switch when the switch is turned on. Ignore it. (,],),); }}Copy the code

Operation effect:

Check box (Checkbox)

As with the checkbox, you need to create a stateful template (using the STF shortcut)

The source code example

Constructors are as follows:

const Checkbox({
	Key key,
	@required this.value,
	this.tristate = false,
	@required this.onChanged,
	this.activeColor,
	this.checkColor,
	this.materialTapTargetSize,
})
Copy the code

As with checkboxes, value and onChange are mandatory properties

Attribute interpretation

Some of the properties are the same as those of a checkbox, so I won’t go over them. Here’s an example:

class _CategoryPageState extends State<CategoryPage> {
  bool _checkboxSelected = true; //维护复选框状态
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Checkbox(
            value: _checkboxSelected,
            activeColor: Colors.red, //选中时的颜色
            checkColor:Colors.green,  //选中时里面对号的颜色
            onChanged: (value) {
              setState(() {
                _checkboxSelected = value;
              });
            },
          )
        ],
      ),
    );
  }
}
Copy the code

Operation effect:

tristate

This property indicates whether the Checkbox is tri-state and its default value is false. In this case, the Checkbox has two states: “checked” and “unchecked”, and the corresponding value is true and false. If tristate is true, value adds a status NULL to the value.

Summary: Switch and Checkbox, while they are associated with state (checked or not), do not maintain state themselves, but require a parent component to manage state. You can define methods in the parent component to handle selected and unchecked code logic

G_G