group_button
flutter custom widget to make a group buttons.
included radio and checkbox buttons models.
getting started
follow these steps to use this package
add dependency
dependencies:
group_button: ^2.4.1 #latest version
add import package
import 'package:group_button/group_button.dart';
easy to use
simple example of use groupbutton
put this code in your project at an screen and learn how it works
groupbutton(
isradio: false,
spacing: 10,
onselected: (index, isselected) => print('$index button is selected'),
buttons: ["12:00", "13:00", "14:30", "18:00", "19:00", "21:40"],
)
customize
in order to customize your buttons inside groupbutton you can use code below
this code includes all the fields used in groupbutton
groupbutton(
spacing: 5,
isradio: false,
direction: axis.horizontal,
onselected: (index, isselected) =>
print('$index button is ${isselected ? 'selected' : 'unselected'}'),
buttons: ["dart","kotlin","java","swift","objective-c","python","js"],
selectedbuttons: [0, 1], /// [list<int>] after 2.2.1 version
selectedtextstyle: textstyle(
fontweight: fontweight.w600,
fontsize: 16,
color: colors.red,
),
unselectedtextstyle: textstyle(
fontweight: fontweight.w600,
fontsize: 14,
color: colors.grey[600],
),
selectedcolor: colors.white,
unselectedcolor: colors.grey[300],
selectedbordercolor: colors.red,
unselectedbordercolor: colors.grey[500],
borderradius: borderradius.circular(5.0),
selectedshadow: <boxshadow>[boxshadow(color: colors.transparent)],
unselectedshadow: <boxshadow>[boxshadow(color: colors.transparent)],
)
examples
you can check more examples of using this package here
attributes
| attribute | annotation |
|---|---|
| buttons | [string] list that will be displayed on buttons in the [groupbutton] |
| selectedbuttons | [list] that will be set initial selected buttons in the [groupbutton] when [isradio] is false |
| selectedbutton | [int] that will be set initial selected button in the [groupbutton] when [isradio] is true |
| onselected | callback [function] works by clicking on a group elementreturn int [index] of selected button and [isselected] if [isradio] = false |
| isradio | bool variable for switching between modes [chackbox] and [radio]if the [isradio] = true, only one button can be selectedif the [isradio] = false, you can select several at once |
| direction | the direction of arrangement of the buttons in [groupbutton] |
| spacing | the spacing between buttons inside [groupbutton] |
| selectedtextstyle | [textstyle] of text of selected button(s) |
| unselectedtextstyle | [textstyle] of text of unselected buttons |
| selectedcolor | background [color] of selected button(s) |
| unselectedcolor | background [color] of unselected buttons |
| selectedbordercolor | border [color] of selected button(s) |
| unselectedbordercolor | border [color] of unselected buttons |
| borderradius | [borderradius] of buttonshow much the button will be rounded |
| selectedshadow | list of selected button(s) [boxshadow] |
| unselectedshadow | list of unselected buttons [boxshadow] |
| maingroupalignment | how the buttons should be placed in the main axis in a layout [maingroupalignment] |
| crossgroupalignment | how the buttons should be placed along the cross axis in a layout [crossgroupalignment] |
| grouprunalignment | how the button runs themselves should be placed the cross axis in a layout [grouprunalignment] |
for help getting started with flutter, view online documentation, which offers tutorials, samples, guidance on mobile development, and a full api reference.
Comments are closed.