expansion_tile_group #

A Flutter widget that can be manager group of custom expansion tile

Overview #

Contents #

• Features
• Introduce
• Install
• Usage
  • Implement and manage group of expansion items
  • Behaviors between items in the group
  • Listen the changed of any item in the group
  • Adding space between items
  • Easy control behaviors of an ExpansionTileItem from anywhere
  • Easy to customize expansion item
  • Remove completely trailing
• Parameters
  • ExpansionTileGroup
  • ExpansionTileItem
• Troubleshooting
  • Hot reload not affect immediately
  • Adding border radius
  • Adding shadow to item box
  • Condition between trailing and isHasTrailing
  • BoxShadow
• FAQ
• Sponsoring
• Contributions

Features #

• Can group ExpansionTileItems together and manage them (ExpansionTileItem is extended from ExpansionTile of Flutter)
• Support and control many kind of behaviors between items in the group like: ExpandOnlyCurrent, ExpandAll, CollapseAll, ExpandAllAndCollapseAll
• Can listen any item changed behavior in the group
• Can add the space between items in the group
• Easy control behaviors of an ExpansionTileItem from anywhere
• Can easy custom or add decoration into an ExpansionTileItem with Border, BorderRadius, Shadow, or BoxDecoration
• Can remove completely the trailing, included: area, arrow icon. So that the title can be extended the width. Just using isHasTrailing

Introduce #

The ExpansionTile of Flutter has a lot of limits and difficult to customize it with these features above.

So that i created ExpansionTileItem to remove these limits.

The ExpansionTileItem extends all the properties and features core of ExpansionTile, so if you are using ExpansionTile, you can easy change to my package without changing any properties.

Addition, by using ExpansionTileItem, you can easy to group and manage them by wrapping into ExpansionTileGroup.

And there are some types of ExpansionTileItem like: ExpansionTileBorderItem, ExpansionTileWithoutBorderItem, I will add more in the future, or you can create the new one like this.

class YourExpansionTileItem extends ExpansionTileItem {
  YourExpansionTileItem(
          //your custom properties
          ):super(
    //call correspond super properties 
  )
}

I'm very appreciate if you know any common ExpansionTile UIs and give the PR.

More detail: ExpansionTileItem, ExpansionTileGroup

Install #

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  expansion_tile_group: <latest_version>

In your library add the following import:

import 'package:expansion_tile_group/expansion_tile_group.dart';

Usage #

Implement and manage group of expansion items #

First you need to import the package:

import 'package:expansion_tile_group/expansion_tile_group.dart';

After that you need to define the group of expansion items:

class ExpansionGroupExample extends StatelessWidget {
  const ExpansionGroupExample({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ExpansionTileGroup(
        children: []
    );
  }
}

Now you need to put expansion items into this group, the children must be ExpansionTileItem or extends of ExpansionTileItem (ExpansionTileBorderItem, ExpansionTileWithoutBorderItem):

class ExpansionGroupExample extends StatelessWidget {
  const ExpansionGroupExample({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ExpansionTileGroup(
        children: [
          const ExpansionTileItem(
            title: Text('ExpansionTile item 1'),
            expendedBorderColor: Colors.blue,
            children: [
              Text('Title of expansion tile item 1'),
            ],
          ),
          const ExpansionTileBorderItem(
            title: Text('ExpansionTile item 2'),
            expendedBorderColor: Colors.blue,
            children: [
              Text('Title of expansion tile item 2'),
            ],
          ),
          const ExpansionTileWithoutBorderItem(
            title: Text('ExpansionTile item 3'),
            expendedBorderColor: Colors.blue,
            children: [
              Text('Title of expansion tile item 3'),
            ],
          ),
        ]
    );
  }
}

Behaviors between items in the group #

You can control behaviors between items in the group with adding toggleType parameter to ExpansionTileGrouplike this:

class ExpansionGroupExample extends StatelessWidget {
  const ExpansionGroupExample({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ExpansionTileGroup(
        toggleType: ToggleType.expandOnlyCurrent,
        children: []
    );
  }
}

There are many types of toggleType, it support almost common case you will be met:

ToggleType.expandOnlyCurrent	ToggleType.collapseAll
ToggleType.expandAll	ToggleType.expandAllAndCollapseAll

Listen the changed of any item in the group #

Adding the onExpansionItemChanged parameter into ExpansionTileGroup to listen the changed of any item in the group:

class ExpansionGroupExample extends StatelessWidget {
  const ExpansionGroupExample({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ExpansionTileGroup(
        onExpansionItemChanged: (index, isExpanded) {
          //index is position of item in the group, 
          //isExpanded present current behavior: 
          //- true is expanding, 
          //- false is collapsing
        },
        children: []
    );
  }
}

Adding space between items #

Adding the spaceBetweenItem parameter into ExpansionTileGroup to spacing between items:

class ExpansionGroupExample extends StatelessWidget {
  const ExpansionGroupExample({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ExpansionTileGroup(
        spaceBetweenItem: 16,
        children: []
    );
  }
}

Easy control behaviors of an ExpansionTileItem from anywhere #

You can do expand/collapse any ExpansionTileItem anywhere in the app.

First you need create a itemKey look like this:

import 'package:expansion_tile_group/expansion_tile_group.dart';
import 'package:flutter/material.dart';

class ExampleExpandFromAnywherePage extends StatelessWidget {
  ExampleExpandFromAnywherePage({Key? key}) : super(key: key);
  
  final GlobalKey<ExpansionTileCustomState> itemKey = GlobalKey();
  
}

After that you set this itemKey into your ExpansionTileItem (or extends of this class) via expansionKey argument:

import 'package:expansion_tile_group/expansion_tile_group.dart';
import 'package:flutter/material.dart';

class ExampleExpandFromAnywherePage extends StatelessWidget {
  ExampleExpandFromAnywherePage({Key? key}) : super(key: key);
  
  final GlobalKey<ExpansionTileCustomState> itemKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expand From Anywhere Page'),
      ),
      body: ExpansionTileBorderItem(
        title: const Text('ExpansionTile 0'),
        expansionKey: itemKey,
        children: [
          const Text('body content of expansion')
        ],
      ),
    );
  }
}

Now if you want to expand or collapse this ExpansionTileItem, just call like this.

For expand:

itemKey.currentState?.expand();

For collapse:

itemKey.currentState?.collapse();

For Toggle:

itemKey.currentState?.toggle();

Easy to customize expansion item #

Remove completely trailing #

In ExpansionTile of Flutter, don't have anyway to remove completely the trailing (the arrow icon is removed but the area is NOT), so that in some case, the title is not extended the full width.

With this package, just set isHasTrailing is false, the trailing will be removed completely, like: area, arrow icon

Parameters #

ExpansionTileGroup #

ExpansionTileItem #

Troubleshooting #

Hot reload not affect immediately #

If you are using ExpansionTileGroup wrapping ExpansionTileItem items and you changed some configs of ExpansionTileItem, the hot reload will not immediately affect to UI, you must use the hot restart to see the changed. Because the items is wrapped ExpansionTileGroup will be auto generated the GlobalKey for each item. So when you do hot reload it will not affect immediately to UI.

Adding border radius #

When you want to adding border radius, please notice about the border side of box. Because the border radius only uniform borders. You can check this post here uniform borders

Adding shadow to item box #

When you want to adding shadow into item box, you need to add the backgroundColor and collapsedBackgroundColor into item, because they are using transparent by default

Condition between trailing and isHasTrailing #

Not necessary set trailing property when isHasTrailing property is set false

BoxShadow #

By default the backgroundColor and collapseBackgroundColor is transparent, so you need add value to both of them before define boxShadow

FAQ #

You can read the FAQ here: FAQ

Sponsoring #

If this package or any other package I created is helping you, please consider to sponsor me so that I can take time to update this packages.

OR

Contributions #

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a feature, please send a pull request.