ExpansionTile Widget in Flutter – Awesome UI List

ExpansionTile Widget in Flutter

ExpansionTile Widget in Flutter is a pretty simple yet useful widget. This widget lets you create an expanding Tile that can be used as part of the ListView. A lot of applications might require showing detailed information on the Listview but do not have the required space to do that. This Widget lets you create that easily.

In this article, we will see about creating this ExpansionTile Widget and create a faster and useful UI for our application. To begin with use the following template to quickly ramp up your application in under a minute. Open the emulator and make sure the code is building fine and we are ready to go.

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(DividerApp());

class DismissibleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample ExpansionTile Widget',
      home: DismissibleWidget(),
    );
  }
}

class DismissibleWidget extends StatefulWidget {
  DividerWidget({Key key}) : super(key: key);

  @override
  _DividerWidgetState createState() => _DividerWidgetState();
}

class _DismissibleWidgetState extends State<DismissibleWidget> {


  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold();
}
}

ExpansionTile Basics

Before starting to look at the ExpansionTile Widgets use case, we will look at some of the important properties of this Widget. Beginning with the most important,

  • title – This property lets you choose the Title for the ExpansionTile Widget. The title will be the one item that will always be shown to the user. Only upon clicking this title the Widget will expand to reveal the contents.
  • children – The property holds any number of widgets. It could be a card to a simple Text. This will be revealed only upon clicking on the Title of the ExpansionTile widget. Important to not clutter the entire children rather keep it simple. This way the UX is not affected
  • leading – Lets you give any Icon/Text before the Title(To the left of the title). Similar to how the ListTile is used, this attribute does the same here also.
  • trailing – Lets you give any Icon/Text after the Title(To the right of the title). Similar to how the ListTile is used, this attribute does the same with the trailing property of the ExpansionTile
  • backgroundColor – Lets you provide the background color to the entire Expanded Tile. Note that, this is not the color of the entire Title, rather only the expanded Tile.

Once all these properties are included as part of the ExpansionTile widget, we are good to jump to the next section of this article. The following section holds a sample code for the app to show how the ExpansionTile Widget in Flutter works.

ExpansionTile Widget – Example Code

Run the following source code to create the app as shown in the next section.

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(DismissibleApp());

class DismissibleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample ExpansionTile Widget',
      home: ExpansionTileWidget(),
    );
  }
}

class ExpansionTileWidget extends StatefulWidget {
  ExpansionTileWidget({Key key}) : super(key: key);

  @override
  _ExpansionTileWidgetState createState() => _ExpansionTileWidgetState();
}

class _ExpansionTileWidgetState extends State {


  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: Drawer(),
        appBar: AppBar(
          title: Text('Sample ExpansionTile Widget'),
          backgroundColor: Colors.black87,
        ),
        body: ExpansionTile(
            title: Text("Pieter's Pizza "),
            trailing: Icon(Icons.local_pizza),
            backgroundColor: Colors.yellow,
            children: [
              Column(children: [
                Text("Pieter's Very own Pizza. Taste the richness",textAlign:TextAlign.center, style: TextStyle(fontStyle:FontStyle.italic,color: Colors.black87, fontSize: 20.0),),
                Image.network("https://cdn3.iconfinder.com/data/icons/food-4-5/128/178-512.png")
              ],)
            ],
        )

        );
  }
}
ExpansionTile Widget
ExpansionTile Widget
ExpansionTile Widget
ExpansionTile Widget

Conclusion

ExpansionTile Widget is a very useful Widget and also one of my favorites to show in a ListView. Rather than a plain boring Lists, this will add better UX to the entire App flow. Make sure to try them out and let me know what you think in the comments section below.

“Happy Coding”

Leave a Comment

Your email address will not be published. Required fields are marked *