ring_button_group 1.1.3 icon indicating copy to clipboard operation
ring_button_group: ^1.1.3 copied to clipboard

provide a configurable component to support a group of buttons displayed on a sized ring.

Ring Button Group #

This package provides a configurable component to support a group of buttons displayed on a sized ring.

Features #

Getting started #

flutter pub add ring_button_group

or manually add this to your package's pubspec.yaml file:

  ring_button_group: ^1.0.0

Now in your Dart code, you can use:

import 'package:ring_button_group/ring_button_group.dart';

Usage #

    width: 200, //set a width
    height: 200, //set a height, should be same with width
    child: RingButtonGroup(
      buttonNumber: 5, //total number of buttons in group
      icons: const [ //a list of icons displayed on button
        Icon(Icons.abc, color: Colors.white,),
        Icon(Icons.baby_changing_station, color: Colors.white,),
        Icon(Icons.cabin, color: Colors.white,),
        Icon(Icons.dangerous, color: Colors.white,),
        Icon(Icons.e_mobiledata, color: Colors.white,),
      type: RingButtonGroupType.MULTIPLE_SELECTABLE, // allow multiple select
      pressedIndex: const {1}, //default selected buttons index, start from 0
      shadowEffect: true,
      onPressed: (index, allSelected) {  },

RingButtonGroup Attributes #

Attribute Type Default Annotation
buttonNumber int total number of buttons in this group, must be greater than 1
pressedIndex Set {} a list of indexes of button which should be pressed when rendering, index starts from 0
onPressed OnPressedFunction? null async bool Function(int index, Set
disabled bool false navigation buttons of BottomBarWithSheet
buttonSize double 40 the size of button, it identifies the radius of the circle
toneColor Color Colors.blueAccent main color of the button
tintColor Color Colors.blueGrey button color while pressing down
activeColor Color Colors.lightBlueAccent button color after pressed
borderColor Color Colors.lightBlueAccent button border color
disableColor Color Colors.blueAccent disabled main color, when color same with toneColor, auto transform to grayscale
disableBorderColor Color Colors.lightBlueAccent disabled border color, when color same with borderColor, auto transform to grayscale
icons List null button icons list, while set, the list length must be same with buttonNumber
labels List null button label list, only works when icons is null, the list length must be same with buttonNumber
child Widget? null a child of ring button, common case is put a circle in the center for display purpose
shadowEffect bool false use a inner shadow effects in pressed/selected button
splitStrokeSize double 0.5 the width of line split the button, note that this is not the border of circle

RingButtonGroupType #

type description
PRESS_ONLY such type only allow press action, but will not stay in pressed/selected state
SINGLE_SELECTABLE only allow one of buttons stay in pressed/selected state, like a radio box
MULTIPLE_SELECTABLE allow multiple pressed like a checkbox

Example #

to /example folder.

you can find the example show in screenshot from file: ./example/lib/main/dart

Run example in your simulator or device

flutter run

Additional information #

when you using this ring button group, this widget should be contained by a SizedBox or similar widget with width and height properties, and must be a square - with same value in width and height, the widget itself is stretched.

pub points


unverified uploader

provide a configurable component to support a group of buttons displayed on a sized ring.

Repository (GitHub)
View/report issues


API reference


Icon for licenses.Apache-2.0 (LICENSE)




Packages that depend on ring_button_group