The ExpansionTile widget in Flutter is a great tool for displaying a list of items that can expand or collapse. This widget is useful for creating expandable/collapsible sections within your app, often used for things like FAQs, menus, or lists with hidden details. In this blog post, we'll take an in-depth look at the properties of the ExpansionTile, demonstrate how to use it, and provide a few practical examples.
Table of Contents
What is an ExpansionTile?
Properties of ExpansionTile
Title
Leading
Trailing
Children
Initially Expanded
On Expansion Changed
Tile Padding
Background Color
Shape
IconColor
Example Usage of ExpansionTile
Simple ExpansionTile Example
ExpansionTile with Customization
Using ExpansionTile with Nested Children
Common Use Cases
Conclusion
1. What is an ExpansionTile?
The ExpansionTile widget in Flutter is used to create a list item that can expand or collapse to show more content. This is useful in cases where you want to hide or show content dynamically. The widget is typically used for lists of items, where each item can expand to show additional details. Think of it like an accordion-style interface.
The ExpansionTile is part of Flutter's flutter_material.dart library and is a direct way to create these expandable lists without needing custom animations or logic. It provides built-in support for expansion, collapsing, and maintaining state (whether expanded or collapsed).
2. Properties of ExpansionTile
The ExpansionTile widget comes with a variety of customizable properties. Let’s explore each one in detail.
Title
The title property defines the main content of the tile that will be shown when the tile is collapsed. This is typically a Text widget but can be any widget, including icons or other UI elements.
ExpansionTile(
title: Text('Tap to expand/collapse'),
children: [Text('Expanded content goes here')],
);
Leading
The leading property allows you to place an icon or any widget at the start of the tile, before the title. It's commonly used for icons to indicate the expandable nature of the tile (e.g., a down arrow or a chevron).
ExpansionTile(
leading: Icon(Icons.info),
title: Text('Tap to expand/collapse'),
children: [Text('Expanded content goes here')],
);
Trailing
The trailing property places a widget at the end of the tile, typically used for a visual indicator like a chevron or arrow icon that changes direction when the tile is expanded or collapsed.
ExpansionTile(
title: Text('Tap to expand/collapse'),
trailing: Icon(Icons.arrow_drop_down),
children: [Text('Expanded content goes here')],
);
Children
The children property is a list of widgets that are shown when the tile is expanded. These are the content you want to reveal when the user taps the tile to expand it.
ExpansionTile(
title: Text('Tap to expand/collapse'),
children: [
Padding(
padding: EdgeInsets.all(16.0),
child: Text('Here is the content when expanded'),
),
],
);
You can use any widget in the children list, making it flexible for different types of content.
Initially Expanded
The initiallyExpanded property allows you to control whether the ExpansionTile should start in the expanded state or not. By default, it is set to false, meaning the tile is collapsed initially.
ExpansionTile(
title: Text('Initially Expanded'),
initiallyExpanded: true, // Tile starts expanded
children: [Text('This tile starts expanded')],
);
On Expansion Changed
The onExpansionChanged callback allows you to handle the state change when the tile is expanded or collapsed. This is a great way to perform actions when the expansion state changes, such as logging or updating a variable.
ExpansionTile(
title: Text('Tap to expand/collapse'),
onExpansionChanged: (bool expanded) {
print(expanded ? 'Expanded' : 'Collapsed');
},
children: [Text('Expanded content goes here')],
);
Tile Padding
The tilePadding property allows you to control the amount of padding inside the tile. By default, it is set to EdgeInsets.symmetric(horizontal: 16.0). You can modify it to add more or less padding as needed.
ExpansionTile(
title: Text('Custom Padding'),
tilePadding: EdgeInsets.all(30), // Increase padding inside tile
children: [Text('Expanded content with custom padding')],
);
Background Color
The backgroundColor property allows you to change the background color of the ExpansionTile when it is expanded. This can help differentiate expanded tiles from collapsed ones visually.
ExpansionTile(
title: Text('Custom Background Color'),
backgroundColor: Colors.blue[50], // Light blue background when expanded
children: [Text('This tile has a custom background')],
);
Shape
The shape property controls the shape of the tile. By default, ExpansionTile has sharp corners, but you can customize it with a RoundedRectangleBorder or any other shape.
ExpansionTile(
title: Text('Tile with Rounded Corners'),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15), // Rounded corners
),
children: [Text('This tile has rounded corners')],
);
IconColor
The iconColor property allows you to change the color of the expansion icon (typically the arrow) when the tile is expanded or collapsed.
ExpansionTile(
title: Text('Custom Icon Color'),
iconColor: Colors.red, // Red icon color for the expansion indicator
children: [Text('The icon color is red')],
);
3. Example Usage of ExpansionTile
Simple ExpansionTile Example
Here’s a simple example where we create an expandable list with a title and content:
ListView(
children: <Widget>[
ExpansionTile(
title: Text('Click to Expand'),
children: <Widget>[
ListTile(title: Text('Expanded Content 1')),
ListTile(title: Text('Expanded Content 2')),
],
),
ExpansionTile(
title: Text('Another Tile'),
children: <Widget>[
ListTile(title: Text('More content')),
],
),
],
);
ExpansionTile with Customization
In this example, we add custom padding, icons, and a background color to make the expansion more visually appealing:
ListView(
children: <Widget>[
ExpansionTile(
title: Text('Click to Expand'),
leading: Icon(Icons.arrow_drop_down),
trailing: Icon(Icons.expand_more),
initiallyExpanded: false,
backgroundColor: Colors.green[50],
tilePadding: EdgeInsets.all(16),
iconColor: Colors.blue,
onExpansionChanged: (bool expanded) {
print(expanded ? 'Tile expanded' : 'Tile collapsed');
},
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text('Here is the expanded content'),
),
],
),
],
);
Using ExpansionTile with Nested Children
You can even use ExpansionTile inside another ExpansionTile to create multi-level expandable lists. Here’s an example:
ListView(
children: <Widget>[
ExpansionTile(
title: Text('Parent Tile'),
children: <Widget>[
ListTile(title: Text('Parent Content')),
ExpansionTile(
title: Text('Child Tile 1'),
children: <Widget>[
ListTile(title: Text('Child Content 1')),
ListTile(title: Text('Child Content 2')),
],
),
ExpansionTile(
title: Text('Child Tile 2'),
children: <Widget>[
ListTile(title: Text('Child Content 3')),
],
),
],
),
],
);
4. Common Use Cases
FAQs Section
The ExpansionTile widget is often used in FAQ sections where questions are the title, and the answers are the expanded content.
Collapsible Menus
It’s also used in navigation menus, where sections of the menu can be expanded to show subcategories or options.
Nested List Items
If you have a nested list (e.g., a list of categories, and under each category, there are subcategories), ExpansionTile works perfectly for this use case.
5. Conclusion
The ExpansionTile widget in Flutter is a versatile and easy-to-use component for creating collapsible content sections. By leveraging the properties of the ExpansionTile widget, such as title, children, initiallyExpanded, tilePadding, and more, you can create highly customizable and interactive UI components for your app.
Whether you're building a menu, FAQ section, or a more complex nested list, ExpansionTile offers a clean and efficient way to manage expandable content.
Happy coding!😀