[5] use of the radio self-Flutter, check buttons and switches

5 using the radio, check buttons and switches

1. Source Code

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool switchValue1 = true;
  bool switchValue2 = true;
  bool checkValue1 = true;
  bool checkValue2 = true;
  int radioValue = 1;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Switch(value: switchValue1,
                  onChanged:(value){
                    setState(() {
                      switchValue1 = value;
                    });
                  }
              ),
              SwitchListTile(
                  title: Text("第二个开关"),
                  value: switchValue2,
                  onChanged:(value){
                    setState(() {
                      switchValue2 = value;
                    });
                  }
              ),
              Checkbox(
                  checkColor: Colors.yellowAccent,
                  activeColor: Colors.grey,
                  value: checkValue1,
                  onChanged: (value) {
                    setState(() {
                      checkValue1 = value;
                    });
                  }
              ),
              CheckboxListTile(
                  title: Text("第二个复选按钮"),
                  value: checkValue2,
                  onChanged: (value) {
                    setState(() {
                      checkValue2 = value;
                    });
                  }
              ),
              Radio(
                  value: 1,
                  groupValue: radioValue,
                  onChanged: (value){
                    setState(() {
                      radioValue = value;
                    });
                  }
              ),
              RadioListTile(
                  title: Text("第二个单选按钮"),
                  value: 2,
                  groupValue: radioValue,
                  onChanged: (value){
                    setState(() {
                      radioValue = value;
                    });
                  }
              ),
              RadioListTile(
                  title: Text("第三个单选按钮"),
                  value: 3,
                  groupValue: radioValue,
                  onChanged: (value){
                    setState(() {
                      radioValue = value;
                    });
                  }
              )
            ],
          ),
        )
      )
    );
  }
}

2. Explain the source code

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  //设置开关、单选、复选按钮的默认值
  bool switchValue1 = true;
  bool switchValue2 = true;
  bool checkValue1 = true;
  bool checkValue2 = true;
  int radioValue = 1;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              //开关 value值为true 即选中状态
              Switch(value: switchValue1,
              	  //回调，改变状态
                  onChanged:(value){
                    setState(() {
                      switchValue1 = value;
                    });
                  }
              ),
              //带文字开关 value值为true 即选中状态
              SwitchListTile(
                  title: Text("第二个开关"),
                  value: switchValue2,
                  onChanged:(value){
                    setState(() {
                      switchValue2 = value;
                    });
                  }
              ),
              //复选按钮 value值为true 即选中状态
              Checkbox(
              	  //选中的✔ 颜色
                  checkColor: Colors.yellowAccent,
                  //选中的框框背景颜色
                  activeColor: Colors.grey,
                  value: checkValue1,
                  onChanged: (value) {
                    setState(() {
                      checkValue1 = value;
                    });
                  }
              ),
              //带文字的复选按钮 value值为true 即选中状态
              CheckboxListTile(
                  title: Text("第二个复选按钮"),
                  value: checkValue2,
                  onChanged: (value) {
                    setState(() {
                      checkValue2 = value;
                    });
                  }
              ),
              //单选按钮 value值=groupValue值 即选中状态
              Radio(
                  value: 1,
                  groupValue: radioValue,
                  onChanged: (value){
                    setState(() {
                      radioValue = value;
                    });
                  }
              ),
              //带文字的单选按钮 value值=groupValue值 即选中状态
              RadioListTile(
                  title: Text("第二个单选按钮"),
                  value: 2,
                  groupValue: radioValue,
                  onChanged: (value){
                    setState(() {
                      radioValue = value;
                    });
                  }
              ),
              //带文字的单选按钮 value值=groupValue值 即选中状态
              RadioListTile(
                  title: Text("第三个单选按钮"),
                  value: 3,
                  groupValue: radioValue,
                  onChanged: (value){
                    setState(() {
                      radioValue = value;
                    });
                  }
              )
            ],
          ),
        )
      )
    );
  }
}

3. renderings