toshiaki-h / split_view

SplitView for Flutter
MIT License
38 stars 20 forks source link

can we add a optional attribute gripColorActive ? #9

Closed xiaosongmao123 closed 3 years ago

xiaosongmao123 commented 3 years ago

Please add a optional attribute gripColorActive

so when dragging the size,we can Highlight the gripbar

slipt_view.dart line:202

child: GestureDetector(
              behavior: HitTestBehavior.translucent,
              onVerticalDragUpdate: (detail) {
                final RenderBox container = context.findRenderObject() as RenderBox;
                final pos = container.globalToLocal(detail.globalPosition);
                if (pos.dx > widget.positionLimit && pos.dx < (container.size.width - widget.positionLimit)) {
                  weight.value = pos.dx / container.size.width;
                }
              },

add onVerticalDragDown to change background color to gripColorActive (blue), add onVerticalDragEnd to recovery background color to gripColor (white),

child: GestureDetector(
              behavior: HitTestBehavior.translucent,
              onVerticalDragDown: (detail) {
                setState(() {
                  colorbg = Colors.blue; //widget.gripColorActive
                });
              },
              onVerticalDragEnd: (details) {
                setState(() {
                  colorbg = widget.gripColor;
                });
              },
              onVerticalDragUpdate: (detail) {
                final RenderBox container = context.findRenderObject() as RenderBox;
                final pos = container.globalToLocal(detail.globalPosition);
                if (pos.dx > widget.positionLimit && pos.dx < (container.size.width - widget.positionLimit)) {
                  weight.value = pos.dx / container.size.width;
                }
              },

active

toshiaki-h commented 3 years ago

@xiaosongmao123 Thank you for your good idea. I think it would be better if it had that function as well. I'll incorporate that idea.

xiaosongmao123 commented 3 years ago

i add mouse hove ,just like vscode , onhover-->Highlight ondrag-->Highlight

Maybe more eye-catching

MouseRegion(
            onEnter: (_) {
              setState(() => _gripColor = widget.gripColorActive);
            },
            onExit: (_) {
              if (ondarg == false) setState(() => _gripColor = widget.gripColor);
            },

full code


  bool ondarg = false;
  Widget _buildHorizontalView(BuildContext context, BoxConstraints constraints, double w) {
    double left = constraints.maxWidth * w;
    double right = constraints.maxWidth * (1.0 - w);
    final double halfGripSize = widget.gripSize / 2.0;

    if (widget.maxWidthSidebar != null && left > widget.maxWidthSidebar!) {
      left = widget.maxWidthSidebar!;
      right = constraints.maxWidth - widget.maxWidthSidebar!;
    } else if (widget.minWidthSidebar != null && left < widget.minWidthSidebar!) {
      left = widget.minWidthSidebar!;
      right = constraints.maxWidth - widget.minWidthSidebar!;
    }

    return Stack(
      children: <Widget>[
        Positioned(
          top: 0,
          left: 0,
          right: right + halfGripSize,
          bottom: 0,
          child: widget.view1,
        ),
        Positioned(
          top: 0,
          left: left + halfGripSize,
          right: 0,
          bottom: 0,
          child: widget.view2,
        ),
        Positioned(
          top: 0,
          left: left - halfGripSize,
          right: right - halfGripSize,
          bottom: 0,
          child: MouseRegion(
            onEnter: (_) {
              setState(() => _gripColor = widget.gripColorActive);
            },
            onExit: (_) {
              if (ondarg == false) setState(() => _gripColor = widget.gripColor);
            },
            cursor: SystemMouseCursors.resizeColumn,
            child: GestureDetector(
              behavior: HitTestBehavior.translucent,
              onHorizontalDragDown: (details) {
                ondarg = true;
                _gripColor = widget.gripColorActive;
              },
              onHorizontalDragEnd: (details) {
                ondarg = false;
                setState(() => _gripColor = widget.gripColor);
              },
              onHorizontalDragUpdate: (detail) {
                final RenderBox container = context.findRenderObject() as RenderBox;
                final pos = container.globalToLocal(detail.globalPosition);
                if (pos.dx > widget.positionLimit && pos.dx < (container.size.width - widget.positionLimit)) {
                  weight.value = pos.dx / container.size.width;
                }
              },
              child: Container(color: _gripColor),
            ),
          ),
        ),
      ],
    );
  }
}
toshiaki-h commented 3 years ago

@xiaosongmao123 Thank you for your suggestion. I forgot about the web. This is supported in version 2.1.1.

xiaosongmao123 commented 3 years ago

Thank you for your Time

I think the split_view it's getting better and I've used it in my projects