Description:

customtogglebuttons

Custom Toggle Buttons #
A custom ToggleButtons implementation that allows more flexibility than Flutter's inbuilt ToggleButtons.
Features #

Horizontal and Vertical Alignment support
Elevation support
More customization for each state (selected, disabled, unselected
Similar look and feel as Flutter Material CustomButtons

Getting started #
Add this dependency to your package's pubspec.yaml file:
dependencies:
...
customtogglebuttons: ^0.0.5
copied to clipboard
and install it by running the following in your command line:
flutter pub get
copied to clipboard
Now you can use this in your source file by adding the following import:
import 'package:customtogglebuttons/customtogglebuttons.dart';
copied to clipboard
Usage #
The simplest example is below, it creates a 2 icon set of toggle buttons that can be selected or unselected on each click.
Create a list of boolean values to store selected/unselected state:
List<bool> _isSelected = [false, false];
copied to clipboard
In your build method:
CustomToggleButtons(
isSelected: _isSelected,
children: <Widget>[
Icon(Icons.add),
Icon(Icons.remove),
],
onPressed: (index) {
setState(() {
_isSelected[index] = !_isSelected[index];
});
},
),
copied to clipboard
NOTE: The length of the bool List you pass in isSelected has to be the same as the length of the children list.
Examples #
The source code for all examples is available in the example/lib/main.dart file.
You can run the example app on your mobile device and have a look at each of the samples in action.

Default
Shows the default behaviour without any additional styling properties. When the width of the buttons is longer than the available width, the next buttons automatically wrap to the next line.

Vertical Alignment
Shows vertically aligned toggle buttons, and a sample with Text widgets.

Border Styling
Shows an example of borderless toggle buttons, and an example where the border width and color are set for selected and unselected states.

Color Styling
Shows colors set for the selected, unselected and disabled states. Also shows an example with a specified splash color.

Spacing and Elevation
Shows examples with spacing for horizontal and vertical alignment, and an example with elevation.

Additional Parameters #



Parameter
Type
Usage
Description
Required?




children
List<Widget>
children: <Widget>[...]
The toggle button widgets. These are typically Icon or Text widgets. Length of list must be equal to the length of isSelected list.
Yes


isSelected
List<bool>
isSelected: <bool>[...]
The corresponding selection state of each toggle button. Length of list must be equal to the length of children list.
Yes


onPressed
void Function(index)
onPressed: (){...}
The callback that is called when a button is tapped. The index parameter of the callback is the index of the button that is tapped
No


constraints
BoxConstraints
constraints: BoxConstraints(...)
Defines the button's size. If this property is null, then BoxConstraints(minWidth: 48.0, minHeight: 48.0) is be used.
No


color
Color
color: Colors.orange
The color for descendant [Text] and [Icon] widgets if the button is enabled and not selected. Defaults to Theme.of(context).colorScheme.onSurface.
No


selectedColor
Color
selectedColor: Colors.orange
The color for descendant [Text] and [Icon] widgets if the button is selected. Defaults to Theme.of(context).colorScheme.primary.
No


disabledColor
Color
disabledColor: Colors.orange
The color for descendant [Text] and [Icon] widgets if the button is disabled. Defaults to Theme.of(context).colorScheme.onSurface.withOpacity(0.38).
No


fillColor
Color
fillColor:: Colors.orange
The fill color for selected toggle buttons. Defaults to Colors.transparent.
No


unselectedFillColor
Color
unselectedFillColor: Colors.orange
The fill color for unselected toggle buttons. Defaults to Colors.transparent.
No


disabledFillColor
Color
disabledFillColor: Colors.orange
The fill color for disabled toggle buttons. Defaults to Colors.transparent.
No


highlightColor
Color
highlightColor: Colors.orange
The highlight color for the button's InkWell. Defaults to Theme.of(context).highlightColor.
No


splashColor
Color
splashColor: Colors.orange
The splash color for the button's InkWell. Defaults to Theme.of(context).splashColor.
No


hoverColor
Color
hoverColor: Colors.orange
The color to use for filling the button when the button has a pointer hovering over it. Defaults to Theme.of(context).hoverColor.
No


renderBorder
bool
renderBorder: false
Whether or not to render a border around each toggle button. If false, no border will be rendered, even if other border properties are defined. Defaults to true.
No


borderColor
Color
borderColor: Colors.orange
The border color to display when the toggle button is enabled and not selected. Defaults to Colors.black12.
No


selectedBorderColor
Color
selectedBorderColor: Colors.orange
The border color to display when the toggle button is selected. Defaults to Colors.black12.
No


disabledBorderColor
Color
disabledBorderColor: Colors.orange
The border color to display when the toggle button is disabled. Defaults to Colors.black12.
No


borderWidth
double
borderWidth: 2.5
The width of the border surrounding each toggle button. This applies to both the greater surrounding border, as well as the borders between buttons. Defaults to a width of 1.0
No


borderRadius
double
borderRadius: 2.5
Not implemented The radii of the border's corners. Defaults to 0.0
No


spacing
double
spacing: 5.0
The space between two consecutive toggle buttons. Defaults to 0.0.
No


runSpacing
double
runSpacing: 5.0
The space between two consecutive runs of toggle buttons. Defaults to 0.0.
No


direction
Axis
direction: Axis.vertical
The direction in which the toggle buttons will be created. Can be either Axis.horizontal or Axis.vertical. Defaults to Axis.horizontal.
No


elevation
double
elevation: 10.0
The elevation of each toggle button. Defaults to 0.0.
No



Contributing #
All contributions are welcome 😄

If you found a bug/issue with the library, consider making an Issue describing it in as much detail possible.
If you want to fix something, add something you feel is relevant or resolve an issue, feel free to submit a Pull Request. Try to be as descriptive as possible about what the PR is about.
Do consider modifying the documentation and adding documentation comments in your code so that the existing documentation is kept up-to-date.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter