pub package

stretchbox

An stretchbox widget provides two modes of collapse and expand, using provider components to support widget state change when click.

Usage

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  ...
    
  stretchbox: ^1.1.0

stretchbox Basic usage:

Widget buildColumnStretchedBoxWidget() {
  return ColumnStretchedBoxWidget(
    arrowImageRes: 'images/image_down_expand.png',// arrow image resource
    arrowContainerColor: Colors.white,// arrow image area bg color
//      stretchState: StretchedBoxState.normal,// normal default
    normalChild: Container(// area show always
      color: Colors.white,
      child: Column(
        children: normalList,
      ),
    ),
    expandChild: Container(// area show by expand
      color: Colors.black12,
      child: Column(
        children: [...normalList, ...expandList],
      ),
    ),
  );
}

stretchbox Custom usage:

Widget buildColumnStretchedBoxWidget() {
  return ColumnStretchedBoxWidget(
    ...
    bottomBarWidget: _buildCustomBottomWidget,// bottom widget custom set
  );
}

allow bottom widget custom set.

Widget _buildCustomBottomWidget(
    BuildContext context, StretchedBoxViewModel stretchedBoxViewModel) {
  Widget text;
  if (stretchedBoxViewModel?.isExpand() ?? false) {
      text = Text("Click Collapse");
  } else {
      text = Text("Click Expand");
  }

  return GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () {
      stretchedBoxViewModel?.switchStretchMode();
    },
    child: Container(
      height: 32,
      width: double.infinity,
      color: Colors.deepPurpleAccent,
      child: Center(
        child: text,
      ),
    ),
  );
}

screenshot:

see the example.

idea

Libraries

column_stretched_box
flutter_udstretchbox
stretchbox
An Widget provides two modes of collapse and expand, using provider components to support widget state change when click.
stretched_box_state
stretched_box_viewmodel