Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flutter Resize Panel
// Copyright 2019 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
enum SplitMode { normal, leftExpand, rightExpand }
/// A widget that takes two children, lays them out along [axis], and allows
/// the user to resize them.
///
/// The user can customize the amount of space allocated to each child by
/// dragging a divider between them.
///
/// [initialFirstFraction] defines how much space to give the [firstChild]
/// when first building this widget. [secondChild] will take the remaining
/// space.
///
/// The user can drag the widget with key [dividerKey] to change
/// the space allocated between [firstChild] and [secondChild].
// TODO(djshuckerow): introduce support for a minimum fraction a child is allowed.
class Split extends StatefulWidget {
/// Builds a split oriented along [axis].
const Split({
Key key,
@required this.axis,
@required this.firstChild,
@required this.secondChild,
double initialFirstFraction,
this.mode = SplitMode.normal,
}) : initialFirstFraction = initialFirstFraction ?? 0.5,
assert(axis != null),
assert(firstChild != null),
assert(secondChild != null),
super(key: key);
final SplitMode mode;
/// The main axis the children will lay out on.
///
/// If [Axis.horizontal], the children will be placed in a [Row]
/// and they will be horizontally resizable.
///
/// If [Axis.vertical], the children will be placed in a [Column]
/// and they will be vertically resizable.
///
/// Cannot be null.
final Axis axis;
/// The child that will be laid out first along [axis].
final Widget firstChild;
/// The child that will be laid out last along [axis].
final Widget secondChild;
/// The fraction of the layout to allocate to [firstChild].
///
/// [secondChild] will receive a fraction of `1 - initialFirstFraction`.
final double initialFirstFraction;
/// The key passed to the divider between [firstChild] and [secondChild].
///
/// Visible to grab it in tests.
@visibleForTesting
Key get dividerKey => Key('$this dividerKey');
/// The size of the divider between [firstChild] and [secondChild] in
/// logical pixels (dp, not px).
static const double dividerMainAxisSize = 80.0;
@override
State<StatefulWidget> createState() => _SplitState();
}
class _SplitState extends State<Split> {
double get firstFraction => _fractionMap[widget.key];
set firstFraction(double value) => _fractionMap[widget.key] = value;
double get secondFraction => 1 - firstFraction;
bool get isHorizontal => widget.axis == Axis.horizontal;
static Map<Key, double> _fractionMap = {};
@override
void initState() {
super.initState();
if (!_fractionMap.containsKey(widget.key)) {
_fractionMap[widget.key] = widget.initialFirstFraction;
}
}
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: _buildLayout);
}
Widget _buildLayout(BuildContext context, BoxConstraints constraints) {
final width = constraints.maxWidth;
final height = constraints.maxHeight;
final axisSize = isHorizontal ? width : height;
final crossAxisSize = isHorizontal ? height : width;
const halfDivider = Split.dividerMainAxisSize / 2.0;
// Determine what fraction to give each child, including enough space to
// display the divider.
double firstSize = axisSize * firstFraction;
double secondSize = axisSize * secondFraction;
// Clamp the sizes to be sure there is enough space for the dividers.
firstSize = firstSize.clamp(halfDivider, axisSize - halfDivider);
secondSize = secondSize.clamp(halfDivider, axisSize - halfDivider);
// Remove space from each child to place the divider in the middle.
firstSize = firstSize - halfDivider;
secondSize = secondSize - halfDivider;
void updateSpacing(DragUpdateDetails dragDetails) {
final delta = isHorizontal ? dragDetails.delta.dx : dragDetails.delta.dy;
final fractionalDelta = delta / axisSize;
setState(() {
// Update the fraction of space consumed by the children,
// being sure not to allocate any negative space.
firstFraction += fractionalDelta;
firstFraction = firstFraction.clamp(0.0, 1.0);
});
}
// TODO(https://github.com/flutter/flutter/issues/43747): use an icon.
// The material icon for a drag handle is not currently available.
// For now, draw an indicator that is 3 lines running in the direction
// of the main axis, like a hamburger menu.
// TODO(https://github.com/flutter/devtools/issues/1265): update mouse
// to indicate that this is resizable.
final dragIndicator = Flex(
direction: isHorizontal ? Axis.vertical : Axis.horizontal,
mainAxisSize: MainAxisSize.min,
children: [
for (var i = 0; i < min(crossAxisSize / 6.0, 3).floor(); i++)
Padding(
padding: EdgeInsets.symmetric(
vertical: isHorizontal ? 2.0 : 0.0,
horizontal: isHorizontal ? 0.0 : 2.0,
),
child: DecoratedBox(
decoration: BoxDecoration(
color: Theme.of(context).indicatorColor,
borderRadius: BorderRadius.circular(Split.dividerMainAxisSize),
),
child: SizedBox(
height: isHorizontal ? 2.0 : Split.dividerMainAxisSize - 2.0,
width: isHorizontal ? Split.dividerMainAxisSize - 2.0 : 2.0,
),
),
),
],
);
const size = 8.0;
final children = [
widget.mode == SplitMode.leftExpand
? Expanded(child: widget.firstChild)
: SizedBox(
width: isHorizontal ? firstSize : width,
height: isHorizontal ? height : firstSize,
child: widget.firstChild,
),
MouseRegion(
cursor: SystemMouseCursors.resizeLeftRight,
child: Container(
color: Colors.black,
child: GestureDetector(
key: widget.dividerKey,
behavior: HitTestBehavior.translucent,
onHorizontalDragUpdate: isHorizontal ? updateSpacing : null,
onVerticalDragUpdate: isHorizontal ? null : updateSpacing,
child: SizedBox(
width: isHorizontal ? size : width,
height: isHorizontal ? height : size,
child: Center(
child: Container(
height: !isHorizontal ? 2.0 : Split.dividerMainAxisSize - 2.0,
width: !isHorizontal ? Split.dividerMainAxisSize - 2.0 : 2.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
),
),
),
),
),
),
widget.mode == SplitMode.rightExpand
? Expanded(child: widget.secondChild)
: SizedBox(
width: isHorizontal ? secondSize : width,
height: isHorizontal ? height : secondSize,
child: widget.secondChild,
),
];
return Flex(direction: widget.axis, children: children);
}
}
@rodydavis

This comment has been minimized.

Copy link
Owner Author

@rodydavis rodydavis commented Nov 4, 2020

Based on this pull request, but modified a lot.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment