collapsebox 1.0.0 copy "collapsebox: ^1.0.0" to clipboard
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.

example/collapsebox_example.dart

// Copyright (c) 2018, Marco Esposito (marcoesposito1988@gmail.com).
// Please see the AUTHORS file for details. All rights reserved.
// Use of this source code is governed by a BSD-style license
// that can be found in the LICENSE file.

import 'package:collapsebox/view/column_collapsebox.dart';
import 'package:collapsebox/view/custom_collapsebox.dart';
import 'package:collapsebox/vm/collapsebox_viewmodel.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  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
    );
  }

  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方式
    );
  }
}
1
likes
40
pub points
39%
popularity

Publisher

unverified uploader

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

License

MIT (LICENSE)

Dependencies

flutter, provider

More

Packages that depend on collapsebox