ToggleButtons in Flutter are used to create a set of buttons that can be toggled on and off. They are often used to represent a selection of multiple options.
In this tutorial, we’ll walk through the process of creating a set of toggle buttons in a Flutter app with step-by-step examples.
Step 1: Create a Flutter Project
Before you start, ensure you have Flutter installed. If not, follow the installation guide on the official Flutter website.
Step 2: Create the ToggleButtons Widget
Create a new StatefulWidget that defines your ToggleButtons widget. In this example, we’re going to create a simple toggle buttons set representing text formatting options:
class ToggleButtonsExample extends StatefulWidget {
@override
_ToggleButtonsExampleState createState() => _ToggleButtonsExampleState();
}
class _ToggleButtonsExampleState extends State<ToggleButtonsExample> {
List<bool> _isSelected = [false, false, false]; // Initial selection state
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ToggleButtons Example'),
),
body: Center(
child: ToggleButtons(
isSelected: _isSelected,
onPressed: (index) {
setState(() {
_isSelected[index] = !_isSelected[index];
});
},
children: <Widget>[
Icon(Icons.format_bold),
Icon(Icons.format_italic),
Icon(Icons.format_underlined),
],
),
),
);
}
}
In this code, we’ve created a StatefulWidget called ToggleButtonsExample. The _isSelected list keeps track of the selection state of each button. Inside the build method, we use the ToggleButtons widget.
The isSelected property takes the _isSelected list, and the onPressed callback toggles the selection state of each button when pressed. The children property contains the buttons themselves, represented by Icon widgets.
Step 3: Customize Appearance
You can customize the appearance of the toggle buttons by using the selectedColor, selectedBorderColor, and borderRadius properties of the ToggleButtons widget.
For example, you can modify the ToggleButtons widget in the _ToggleButtonsExampleState class like this:
ToggleButtons(
isSelected: _isSelected,
onPressed: (index) {
setState(() {
_isSelected[index] = !_isSelected[index];
});
},
selectedColor: Colors.blue,
selectedBorderColor: Colors.blue,
borderRadius: BorderRadius.circular(10),
children: <Widget>[
Icon(Icons.format_bold),
Icon(Icons.format_italic),
Icon(Icons.format_underlined),
],
)
Here, we’ve added the selectedColor, selectedBorderColor, and borderRadius properties to customize the appearance of the selected buttons.
Conclusion
In this tutorial, we covered the basics of creating a set of ToggleButtons in a Flutter app. You learned how to set up a Flutter project, add dependencies, import required packages, create a StatefulWidget for the toggle buttons, and customize their appearance.
You can now apply this knowledge to your own projects to enhance user interactions. Remember to style the buttons, handle the button logic, and integrate them into your app’s workflow as needed.
That concludes the tutorial on creating Flutter ToggleButtons. Feel free to explore more options and features offered by the ToggleButtons widget to create engaging user interfaces.
Good luck with your Flutter development journey!
Related Posts
Basic of Flutter Slider Widget
The Basics of Flutter Scaffold
Flutter RangeSlider Widget Tutorial