Expand/collapse views in Flutter

Hello, sometimes in app development, we may have a requirement to hide/show views. To expand/collapse views in Flutter we can use the Expansion tile widget. It is quite easy and interesting.

So, now what is Expansion Tile? - A single line list tile with a trailing button that expands or collapses the tile to reveal or hide the children. Let’s start the coding part.

• First of all, create a new Flutter project and delete everything. Your main.dart will look like this:

import 'dart:ui';
import 'package:flutter/material.dart';void main() {
  runApp(MyApp());
}class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        accentColor: Colors.black,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ExpansionTileDemo(),
    );
  }
}

• Create a stateful widget named- ExpasionTileDemo.

• Add the below code within your build method of ExpansionTileDemo class.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('ExpansionTile'),
    ),
    body: Column(
      children: [
        Image.asset(
          'assets/coffee.jpg',
          height: 150,
        ),
        Divider(
          height: 1,
          color: Colors.grey,
        ),
        ExpansionTile(
          backgroundColor: Colors.yellow[50],
          title: Text(
            'Coffee',
            style: TextStyle(
              color: Colors.black,
              fontSize: 20,
            ),
            textAlign: TextAlign.center,
          ),
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                'Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffee species.',
                style: TextStyle(fontSize: 15),
                maxLines: 3,
                softWrap: true,
                textAlign: TextAlign.start,
              ),
            ),
          ],
        ),
      ],
    ),
  );
}

I have created ExpansionTileDemo class and within the build method return scaffold.

I have added a column and within that added Image.asset and ExpansionTile widget.

Useful properties:-

• initiallyExpanded: specify whether the expansion tile will be expanded or collapsed. Default is false i.e. collapsed.

• title: To give a title to your tile. This is the required attribute.

• subtitle: Add additional information below the title.

• expandedAlignment: To specify the alignment of the children.

• trailing: Display widget after the title. By default, the rotating icon will be displayed.

• leading: Display widget before the title.

• children: Widget(s) to display when tile expanded.

• onExpansionChanged: Define a function to perform changes when a tile expands or collapses.

• backgroundColor: Display background color behind the sublist when expanded.

So, we are done with the coding part, and let’s run the application to see the output.

By default, keyboard_arrow_down will be displayed as a trailing icon. But we can change the leading and trailing icon as per our requirement.

yay!! It is done.