dismissible_expanded_list 0.3.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 82

Dismissible Expanded List #

A Flutter package to provide an ability to display hierarchical data in the form of list as well as allows to swipe the individual tiles.

Getting Started #

Dismissible Expanded List is written in dart. It provides us an ability to display hierarchical data in the form of list as well as allowing us to swipe the individual tiles. Tapping a tile expands or collapses the view of its children. When a tile is collapsed its children are disposed so that the widget footprint of the list only reflects what’s visible.

User can enable/disable swipe functionality for parent or child items by providing simple configurations. A complete list of configurable params is mentioned below.

Demo #

Use this package as a library #

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  dismissible_expanded_list: ^0.2.x

2. Install it

You can install packages from the command line:

with Flutter

$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:dismissible_expanded_list/dismissible_expanded_list.dart';

How to use #

Using Dismissible Expanded List is quite easy, all you need to do is

return ListView.builder(
    itemBuilder: (BuildContext context, int index) =>
        DismissibleExpandableList(
      parentIndex: index,
      entry: list[index],
      config: config,
      onItemClick: (parentIndex, childIndex, ExpandableListItem item) {
        print('onItemClick called');
        onItemClick(parentIndex, childIndex);
      },
      onItemDismissed:
          (parentIndex, childIndex, direction, removeTileOnDismiss, item) {
        if (direction == DismissDirection.endToStart) {
          onItemDismissed(parentIndex, childIndex, removeTileOnDismiss);
        } else {
          onItemDismissed(parentIndex, childIndex, removeTileOnDismiss);
        }
      },
    ),
    itemCount: mockData.length,
  );

How to Configure #

/// Configuration example
DismissibleListConfig config = DismissibleListConfig()
  ..badgeWidth = 80.0
  ..listElevation = 3.0
  ..infoBadgeElevation = 0.0
  ..infoIconSize = 15.0
  ..removeTileOnDismiss = false
  ..allowBatchSwipe = true
  ..allowChildSwipe = true
  ..allowParentSelection = true
  ..showBorder = false
  ..showInfoBadge = true
  ..titleStyle = TextStyles.title
  ..titleSelectedStyle = TextStyles.titleSelected
  ..subTitleStyle = TextStyles.subTitle
  ..subTitleSelectedStyle = TextStyles.subTitleSelected
  ..trailingIcon = Icons.info_outline
  ..lineColor = Colors.grey[400]
  ..selectionColor = Color(0xFFcee9f0)
  ..rightSwipeColor = Colors.green
  ..leftSwipeColor = Colors.red
  ..iconColor = Colors.black87
  ..iconSelectedColor = Colors.black87
  ..backgroundColor = Colors.white;

List of params #

PropertyTypeDefault ValueDescription
badgeWidthdouble80.0The (optional) param to control badge width displayed at the top right.
infoBadgeElevationdouble0.0The (optional) param to control the card elevation for info badge displayed at the top right.
listElevationdouble3.0The (optional) param to control the card elevation for dismissible list item.
infoIconSizedouble15.0The (optional) param to control the size of info icon displayed in-front of the title.
removeTileOnDismissbooltrueThe (optional) param to control either to remove dismissible list items from list or to keep them. If true item will be remove from the list and the rest of the items will adjust accordingly, else item will stay at its place and a callback with swiped item will be returned.
allowBatchSwipebooltrueThe (optional) param to control parent/batch swipe at once. If true parent/batch will be swiped and removed from list, else it wont and will act as a normal list item.
allowChildSwipebooltrueThe (optional) param to control child swipe. If true user will be able to swipe the child else it won't and will act as a normal list item.
allowParentSelectionbooltrueThe (optional) param to control parent selection. If true by selecting a child parent will also be selected else only child will show as selected.
showBorderboolfalseThe (optional) param to add an extra border between expanded and other list items when one of the list item is expanded. If true an extra border will be added to top and bottom of expanded item to distinguish it from other items else there will be no boarder.
showInfoBadgebooltrueThe (optional) param to control either to show info badge or not. if true info badge will be displayed at the top right corner of the dismissible list item.
titleStyleTextStyleTextStyles.titleThe (optional) param to set font style of the title.
titleSelectedStyleTextStyleTextStyles.titleSelectedThe (optional) param to set selected font style of the title.
subTitleStyleTextStyleTextStyles.subTitleThe (optional) param to set font style of the sub-title.
subTitleSelectedStyleTextStyleTextStyles.subTitleSelectedThe (optional) param to set selected font style of the sub-title.
trailingIconIconDataIcons.info_outlineThe (optional) param to set the trailing icon.
topLeftIconIconDataIcons.info_outlineThe (optional) param to set the icon at the top left corner of the list tile.
bottomLeftIconIconDataIcons.info_outlineThe (optional) param to set the icon at the bottom left corner of the list tile.
bottomRightIconIconDataIcons.info_outlineThe (optional) param to set the icon at the bottom right corner of the list tile.
lineColorColorColors.grey[400]The (optional) param to set the line color of the expanded list item.
selectionColorColorColor(0xFFcee9f0)The (optional) param to set the list item selection color.
rightSwipeColorColorColors.greenThe (optional) param to set the swipe color of the list item when swiped from left to right.
leftSwipeColorColorColors.redThe (optional) param to set the swipe color of the list item when swiped from right to left.
iconColorColorColors.black87The (optional) param to set the trailing icon color.
iconSelectedColorColorColors.black87The (optional) param to set the trailing icon color when list item is selected.
backgroundColorColorColors.whiteThe (optional) param to set the background color of list item.
cornerBackgroundColorColorColor(0xFFf3f3f3)The (optional) param to set the background color of corners.
cornerSelectionColorColorColor(0xFFf3f3f3)The (optional) param to set the selection color of corners.
parentIndexintnullThe (required) param to populate list item data.
entryExpandableListItemnullThe (required) param to populate list item data.
configDismissibleListConfignullThe (required) param to set the dismissible list item configuration. e.g. background color, trailing icon size etc.
onItemClickOnItemClicknullThe (optional) param to get the call back whenever list item will be tapped.
onItemDismissedOnItemDismissednullThe (optional) param to get the call back whenever list item will be swiped.
iconsListnullThe (optional) param to show info icons under subtitle

Complete Example #

import 'package:dismissible_expanded_list/constants/text_styles.dart';
import 'package:dismissible_expanded_list/widgets/dismissible_expanded_list_widget.dart';
import 'package:dismissible_expanded_list/model/entry.dart';
import 'package:example/mock.dart';
import 'package:flutter/material.dart';
import 'package:dismissible_expanded_list/model/dismissible_list_configuration.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: ExpansionTileSample(),
    );
  }
}

class ExpansionTileSample extends StatefulWidget {
  @override
  _ExpansionTileSampleState createState() => _ExpansionTileSampleState();
}

class _ExpansionTileSampleState extends State<ExpansionTileSample> {
  String title = 'Not Yet Selected';
  String selectedId = '1';
  bool removeTileOnDismiss = true;

  final List<ExpandableListItem> list = mockData;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFF2e6f85),
          title: const Text('ExpansionTile'),
        ),
        body: Material(
          child: MediaQuery.of(context).orientation == Orientation.landscape
              ? Row(
                  children: <Widget>[_buildLeftSide(), _buildRightSide()],
                )
              : Row(
                  children: <Widget>[_buildRightSide()],
                ),
        ),
      ),
    );
  }

  Widget _buildRightSide() {
    /// Configuration example
    DismissibleListConfig config = DismissibleListConfig()
      ..badgeWidth = 80.0
      ..listElevation = 3.0
      ..infoBadgeElevation = 0.0
      ..infoIconSize = 15.0
      ..removeTileOnDismiss = false
      ..allowBatchSwipe = true
      ..allowChildSwipe = true
      ..allowParentSelection = true
      ..showBorder = false
      ..showInfoBadge = true
      ..titleStyle = TextStyles.title
      ..titleSelectedStyle = TextStyles.titleSelected
      ..subTitleStyle = TextStyles.subTitle
      ..subTitleSelectedStyle = TextStyles.subTitleSelected
      ..trailingIcon = Icons.info_outline
      ..lineColor = Colors.grey[400]
      ..selectionColor = Color(0xFFcee9f0)
      ..rightSwipeColor = Colors.green
      ..leftSwipeColor = Colors.red
      ..iconColor = Colors.black87
      ..iconSelectedColor = Colors.black87
      ..backgroundColor = Colors.white;

    return Expanded(
      flex: 1,
      child: ListView.builder(
        itemBuilder: (BuildContext context, int index) =>
            DismissibleExpandableList(
          parentIndex: index,
          entry: list[index],
          config: config,
          onItemClick: (parentIndex, childIndex, ExpandableListItem item) {
            print('onItemClick called');
            onItemClick(parentIndex, childIndex);
          },
          onItemDismissed:
              (parentIndex, childIndex, direction, removeTileOnDismiss, item) {
            if (direction == DismissDirection.endToStart) {
              onItemDismissed(parentIndex, childIndex, removeTileOnDismiss);
            } else {
              onItemDismissed(parentIndex, childIndex, removeTileOnDismiss);
            }
          },
        ),
        itemCount: mockData.length,
      ),
    );
  }

  Widget _buildLeftSide() {
    return Expanded(
      flex: 2,
      child: Container(
        margin: EdgeInsets.only(left: 5.0, top: 5.0, bottom: 5.0, right: 2.0),
        height: double.infinity,
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(10.0)),
        child: Text(title),
      ),
    );
  }

  // general methods:-----------------------------------------------------------
  void onItemClick(int parentIndex, int childIndex) {
    setState(
      () {
        if (childIndex == -1) {
          title = mockData[parentIndex].title;
          selectedId = mockData[parentIndex].id;

          // setting entry to true
          mockData.forEach((item) => item.reset());
          mockData[parentIndex].selected = true;
        } else {
          selectedId = mockData[parentIndex].children[childIndex].id;
          title = mockData[parentIndex].children[childIndex].title;

          // setting entry to true
          mockData.forEach((item) => item.reset());
          mockData[parentIndex].selected = true;
          mockData[parentIndex].children[childIndex].selected = true;
        }
      },
    );
  }

  void onItemDismissed(
      int parentIndex, int childIndex, bool removeTileOnDismiss) {
    setState(
      () {
        // check to see if user wants to remove swiped items from list
        // if yes then remove item from list
        // else show user a message about swiped item
        if (removeTileOnDismiss) {
          if (childIndex == -1) {
            mockData.removeAt(parentIndex);
          } else {
            // check to see if its the last child
            // if yes, then remove parent as well
            // else, only remove child
            if (mockData[parentIndex].children != null &&
                mockData[parentIndex].children.length > 1) {
              mockData[parentIndex].children.removeAt(childIndex);
            } else {
              mockData.removeAt(parentIndex);
            }
          }
        } else {
          // show user a message that item has been swiped
        }
      },
    );
  }
}

[0.0.1] - 26-Aug-2019

  • Release version 0.0.1.

[0.0.2] - 27-Aug-2019

  • Added badgeText in entry
  • Removed badgeText from list tile

[0.0.3] - 27-Aug-2019

  • fixed badge width

[0.0.4] - 27-Aug-2019

  • fixed badge status issue

[0.0.5] - 28-Aug-2019

  • fixed batch swipe issue on 0 child

[0.0.6] - 28-Aug-2019

  • fixed tile background

[0.0.7] - 28-Aug-2019

  • fixed background color

[0.0.8] - 28-Aug-2019

  • added configuration for batch selection color

[0.0.9] - 29-Aug-2019

  • fixed selection issues on allowParentSelection

[0.1.0] - 29-Aug-2019

  • fixed crash issue on toggling a parent with no child

[0.1.1] - 02-Sep-2019

  • fixed tile height
  • added support for title and subtitle styles

[0.1.2] - 03-Sep-2019

  • add icon color for selected mode

[0.1.3] - 12-Sep-2019

  • added badgeColor and badgeTextColor in entry

[0.1.4] - 17-Sep-2019

  • added background color support

[0.1.5] - 17-Sep-2019

  • added support to change info icon size

[0.1.6] - 17-Sep-2019

  • added support to center title if no subtitle is present

[0.1.7] - 03-Oct-2019

  • fixed subtitle bug

[0.1.8] - 03-Oct-2019

  • added gesture detector for list item

[0.1.9] - 03-Oct-2019

  • reverted package

[0.2.0] - 03-Oct-2019

  • added root object in callback

[0.2.1] - 03-Oct-2019

  • added elevation for list tile
  • added card for badge

[0.2.2] - 11-Nov-2019

  • added configurations
  • refactored code
  • updated readme.md file

[0.2.3] - 11-Nov-2019

  • refactored imports
  • updated readme.md file

[0.2.4] - 11-Nov-2019

  • added data types for config

[0.2.5] - 11-Nov-2019

  • updated readme.md file

[0.2.6] - 11-Nov-2019

  • fixed config constructor

[0.2.7] - 03-Jan-2020

  • refactored code
  • refactored trailing icon logic

[0.2.8] - 07-Jan-2020

  • refactored code
  • added support for corner icons
  • added support for info icons
  • added batch and child icon support

[0.3.0] - 07-Jan-2020

  • refactored code
  • added support for corner icons
  • added support for info icons
  • added batch and child icon support
  • updated readme.md file

[0.3.1] - 17-Jan-2020

  • refactored code
  • added support for show/hide trailing icon
  • fixed padding issues

example/README.md

example #

A new Flutter application.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  dismissible_expanded_list: ^0.3.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:dismissible_expanded_list/dismissible_expanded_list.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
66
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
82
Learn more about scoring.

We analyzed this package on Jan 24, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Health suggestions

Fix lib/widgets/custom_expansion_tile.dart. (-1.49 points)

Analysis of lib/widgets/custom_expansion_tile.dart reported 3 hints:

line 93 col 10: 'ancestorStateOfType' is deprecated and shouldn't be used. Use findAncestorStateOfType instead. This feature was deprecated after v1.12.1..

line 93 col 36: 'TypeMatcher' is deprecated and shouldn't be used. TypeMatcher has been deprecated because it is no longer used in framework(only in deprecated methods). This feature was deprecated after v1.12.1..

line 112 col 21: The value of the field '_iconTurns' isn't used.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test