expandable_widgets 1.0.3+1 icon indicating copy to clipboard operation
expandable_widgets: ^1.0.3+1 copied to clipboard

A package provides expandable widgets for Flutter, written in 100% Dart.

Expandable Widgets

A package provides expandable widgets for Flutter, written in 100% Dart.

Why?

Fast

There are various ways of getting expandable behaviour in Flutter. This package provides boilerplate code and reduces production time.

Inclusive

Expandable Widgets offers a variety of uses. Check More Usecases

Easy

You can obtain the basic expandable widgets by writing one single line of code.

Examples

General Use:

You can use Expandable with two required parameters.

Expandable(
  firstChild: const Text('Hello world!'),
  secondChild: Center(child: const Text('Hello world!')),
),

Extended Example:

If you add subChild argument you will get an expandable with subtitle. See 1.0.2 or older versions for previous extended expandables.

Expandable(
  firstChild: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text(data, maxLines: 3, textAlign: TextAlign.justify),
  ),
  secondChild: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text(data, maxLines: 3, textAlign: TextAlign.justify),
  ),
  subChild: Text("Show Details"),
),

Expandable Text:

You can use ExpandableText by giving the required parameter, textWidget. ExpandableText will handle the rest.

ExpandableText(textWidget: Text(data, maxLines: 3),

More Usecases

Expandable

Let's say you want to use Expandable and Flutter's AnimatedIcon at the same time.

Just add the relevant animationController. Expandable will handle the rest!

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Expandable(
      firstChild: Padding(
        padding: const EdgeInsets.only(right: 8.0),
        child: Text('Settings', style: TextStyle(fontSize: 18)),
      ),
      secondChild: Column(children: [Text('Option 1'), Text('Option 2'), Text('Option 3')]),
      animationController: _animationController,
      arrowLocation: ArrowLocation.left,
      arrowWidget: Padding(
        padding: const EdgeInsets.all(8.0),
        child: AnimatedIcon(icon: AnimatedIcons.menu_close, progress: _animation, size: 16),
      ),
    ),

Even more, one can combine AnimatedIcon and Expandable's rotation animation.

Give the same animation to AnimatedIcon and Expandable and finally, do not forget to add relevant animationController to Expandable.

    Expandable(
      firstChild: Padding(
        padding: const EdgeInsets.only(right: 8.0),
        child: Text('Settings', style: TextStyle(fontSize: 18)),
      ),
      secondChild: Column(children: [Text('Option 1'), Text('Option 2'), Text('Option 3')]),
      animation: _animation,
      animationController: _animationController,
      arrowLocation: ArrowLocation.left,
      arrowWidget: Padding(
        padding: const EdgeInsets.all(8.0),
        child: AnimatedIcon(icon: AnimatedIcons.menu_close, progress: _animation, size: 16),
      ),
    ),
  ],
),

Nested Expandable Widgets

Expandable(
  firstChild: Text('Nested Expandable Widgets'),
  secondChild: Expandable(
    borderRadius: BorderRadius.zero,
    boxShadow: [],
    firstChild: Text('Second Expandable'),
    secondChild: Expandable(
      borderRadius: BorderRadius.zero,
      boxShadow: [],
      firstChild: Text('Third Expandable'),
      secondChild: Center(child: Text('The End')),
    ),
  ),
),

ExpandableText

You can change the location of the arrow

ExpandableText(
  textWidget: Text(data).copyWith(maxLines: 3),
  arrowLocation: ArrowLocation.bottom,
  finalArrowLocation: ArrowLocation.bottom,
),

You can use helper text

ExpandableText(textWidget: Text(data, maxLines: 3), helper: Helper.text),

Customized ExpandableText with helper text

ExpandableText(
  textWidget: Text(data, maxLines: 5, textAlign: TextAlign.justify),
  backgroundColor: Colors.white,
  helper: Helper.text,
  helperTextList: const ['...More', '...Less'],
  helperTextStyle: const TextStyle(color: Colors.orange, fontWeight: FontWeight.bold),
  boxShadow: const [BoxShadow(color: Colors.orange, offset: Offset(2, 2), blurRadius: 4)],
  borderRadius: BorderRadius.circular(20.0),
  padding: const EdgeInsets.all(12.0),
  onPressed: () => print('hi!'),
),

Or you can remove the helper

ExpandableText(textWidget: Text(data, maxLines: 3), helper: Helper.none),

Known issues

For more info please see example.

19
likes
120
pub points
85%
popularity

Publisher

unverified uploader

A package provides expandable widgets for Flutter, written in 100% Dart.

Homepage

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on expandable_widgets