Multi split view

A widget to provides horizontal or vertical multiple split view for Flutter.

animated

  • Horizontal or vertical
  • Configurable weight or size for each child
  • Automatic calculation of weights when:
    • Child added without defined weight
    • Weight redistribution when a child is removed
  • Listener to detect children size changes

Usage

Horizontal

    MultiSplitView(children: [child1, child2, child3]);

horizontal

Vertical

    MultiSplitView(axis: Axis.vertical, children: [child1, child2]);

vertical

Horizontal and vertical

    MultiSplitView(axis: Axis.vertical, children: [
      MultiSplitView(children: [child1, child2, child3]),
      child4
    ]);

horizontalvertical

Setting the weight

    // setting 10% of weight for the first child
    MultiSplitView(
        children: [child1, child2, child3],
        controller: MultiSplitViewController(weights: [0.1]));

horizontalweight

Minimal child weight

    MultiSplitView(axis: Axis.vertical, children: [
      MultiSplitView(children: [child1, child2], minimalWeight: .40),
      MultiSplitView(children: [child3, child4])
    ]);

minimalweight

Minimal child size in pixels

Used if minimalWeight has not been set. The size will be converted into weight and will respect the limit defined by the MultiSplitView.defaultMinimalWeight constant, allowing all children to be visible.

    MultiSplitView(axis: Axis.vertical, children: [
      MultiSplitView(children: [child1, child2], minimalSize: 100),
      MultiSplitView(children: [child3, child4])
    ]);

Resizable

    MultiSplitView(children: [child1, child2, child3], resizable: false);

Listener

    MultiSplitView(
        children: [child1, child2, child3, child4],
        onSizeChange: (childIndex1, childIndex2) => print(
            'Index of children whose size has changed: $childIndex1 and $childIndex2'));

Divider color

The default color is NULL.

    MultiSplitView(
        children: [child1, child2], dividerColor: Colors.black);

dividercolor

Divider thickness

    MultiSplitView(
        children: [child1, child2, child3], dividerThickness: 30);

dividerthickness

Divider custom painter

    var dividerPainter = (Axis axis, bool resizable, bool highlighted, Canvas canvas, Size size) {
      var paint = Paint()
        ..style = PaintingStyle.stroke
        ..color = Colors.black
        ..isAntiAlias = true;
      if (axis == Axis.vertical) {
        double dashHeight = 9, dashSpace = 5, startY = 0;
        while (startY < size.height) {
          canvas.drawLine(Offset(size.width / 2, startY),
              Offset(size.width / 2, startY + dashHeight), paint);
          startY += dashHeight + dashSpace;
        }
      } else {
        double dashWidth = 9, dashSpace = 5, startX = 0;
        while (startX < size.width) {
          canvas.drawLine(Offset(startX, size.height / 2),
              Offset(startX + dashWidth, size.height / 2), paint);
          startX += dashWidth + dashSpace;
        }
      }
    };

    MultiSplitView(
        axis: Axis.vertical,
        children: [
          MultiSplitView(
              children: [child1, child2, child3],
              dividerThickness: 10,
              dividerPainter: dividerPainter),
          child4
        ],
        dividerThickness: 10,
        dividerPainter: dividerPainter);

Libraries

multi_split_view