Flutter: Collapse ExpansionTiles on Page Refresh

Flutter is a popular open-source UI software development kit created by Google. It is used to develop natively compiled applications for mobile, web, and desktop from a single codebase. In this article, we will discuss how to collapse the ExpansionTiles in a Flutter application when the page is refreshed. This is a common requirement in many Flutter applications, and it is essential to understand how to implement it.

ExpansionTile Widget

The ExpansionTile widget is a Flutter widget that allows you to create an accordion-style list of widgets. Each ExpansionTile widget has a title, and when you tap on the title, it expands to show the child widgets. When you tap on the title again, it collapses to hide the child widgets. The ExpansionTile widget is often used to create a list of options that can be expanded or collapsed to show or hide more information.

Collapsing ExpansionTiles

Collapsing the ExpansionTiles when the page is refreshed is a common requirement in many Flutter applications. This can be achieved by using the StatefulWidget class and the didChangeDependencies() method. The didChangeDependencies() method is called when the dependencies of the widget have changed. In this method, you can call the collapseAll() method of the ExpansionTileController class to collapse all the ExpansionTiles.

Example Code

Here is an example code that demonstrates how to collapse the ExpansionTiles when the page is refreshed:

import 'package:flutter/material.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Flutter Demo',
 theme: ThemeData(
 primarySwatch: Colors.blue,
 ),
 home: MyHomePage(),
 );
 }
}

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
 final List _items = List.generate(20, (index) => 'Item ${index + 1}');
 final ExpansionTileController _controller = ExpansionTileController();

 @override
 void initState() {
 super.initState();
 _controller.addListener(() {
 if (_controller.expansionState == ExpansionTileState.collapsed) {
 setState(() {});
 }
 });
 }

 @override
 void didChangeDependencies() {
 super.didChangeDependencies();
 _controller.collapseAll();
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('Flutter Demo'),
 ),
 body: ListView.builder(
 controller: ScrollController(),
 itemCount: _items.length,
 itemBuilder: (context, index) {
 return ExpansionTile(
 title: Text('Item ${index + 1}'),
 controller: _controller,
 children: [
 for (int i = 0; i < 5; i++)
 ListTile(title: Text('Child Item ${i + 1}')),
 ],
 );
 },
 ),
 );
 }
}

In the above code, we have created a list of 20 items using the List.generate() method. We have also created an ExpansionTileController object, which is used to control the ExpansionTile widgets. The addListener() method is called to listen for changes in the expansion state of the ExpansionTile widgets. When the expansion state changes to collapsed, the setState() method is called to rebuild the widget tree.

The didChangeDependencies() method is overridden to collapse all the ExpansionTile widgets when the page is refreshed. The collapseAll() method of the ExpansionTileController class is called to collapse all the ExpansionTile widgets. This ensures that all the ExpansionTile widgets are collapsed when the page is refreshed.

Collapsing the ExpansionTiles when the page is refreshed is a common requirement in many Flutter applications. This can be achieved by using the StatefulWidget class and the didChangeDependencies() method. The ExpansionTileController class is used to control the ExpansionTile widgets, and the collapseAll() method is called to collapse all the ExpansionTile widgets when the page is refreshed. The above example code demonstrates how to implement this feature in a Flutter application.

References