expandable_widgets

Description:

expandable widgets

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!')),
),
copied to clipboard
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"),
),
copied to clipboard
Expandable Text:
You can use ExpandableText by giving the required parameter, textWidget. ExpandableText will handle the rest.

ExpandableText(textWidget: Text(data, maxLines: 3),
copied to clipboard
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),
),
),
copied to clipboard
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),
),
),
],
),
copied to clipboard
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')),
),
),
),
copied to clipboard
ExpandableText
You can change the location of the arrow

ExpandableText(
textWidget: Text(data).copyWith(maxLines: 3),
arrowLocation: ArrowLocation.bottom,
finalArrowLocation: ArrowLocation.bottom,
),
copied to clipboard
You can use helper text

ExpandableText(textWidget: Text(data, maxLines: 3), helper: Helper.text),
copied to clipboard
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!'),
),
copied to clipboard
Or you can remove the helper

ExpandableText(textWidget: Text(data, maxLines: 3), helper: Helper.none),
copied to clipboard
Known issues


ExpandableText with helper text is problematic on Web. Please see TextPainter.didExceedMaxLines method is always returning false on Web


Expandable with subChild has an inconsistent behaviour. This subject will be addressed in later versions.


For more info please see example.