Hello! This is a great widget, thanks for sharing it. I've noticed one little thing, though:

I'm trying to animate a fade in of the divider like this:

return AnimatedBuilder(
  animation: _animationCurve!,
  builder: (context, widget) {
    return MultiSplitViewTheme(
      data: MultiSplitViewThemeData(
        dividerPainter: DividerPainters.grooved2(
          color: buttonColor.withAlpha((_animationCurve!.value * 255).round()), 
          highlightedColor: highlightColor
        )
      ),
      child: MultiSplitView(...

I've confirmed that the the color values are getting animated correctly, and it winds up with 0xffd0d0d0 after the animation is complete, but the divider remains completely transparent on screen, even when I force refreshes.

onSizeChange gives me two indexes. What do I do with those? I need to get the weights of all the areas so I can save them, but the areas aren't updated until after this is called.

 void _onSizeChange(int childIndex1, int childIndex2) {
    Area tmp = controller.getArea(childIndex1);
    print('$childIndex1 : ${tmp.weight}');   //  <===== old value

    tmp = controller.getArea(childIndex2);
    print('$childIndex2 : ${tmp.weight}');   //  <===== old value
  }

The areas get updated after this call, so I guess I could do a Future.delay and then do the save, but it seems this should be simpler. Am I doing it wrong?

Thanks for your work on this great plugin!

We have a pretty simple use case: we want column A to be resizable down to a minimum of 100px, and column B to be resizable down to a minimum of 200px, and so on. As far as I can tell this is not readily achievable. If we're missing it, let me know. :)

can we use px width? by now only percentage is supported

// setting 10% of weight for the first child
MultiSplitViewController(weights: [0.1]))

// setting 40% of minweight for the first child
MultiSplitView(children: [child1, child2], minimalWeight: .40),

i want this:

// setting 250px of weight for the first child
MultiSplitViewController(width: [250]))

// setting 250px of minweight for the first child
MultiSplitView(children: [child1, child2], minimalWidth: 250),

Hi @caduandrade,

Thanks for this lib as well :)

I'd like to programatically change the position of the splitter when it is double clicked - reset it to its initial position. I couldn't find a way to detect any clicks on the splitter, am I missing something?

Children are wrapped inside other widgets, so they lose state when new ones are added or old ones are removed. It does not happen, when children are added to/removed from the end of the list. That's why I have updated the example to show the problem more clearly. Using child's key in root wrapping widget (Positioned, in this case) solves the problem and does not seem to cause any new ones.

Got this: see code to reproduce below.

#5 GestureRecognizer.invokeCallback package:flutter/…/gestures/recognizer.dart:198 #6 DragGestureRecognizer._checkStart package:flutter/…/gestures/monodrag.dart:429 #7 DragGestureRecognizer.acceptGesture package:flutter/…/gestures/monodrag.dart:349 #8 GestureArenaManager._resolveByDefault package:flutter/…/gestures/arena.dart:251 #9 GestureArenaManager._tryToResolveArena. package:flutter/…/gestures/arena.dart:232 (elided 10 frames from dart:async) Handler: "onStart" Recognizer: HorizontalDragGestureRecognizer#6ebbe debugOwner: GestureDetector start behavior: start

════════ Exception caught by gesture ═══════════════════════════════════════════ RangeError (index): Invalid value: Not in inclusive range 0..1: 2

If I try to resize the rightmost bar I get that crash.

import 'package:flutter/material.dart';
import 'package:multi_split_view/multi_split_view.dart';

class MeditationPanel extends StatefulWidget {
  @override
  _MeditationPanelState createState() => _MeditationPanelState();
}

class _MeditationPanelState extends State<MeditationPanel>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);

    return MultiSplitViewExample();
  }
}

class MultiSplitViewExample extends StatefulWidget {
  final List<Color> _colors = [
    Colors.red,
    Colors.blue,
    Colors.green,
    Colors.purple,
    Colors.brown,
    Colors.pinkAccent
  ];

  @override
  _MultiSplitViewExampleState createState() => _MultiSplitViewExampleState();
}

class _MultiSplitViewExampleState extends State<MultiSplitViewExample> {
  MultiSplitViewController controller =
      MultiSplitViewController(weights: [0.01]);

  @override
  Widget build(BuildContext context) {
    final Widget buttons = Container(
      padding: const EdgeInsets.all(8),
      child: Row(
        children: const [
          Text('stuff'),
        ],
      ),
    );

    final List<Widget> rightChildren = List.empty(growable: true);
    for (int i = 0; i < 2; i++) {
      final Widget view = Container(
        color: widget._colors[i % widget._colors.length],
        child: const SingleChildScrollView(
          child: Text('testing'),
        ),
      );
      rightChildren.add(view);
    }

    final sidebar = Container(color: Colors.deepOrange);
    final rightbar = Container(color: Colors.deepOrange);
    final bottomBar = Container(color: Colors.grey);

    final topBar = MultiSplitView(
      axis: Axis.vertical,
      controller: controller,
      onSizeChange: _onSizeChange,
      children: rightChildren,
    );

    final MultiSplitView multiSplitView = MultiSplitView(
      controller: controller,
      onSizeChange: _onSizeChange,
      children: [
        sidebar,
        MultiSplitView(
          axis: Axis.vertical,
          controller: controller,
          onSizeChange: _onSizeChange,
          children: [
            topBar,
            bottomBar,
          ],
        ),
        rightbar,
      ],
    );

    return Column(
      children: [buttons, Expanded(child: multiSplitView)],
    );
  }

  void _onSizeChange(int childIndex1, int childIndex2) {
    print('change - childIndex1: $childIndex1 - childIndex2: $childIndex2');
  }
}

Forgive me if I'm overlooking something simple, but I'm really new to Flutter.

I have a MultiSplitViewController that has two panes: Master() and Detail(). I have a Notifier in place that changes when a user clicks on a menu item.

When the menu is set to the Dashboard, I want my areas to be:

[Area(weight: .75), Area(weight: .25)]

Otherwise, I want it to be:

[Area(weight: .25), Area(weight: .75)]

My notifier works elsewhere in my app, but I can't get the areas property to be reactive. Here is my code:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var menuProvider = Provider.of<MenuNotifier>(context);

    //Dashboard Split View ---
    MultiSplitViewController splitViewController = MultiSplitViewController(
      areas: menuProvider.menu == 'Dashboard'
          ? [Area(weight: .75), Area(weight: .25)]
          : [Area(weight: .25), Area(weight: .75)],
    );

    MultiSplitView splitView = MultiSplitView(
      dividerBuilder:
          (axis, index, resizable, dragging, highlighted, themeData) {
        return ...
      },
      controller: splitViewController,
      children: const [
        Master(),
        Detail(),
      ],
    );

    MultiSplitViewTheme theme = MultiSplitViewTheme(
      data: MultiSplitViewThemeData(dividerThickness: 16),
      child: splitView,
    );

    //===================================
    return MaterialApp(
      home: Scaffold(
        body: Row(
          children: [
            const Menu(),
            Flexible(
              flex: 1,
              child: theme,
            ),
          ],
        ),
      ),
    );
  }
}

Any idea what I'm doing wrong? Thank you!

I have a usecase where'd I'd like to stack all the children together as close to their dividers as possible. At the moment minimum size of 0 means "ignore", but I'd like it if it really did mean "0".

Can you give an example of how I can get the new area sizes after a weight change?

I'd like to give users the chance to lock the split point after a resize, but can't find any way using onWeightChange to save the area info. I've got a controller in state but can't see it from onWeightChange function (unless I'm missing something obvious which is ever possible lol)

thanks Martin

Looking through the source code, not 100% sure how easy this would be to implement, but it would be is it possible to implement the position of the border to be 'above' the children within the stack? This would allow the children to fill the total constraints (width or height) and then have the DividerPainter backgroundColor = [Colors.transparent] and only show the border with the highlightedBackgroundColor. This would mean each position is child's left position + 1/2 border thickness and provide for the child to have a border property.

For example, if we think about how VS Code layout is built the primary-side-bar and editor have a resizable 'border' that appears onHover/onFocus. However, the border appears elevated in front of the primary-side-bar and editor (even though the elevation appears to be 0).

When using a dividerPainter with Axis.vertical, touching the divider causes the divider to 'grow' to the highlightedSize - this is correct behaviour.

When doing the same with Axis.horizontal, the divider doesn't grow until it is dragged.

MultiSplitViewController(areas: [Area(size: 300)]);

I set width of the first view to size of 300, but it changes when the window is maximized. How can I get it fixed?

I can resize in old versions:

controller: MultiSplitViewController(
    weights: [
      !visible1 && visible2 ?0.0000000000001 : visible1 && !visible2 ?1 :0.5,
      visible1 && !visible2 ?0.0000000000001 : !visible1 && visible2 ?1 :0.5
      ]
),

But can't in new version

controller: MultiSplitViewController(
  areas: [
    Area(weight: !visible1 && visible2 ?0.1 : visible1 && !visible2 ?1 :0.5),
    Area( weight: visible1 && !visible2 ?0.1 : !visible1 && visible2 ?1 :0.5)
  ],
),

For an example see codepen: https://codepen.io/steve_walson/pen/oNprgre

It'd be really nice, as a user, to have the dividers be able to adjust the weights of panes in front and behind if the dragged divider pushes into other ones. It's hard to explain, but hopefully this gif makes it clear:

I have a sidebar on the right and left and a view in the middle.

When I resize the window, I only want the middle view to grow or shrink. The other views must be manually resized.

I also want to specify that the sidebar has a default width in pixels that can resize beyond that if the user drags it.

I know NSSplitView from Cocoa handles cases like this, but I haven't looked at it in years.

Also you should have a reasonable default divider painter. Everyone is going to want a decent default. See split_view, they have some grab handles by default that are nice. I just want to set the divider color and a mouse over color, and the default painter can redraw when I move the mouse over it.

Writing a full featured split view is actually pretty difficult, so be sure your ready for some pain if you plan on updating it to do all this. I made one years ago.