expandable 1.0.0+1 copy "expandable: ^1.0.0+1" to clipboard
expandable: ^1.0.0+1 copied to clipboard

outdated

A Flutter widget that can be expanded or collapsed by clicking on a header or an icon.

Expandable #

A Flutter widget that can be expanded or collapsed by the user.

Introduction #

This library helps implement expandable behavior as prescribed by Material Design:

Expandable should not be confused with ExpansionPanel. ExpansionPanel, which is a part of Flutter material library, is designed to work only within ExpansionPanelList and cannot be used for making other widgets, for example, expandable Card widgets.

animated image

Usage #

Expandable uses Scoped Model plugin for communicating model state changes.

/// This widget shows only the first line of text and expands when the user 
/// clicks on a title.
class Card1 extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ScopedModel<ExpandableModel>(
        model: ExpandableModel(),
        child: Column(
          children: <Widget>[
            ExpandableHeader(
              child: Text("Lorem ipsum",
                style: Theme.of(context).textTheme.body2,
              ),
            ),
            Expandable(
              collapsed: Text(loremIpsum, softWrap: false, overflow: TextOverflow.ellipsis,),
              expanded: Text(loremIpsum, softWrap: true, ),
            ),
          ],
        ),
      )
    );
  }
}
/// This widget has three sections: title, pictures, and description, which all expand
/// then the user clicks on the EXPAND button at the bottom.
class Card2 extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ScopedModel<ExpandableModel>(
        model: ExpandableModel(),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expandable(
              collapsed: buildCollapsedTitle(),
              expanded: buildExpandedTitle(),
            ),
            Expandable(
              collapsed: buildCollapsedPictures(),
              expanded: buildExpandedPictures(),
            ),
            Expandable(
              collapsed: buildCollapsedDescription(),
              expanded: buildExpandedDescription(),
            ),
            Divider(height: 0.0,),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                ScopedModelDescendant<ExpandableModel>(
                  builder: (context, _, model) {
                    return MaterialButton(
                      child: Text(model.expanded ? "COLLAPSE": "EXPAND",
                        style: Theme.of(context).textTheme.button.copyWith(
                          color: Colors.deepPurple
                        ),
                      ),
                      onPressed: () {
                        model.expanded = !model.expanded;
                      },
                    );
                  }
                )
              ],
            )
          ],
        ),
      )
    );
  }
}
1701
likes
0
pub points
99%
popularity

Publisher

unverified uploader

A Flutter widget that can be expanded or collapsed by clicking on a header or an icon.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter, scoped_model

More

Packages that depend on expandable