In the development of Flutter application, we often encounter various Radio effects. Although the Radio component is officially provided, it cannot meet our actual development requirements. Therefore, we often need to customize the control to meet our usual development requirements. The following is an introduction to the radio selection used in the usual development:

Custom SegmentBar

For segmented components, we are certainly not unfamiliar, mainly to achieve multiple segments, to achieve radio function, the effect is shown below.

Without further ado, go directly 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(() { }); }}}Copy the code

When used, you simply pass in the corresponding arguments to the constructor.

PS. If you are also willing to exchange and learn together, you can join the iOS Technology Exchange

The custom Radio

Of course, the following button with rounded corners can also be encountered in development, which looks like this.

The easiest way to do this is to hardcode two buttons and switch them when you click, as follows:

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))),))],); }}Copy the code

In practice, just pass in the parameter.

LineRadios = [' lineRadios ', 'lineRadios ']; RadioGroupWidget(radioWidth:80,radioHeight:28,datas: lineRadios, onSelected: (value){ print('_buildChartTitle value: '+value.toString()); },)Copy the code