Flutter controls -Radio and RadioListTile

Flutter control exercise demo address: Github

one Radio (Radio box)

Checkboxes in the flutter, like checkboxes, have no states of their own and must have states to change their values

1.1 attributes

• Value: The value of this Radio
• OnChanged: Callback when this radio is selected. The parameter is the value of this value
• GroupValue: If the value of the Radio is the same as the value of the groupValue, this Radio is selected and the other Settings are left unchecked
• ActiveColor: The selected color

Second, the RadioListTile (Dan)

2.1 attributes

• Value: The value of this Radio
• OnChanged: Callback when this radio is selected. The parameter is the value of this value
• GroupValue: If the value of the Radio is the same as the value of the groupValue, this Radio is selected and the other Settings are left unchecked
• ActiveColor: The selected color
• Title: The title, typically the Text
• Subtitle: The subtitle (below the title), typically Text
• IsThreeLine = false:// Whether the text is three lines
  • True: The subtitle cannot be null
  • False: If there is no subtitle, only one line. If there is a subtitle, only two lines
• Dense: Whether or not dense vertical
• Secondary: the control on the left
• Selected = false: Whether the color of text and icon is the activeColor color
• ControlAffinity = ListTileControlAffinity. Platform:
  • ListTileControlAffinity platform based on different platforms, to display the position of the dialog box
  • ListTileControlAffinity. Trailing: check on the right, title, in the secondary in the left
  • ListTileControlAffinity. Leading: check in the left, the title in the secondary on the right

1.2 demo pictures

1.3 code

Note that the parent control of RadioListTile is not allowed to select Row

import 'package:flutter/material.dart';

class RadioDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Radio and Radio RadioListTile"),
        centerTitle: true,
      ),
      body: RadioStateDemo(),
    );
  }
}

class RadioStateDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return RadioSDemo();
  }
}

class RadioSDemo extends State<RadioStateDemo> {
  String groupValue;
  String valueLiu;
  String valueZhang;
  String valueGuo;
  String valueLi;

  @override
  void initState() {
    super.initState();
    groupValue = "Andy Lau";
    valueLiu = "Andy Lau";
    valueZhang = Jacky Cheung;
    valueGuo = Aaron Kwok;
    valueLi = "Dawn";
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        SizedBox(
          height: 20,
        ),
        Text(
          "A: Radio", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), ), Row( mainAxisAlignment: MainAxisAlignment center, the children: "Widget > [Radio < String > (/ / this value value, the value of the Radio: ValueLiu, // callback when this radio is selected. The parameter is the value of this value onChanged: (value) {setState(() { groupValue = value; }); }, // If the value of the Radio is the same as the value of the groupValue, then the Radio is set to unselect groupValue: groupValue, // select the color activeColor: Color.red, // the size of the response gesture, Default is 48 * 48 / / MaterialTapTargetSize shrinkWrap water ripples in the middle / / MaterialTapTargetSize padded ripples On the top left materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, ), Radio( value: valueZhang, onChanged: (value) {setState(() {
                  groupValue = value;
                });
              },
              groupValue: groupValue,
              activeColor: Colors.red,
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
            Radio(
              value: valueGuo,
              onChanged: (value) {
                setState(() {
                  groupValue = value;
                });
              },
              groupValue: groupValue,
              activeColor: Colors.red,
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
            Radio(
              value: valueLi,
              onChanged: (value) {
                setState(() {
                  groupValue = value;
                });
              },
              groupValue: groupValue,
              activeColor: Colors.red,
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
          ],
        ),
        SizedBox(
          height: 40,
        ),
        Text(
          "Two: RadioListTile", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), the father), / / I don't know why the Row layout not temporarily don't know according to the Column (. / / mainAxisAlignment: mainAxisAlignment center, the children: <Widget>[RadioListTile<String>(title: Text(valueLiu), title: valueLiu), // If the callback is selected, bool if the callback is selected,trueSelect groupValue: groupValue, onChanged: _changed, // Select the color activeColor: Color. red, // Text, // selectedtrue: // If you do not set the color of the text, the color of the text is followed by the activeColor subtitle (below the title). The color of text follows activeColor subtitle: text ("Subtitle"), // Is it three lines of text // If it istrue: Subtitle cannot be null // If yesfalse: // If there is no subtitle, there is only one line. If there is a subtitle, there is only two lines.false, // Whether the dense vertical:false// secondary: Text();"secondary"), // whether the color of text and icon is the Selected color of activeColor:true,
              controlAffinity: ListTileControlAffinity.leading,
            ),
            RadioListTile<String>(
                title: Text(valueZhang),
                value: valueZhang,
                groupValue: groupValue,
                onChanged: _changed),
            RadioListTile<String>(
                title: Text(valueGuo),
                value: valueGuo,
                groupValue: groupValue,
                onChanged: _changed),
            RadioListTile<String>(
                title: Text(valueLi),
                value: valueLi,
                groupValue: groupValue,
                onChanged: _changed),
          ],
        )
      ],
    );
  }

  void _changed(value) {
    groupValue = value;
    setState(() {}); }}Copy the code