Skip to content

Latest commit

 

History

History
132 lines (94 loc) · 7.92 KB

README.md

File metadata and controls

132 lines (94 loc) · 7.92 KB
Raw

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.