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

and install it by running the following in your command line:

flutter pub get

Now you can use this in your source file by adding the following import:

import 'package:customtogglebuttons/customtogglebuttons.dart';

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];

In your build method:

CustomToggleButtons(
	isSelected: _isSelected,
	children: <Widget>[
		Icon(Icons.add),
		Icon(Icons.remove),
	],
	onPressed: (index) {
		setState(() {
			_isSelected[index] = !_isSelected[index];
		});
	},
),

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

ParameterTypeUsageDescriptionRequired?
childrenList<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
isSelectedList<bool>isSelected: <bool>[...]The corresponding selection state of each toggle button. Length of list must be equal to the length of children list.Yes
onPressedvoid 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 tappedNo
constraintsBoxConstraintsconstraints: BoxConstraints(...)Defines the button's size. If this property is null, then BoxConstraints(minWidth: 48.0, minHeight: 48.0) is be used.No
colorColorcolor: Colors.orangeThe color for descendant Text and Icon widgets if the button is enabled and not selected. Defaults to Theme.of(context).colorScheme.onSurface.No
selectedColorColorselectedColor: Colors.orangeThe color for descendant Text and Icon widgets if the button is selected. Defaults to Theme.of(context).colorScheme.primary.No
disabledColorColordisabledColor: Colors.orangeThe color for descendant Text and Icon widgets if the button is disabled. Defaults to Theme.of(context).colorScheme.onSurface.withOpacity(0.38).No
fillColorColorfillColor:: Colors.orangeThe fill color for selected toggle buttons. Defaults to Colors.transparent.No
unselectedFillColorColorunselectedFillColor: Colors.orangeThe fill color for unselected toggle buttons. Defaults to Colors.transparent.No
disabledFillColorColordisabledFillColor: Colors.orangeThe fill color for disabled toggle buttons. Defaults to Colors.transparent.No
highlightColorColorhighlightColor: Colors.orangeThe highlight color for the button's InkWell. Defaults to Theme.of(context).highlightColor.No
splashColorColorsplashColor: Colors.orangeThe splash color for the button's InkWell. Defaults to Theme.of(context).splashColor.No
hoverColorColorhoverColor: Colors.orangeThe color to use for filling the button when the button has a pointer hovering over it. Defaults to Theme.of(context).hoverColor.No
renderBorderboolrenderBorder: falseWhether 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
borderColorColorborderColor: Colors.orangeThe border color to display when the toggle button is enabled and not selected. Defaults to Colors.black12.No
selectedBorderColorColorselectedBorderColor: Colors.orangeThe border color to display when the toggle button is selected. Defaults to Colors.black12.No
disabledBorderColorColordisabledBorderColor: Colors.orangeThe border color to display when the toggle button is disabled. Defaults to Colors.black12.No
borderWidthdoubleborderWidth: 2.5The 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.0No
borderRadiusdoubleborderRadius: 2.5Not implemented The radii of the border's corners. Defaults to 0.0No
spacingdoublespacing: 5.0The space between two consecutive toggle buttons. Defaults to 0.0.No
runSpacingdoublerunSpacing: 5.0The space between two consecutive runs of toggle buttons. Defaults to 0.0.No
directionAxisdirection: Axis.verticalThe direction in which the toggle buttons will be created. Can be either Axis.horizontal or Axis.vertical. Defaults to Axis.horizontal.No
elevationdoubleelevation: 10.0The 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.

Libraries

customtogglebuttons