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
points
10
downloads

Publisher

unverified uploader

Weekly Downloads

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