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

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.