|
// The click Radio Item Example |
|
class SizeContainer extends StatefulWidget{ |
|
final String text; |
|
final bool isSelect; |
|
SizeContainer({this.text, this.isSelect}); |
|
@override |
|
State<StatefulWidget> createState() => SizeContainerState(); |
|
|
|
} |
|
|
|
class SizeContainerState extends State<SizeContainer>{ |
|
|
|
@override |
|
Widget build(BuildContext context) { |
|
return |
|
Container( |
|
padding: EdgeInsets.all(10), |
|
decoration: BoxDecoration( |
|
borderRadius: BorderRadius.all(Radius.circular(10)), |
|
color: widget.isSelect ? Colors.black : Colors.white |
|
), |
|
child: Text(widget.text, style: TextStyle(color: widget.isSelect ? Colors.white : Colors.black, fontSize: 16)), |
|
); |
|
} |
|
|
|
} |
|
|
|
// Custom Radio Group |
|
class RadioGroup extends StatefulWidget{ |
|
@override |
|
State<RadioGroup> createState() => RadioGroupState(); |
|
|
|
} |
|
|
|
class RadioGroupState extends State<RadioGroup>{ |
|
|
|
int selectPosition = 0; |
|
@override |
|
Widget build(BuildContext context) { |
|
return Container( |
|
child:Row( |
|
children:<Widget>[ |
|
GestureDetector(onTap: (){ |
|
setState(() => selectPosition = 1); |
|
}, |
|
child:SizeContainer(text: "Click 1", isSelect: selectPosition == 1) |
|
), |
|
GestureDetector(onTap: (){ |
|
setState(() => selectPosition = 2); |
|
}, |
|
child:SizeContainer(text: "Click 2", isSelect: selectPosition == 2) |
|
), |
|
GestureDetector(onTap: (){ |
|
setState(() => selectPosition = 3); |
|
}, |
|
child:SizeContainer(text: "Click 3", isSelect: selectPosition == 3) |
|
), |
|
GestureDetector(onTap: (){ |
|
setState(() => selectPosition = 4); |
|
}, |
|
child:SizeContainer(text: "Click 4", isSelect: selectPosition == 4) |
|
), |
|
GestureDetector(onTap: (){ |
|
setState(() => selectPosition = 5); |
|
}, |
|
child:SizeContainer(text: "Click 5", isSelect: selectPosition == 5) |
|
), |
|
] |
|
) |
|
); |
|
|
|
} |
|
|
|
} |