Fluent custom radio control

Time:2021-9-3

In the development of fluent application, we often encounter various radio effects. Although the radio component is officially provided, it can not meet our actual development needs, so we often need to customize the control to meet the usual development needs. The following describes the radio options used in normal development:

Custom segmentbar

You will not be unfamiliar with the segmentation component. It mainly realizes multiple segmentation and single selection function. The effect is shown in the figure below.
Fluent custom radio control
Don’t say much, just go to the code:

class SegmentBarView extends StatefulWidget {

  List<String> datas;
  Function(String) onSelected;
  int defaultIndex=0;
  SegmentBarView({@required this.datas, this.onSelected,this.defaultIndex});

  @override
  _SegmentBarViewState createState() => _SegmentBarViewState();
}

class _SegmentBarViewState extends State<SegmentBarView> {

  List<String> sdkLists;
  String selectItem;

  @override
  void initState() {
    super.initState();
    sdkLists = widget.datas;
    selectItem=sdkLists[widget.defaultIndex];
  }
  
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Container(
        padding: EdgeInsets.only(left: 10, right: 10),
        child: Row(
          children: _buildSegments(sdkLists),
        ),
      ),
    );
  }

  _buildSegments(List list) {
    if(list == null) {
      return Container();
    }
    List<Widget> items = List();
    list.forEach((item){
      if(item != null) {
        items.add(Container(
          padding: EdgeInsets.only(top: 8,bottom: 8),
          child: _buildItem(item),
        ));
      }
    });
    return items;
  }

  _buildItem(String item) {
    if(selectItem == item) {
      return Container(
        height: 34,
        child: RaisedButton(
          shape:  RoundedRectangleBorder(
//            borderRadius: BorderRadius.circular(15)
          ),
          color: Color(0xFF00A6DE),
          onPressed: (){

          },
          child: Text(item,style: TextStyle(color: Colors.white),),
        ),
      );
    }else {
      return Container(
        height: 34,
        child: OutlineButton(
          borderSide: BorderSide(color: Color(0xFFcccccc),width: 0.5),
          onPressed: (){
            updateGroupValue(item);
          },
          child: Text(item),
        ),
      );

    }
  }

  updateGroupValue(String item) {
    if(item == selectItem) {
      return;
    }else {
      selectItem = item;
      widget.onSelected(selectItem);
      setState(() {
      });
    }
  }
  
}

When using, you only need to pass in the corresponding parameters according to the constructor.

Customize radio

Of course, you can also encounter the following buttons with rounded corners during development. The effects are as follows.
Fluent custom radio control
How to do this effect? The simplest is hard coding. Use two buttons and click to switch. The code is as follows:

//Only two radio buttons are supported
class RadioGroupWidget extends StatefulWidget {

  List<String> datas ;
  Function(String) onSelected;
  double radioWidth=80;
  double radioHeight=28;
  RadioGroupWidget({@required this.datas,@required this.onSelected,this.radioWidth, this.radioHeight,});

  @override
  State<StatefulWidget> createState() {
    return RadioGroupState();
  }
}

class RadioGroupState extends State<RadioGroupWidget> {

  var chooseStr;
  int choosed=1;
  Color choosedBgColor=Colors.blue;
  Color choosedCornerColor=Colors.blue;
  Color choosedTxtColor=Colors.white;
  Color defaultBgColor=Colors.white;
  Color defaultCornerColor=Colors.grey;
  Color defaultTxtColor=Colors.grey;

  @override
  void initState() {
    super.initState();
    chooseStr=widget.datas[0];
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        GestureDetector(
          onTap: (){
            choosed=1;
            chooseStr=widget.datas[0];
            setState(() {});
            widget.onSelected(chooseStr);
          },
          child: Container(
            height: widget.radioHeight,
            width: widget.radioWidth,
            decoration: BoxDecoration(
              color: choosed==1?choosedBgColor:defaultBgColor,
              borderRadius: BorderRadius.only(topLeft: Radius.circular(15),bottomLeft: Radius.circular(15)),
              border:  Border.all(width: 1, color: choosed==1?choosedCornerColor:defaultCornerColor),
            ),
            child: Center(child: Text(widget.datas[0],style: TextStyle(color: choosed==1?choosedTxtColor:defaultTxtColor,fontSize: 12))),
          )
        ),
        GestureDetector(
          onTap: (){
            choosed=2;
            chooseStr=widget.datas[1];
            setState(() {});
            widget.onSelected(chooseStr);
          },
          child: Container(
            height: widget.radioHeight,
            width: widget.radioWidth,
            decoration: BoxDecoration(
              color: choosed==2?choosedBgColor:defaultBgColor,
              borderRadius: BorderRadius.only(topRight: Radius.circular(15),bottomRight: Radius.circular(15)),
              border:  Border.all(width: 1, color: choosed==2?choosedCornerColor:defaultCornerColor),
            ),
            child: Center(child: Text(widget.datas[1],style: TextStyle(color: choosed==2?choosedTxtColor:defaultTxtColor,fontSize: 12))),
          )
        )
      ],
    );
  }


}

In actual use, you can pass in parameters.

List < string > lineradios = ['real-time flow', 'cumulative flow'];
RadioGroupWidget(radioWidth:80,radioHeight:28,datas: lineRadios, onSelected: (value){
                 print('_buildChartTitle value: '+value.toString());
              },)

Recommended Today

Blog Garden Background page dynamic effects

1. To set animation, you must first apply for permission 1.1 first enter [my blog park] and enter [settings] in [management] 1.2 find [blog sidebar announcement] and click [apply for JS permission] 1.3 write the content of application JS permission (examples are as follows) Dear blog administrator: Can you open JS permission for me? I […]