We use the expanded_wrap plugin to build a expanded wrap。

Features

• support minLines
• support maxLines
• support dropChild
• support nearChild
• support separate
• support ExpandedWrapNotifier/ExpandedWrapController

Getting started

dependencies:
  expanded_wrap: '^1.0.1'

Usage

_buildExpandedWrap() async {
  return ExpandedWrap(
    spacing: 24,
    runSpacing: 24,
    minLines: minLines,
    maxLines: maxLines,
    nearChild: Text('nearChild'),
    nearAlignment: WrapMoreNearAlignment.stretch,
    alwaysShowNearChild:
    false, // When set to false, it means that [nearChild] will only be displayed when there is more unfinished data
    nearSpacing: 20,
    nearDirection: AxisDirection.left,
    separate: Container(
      width: 1,
      height: 60,
      margin: EdgeInsets.symmetric(horizontal: 4),
      color: Colors.red,
    ),
    dropBuilder: (BuildContext context, ExpandedWrapController controller,
        Widget? child) {
      return Material(
        child: Ink(
          color: Colors.red.withValues(alpha: 0.1),
          width: 100,
          height: 24,
          child: InkWell(
            onTap: controller.toggle,
            child: Center(
              child: Text(
                controller.isExpanded ? 'collapse' : 'expand',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 18,
                ),
                maxLines: 1,
              ),
            ),
          ),
        ),
      );
    },
    children: textList.indexed
        .map(
          (s) => Container(
        decoration: BoxDecoration(
          color: Colors.red.withValues(alpha: 0.01),
          border: Border.all(color: Colors.red, width: 0.5),
          borderRadius: BorderRadius.circular(12),
        ),
        padding: EdgeInsets.symmetric(horizontal: 12),
        height: 24,
        child: Align(
          heightFactor: 1.0,
          widthFactor: 1.0,
          child: Text(
            '${s.$1}#${s.$2}',
            textAlign: TextAlign.start,
            maxLines: 2,
            //overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    )
        .toList(),
  );
}