collapsebox 1.0.0
collapsebox: ^1.0.0 copied to clipboard

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

pub package

collapsebox #

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

Guild Link : https://juejin.cn/post/6907122316715491335/

Usage #

pubspec.yaml

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

collapsebox Basic usage:

Widget buildColumnCollapseBoxWidget() {
  return ColumnCollapseBoxWidget(
    // arrow image resource
    bottomArrowImageRes: 'images/image_down_expand.png',
    // arrow image area bg color
    bottomBarColor: Colors.white,
//      stretchState: StretchedBoxState.normal,// normal default
    // area show always
    alwaysShowChild: Container(
      color: Colors.white,
      child: Column(
        children: [
          Text("Normal Area 1"),
          Text("Normal Area 2"),
          Text("Normal Area 3"),
        ],
      ),
    ),
    // area show by expand
    collapsedChild: Container(
      // 展开展示区域
      color: Colors.black12,
      child: Column(
        children: [
          Text("Collapse Area 1"),
          Text("Collapse Area 2"),
        ],
      ),
    ),
//      bottomBarWidget: _buildCustomBottomWidget,// bottom widget custom set
  );
}

collapsebox Custom usage:

Widget buildCustomStretchedBoxWidget() {
  return CollapseBoxWidget(
    alwaysShowChild: Container(
      color: Colors.white,
      child: Column(
        children: [
          Text("Normal Area 1"),
          Text("Normal Area 2"),
          Text("Normal Area 3"),
        ],
      ),
    ),
    collapsedChild: Container(
      color: Colors.black12,
      child: Column(
        children: [
          Text("Collapse Area 1"),
          Text("Collapse Area 2"),
        ],
      ),
    ),
    // custom bottomBar Widget set
    bottomBarWidget:
        (BuildContext context, CollapseboxBoxViewModel collapseboxViewModel) {
      Widget text;
      if (collapseboxViewModel?.isExpand() ?? false) {
        text = Text("Click Collapse");
      } else {
        text = Text("Click Expand");
      }

      return GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          collapseboxViewModel?.switchCollapseBoxMode();
        },
        child: Container(
          height: 32,
          width: double.infinity,
          color: Colors.deepPurpleAccent,
          child: Center(
            child: text,
          ),
        ),
      );
    }, // 自定义底部Widget方式
  );
}

allow bottom widget custom set.

screenshot: #

see the example.

idea #

1
likes
90
pub points
0%
popularity

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, provider

More

Packages that depend on collapsebox