Allow to fully customize separator widget with a builder

example/android/app/build.gradle

@@ -26,7 +26,7 @@ apply plugin: 'kotlin-android'
 apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
 
 android {
-    compileSdkVersion 30
+    compileSdkVersion 31
 
     compileOptions {
         sourceCompatibility JavaVersion.VERSION_1_8

example/android/build.gradle

@@ -1,12 +1,12 @@
 buildscript {
-    ext.kotlin_version = '1.3.50'
+    ext.kotlin_version = '1.6.10'
     repositories {
         google()
         mavenCentral()
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.1.0'
+        classpath 'com.android.tools.build:gradle:7.1.1'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-all.zip

example/lib/custom_separator.dart

@@ -0,0 +1,66 @@
+import 'package:flutter/material.dart';
+import 'package:resizable_widget/resizable_widget.dart';
+
+class DefaultSeparatorWidget extends StatelessWidget {
+  final SeparatorArgsInfo info;
+  final SeparatorController controller;
+
+  const DefaultSeparatorWidget({
+    Key? key,
+    required this.info,
+    required this.controller,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(children: [
+      const Center(child: Text("Default behavior with custom widget")),
+      DefaultSeparator(info: info, controller: controller),
+    ]);
+  }
+}
+
+class CustomSeparatorWidget extends StatefulWidget {
+  final SeparatorArgsInfo info;
+  final SeparatorController controller;
+
+  const CustomSeparatorWidget({
+    Key? key,
+    required this.info,
+    required this.controller,
+  }) : super(key: key);
+
+  @override
+  State<CustomSeparatorWidget> createState() => _SeparatorWidgetState();
+}
+
+class _SeparatorWidgetState extends State<CustomSeparatorWidget> {
+  refresh() => setState(() {});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+        height: widget.info.size,
+        child: Row(children: [
+          Expanded(
+              child: Container(
+            height: widget.info.size,
+            color: Colors.black,
+            child: const Center(child: Text("Non draggable area")),
+          )),
+          Expanded(
+              child: Container(
+                  height: widget.info.size,
+                  color: Colors.grey,
+                  child: GestureDetector(
+                    behavior: HitTestBehavior.translucent,
+                    child: const Center(child: Text("Draggable area")),
+                    onPanDown: (details) =>
+                        widget.controller.onPanStart(details),
+                    onPanUpdate: (details) =>
+                        widget.controller.onPanUpdate(details, context),
+                    onPanEnd: (details) => widget.controller.onPanEnd(details),
+                  )))
+        ]));
+  }
+}

example/lib/main.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:resizable_widget/resizable_widget.dart';
 
+import 'custom_separator.dart';
+
 void main() {
   runApp(const MyApp());
 }
@@ -11,55 +13,116 @@ class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      title: 'Resizable Widget Example',
-      theme: ThemeData.dark(),
-      home: const MyPage(),
+        title: 'Resizable Widget Example',
+        theme: ThemeData.dark(),
+        home: DefaultTabController(
+            length: 3,
+            child: Scaffold(
+                appBar: AppBar(
+                    title: const Text("Resizable Widget Example"),
+                    bottom: const TabBar(tabs: [
+                      Tab(text: "Simple"),
+                      Tab(text: "Default Separator"),
+                      Tab(text: "Custom Separator"),
+                    ])),
+                body: const TabBarView(
+                    physics: NeverScrollableScrollPhysics(),
+                    children: [
+                      SimpleExamplePage(),
+                      DefaultSeparatorExamplePage(),
+                      CustomSeparatorExamplePage(),
+                    ]))));
+  }
+}
+
+class SimpleExamplePage extends StatelessWidget {
+  const SimpleExamplePage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return ResizableWidget(
+      isHorizontalSeparator: false,
+      isDisabledSmartHide: false,
+      separatorColor: Colors.white12,
+      separatorSize: 4,
+      onResized: _printResizeInfo,
+      children: [
+        Container(color: Colors.greenAccent),
+        ResizableWidget(
+          isHorizontalSeparator: true,
+          separatorColor: Colors.blue,
+          separatorSize: 10,
+          children: [
+            Container(color: Colors.greenAccent),
+            ResizableWidget(
+              children: [
+                Container(color: Colors.greenAccent),
+                Container(color: Colors.yellowAccent),
+                Container(color: Colors.redAccent),
+              ],
+              percentages: const [0.2, 0.5, 0.3],
+            ),
+            Container(color: Colors.redAccent),
+          ],
+        ),
+        Container(color: Colors.redAccent),
+      ],
     );
   }
+
+  _printResizeInfo(List<WidgetSizeInfo> dataList) {
+    debugPrint(dataList.map((x) => '(${x.size}, ${x.percentage}%)').join(", "));
+  }
 }
 
-class MyPage extends StatelessWidget {
-  const MyPage({Key? key}) : super(key: key);
+class DefaultSeparatorExamplePage extends StatelessWidget {
+  const DefaultSeparatorExamplePage({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text('Resizable Widget Example'),
+    return ResizableWidget(
+      isHorizontalSeparator: true,
+      separatorSize: 16,
+      separatorBuilder: (info, controller) => DefaultSeparatorWidget(
+        info: info,
+        controller: controller,
       ),
-      body: ResizableWidget(
-        isHorizontalSeparator: false,
-        isDisabledSmartHide: false,
-        separatorColor: Colors.white12,
-        separatorSize: 4,
-        onResized: _printResizeInfo,
-        children: [
-          Container(color: Colors.greenAccent),
-          ResizableWidget(
-            isHorizontalSeparator: true,
-            separatorColor: Colors.blue,
-            separatorSize: 10,
-            children: [
-              Container(color: Colors.greenAccent),
-              ResizableWidget(
-                children: [
-                  Container(color: Colors.greenAccent),
-                  Container(color: Colors.yellowAccent),
-                  Container(color: Colors.redAccent),
-                ],
-                percentages: const [0.2, 0.5, 0.3],
-              ),
-              Container(color: Colors.redAccent),
-            ],
-          ),
-          Container(color: Colors.redAccent),
-        ],
+      onResized: _printResizeInfo,
+      children: [
+        Container(color: Colors.greenAccent),
+        Container(color: Colors.redAccent),
+        Container(color: Colors.blueAccent),
+      ],
+    );
+  }
+
+  _printResizeInfo(List<WidgetSizeInfo> dataList) {
+    debugPrint(dataList.map((x) => '(${x.size}, ${x.percentage}%)').join(", "));
+  }
+}
+
+class CustomSeparatorExamplePage extends StatelessWidget {
+  const CustomSeparatorExamplePage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return ResizableWidget(
+      isHorizontalSeparator: true,
+      separatorSize: 40,
+      separatorBuilder: (info, controller) => CustomSeparatorWidget(
+        info: info,
+        controller: controller,
       ),
+      onResized: _printResizeInfo,
+      children: [
+        Container(color: Colors.greenAccent),
+        Container(color: Colors.redAccent),
+        Container(color: Colors.blueAccent),
+      ],
     );
   }
 
-  void _printResizeInfo(List<WidgetSizeInfo> dataList) {
-    // ignore: avoid_print
-    print(dataList.map((x) => '(${x.size}, ${x.percentage}%)').join(", "));
+  _printResizeInfo(List<WidgetSizeInfo> dataList) {
+    debugPrint(dataList.map((x) => '(${x.size}, ${x.percentage}%)').join(", "));
   }
 }

example/windows/flutter/generated_plugin_registrant.cc

@@ -2,6 +2,8 @@
 //  Generated file. Do not edit.
 //
 
+// clang-format off
+
 #include "generated_plugin_registrant.h"
 
 

example/windows/flutter/generated_plugin_registrant.h

@@ -2,6 +2,8 @@
 //  Generated file. Do not edit.
 //
 
+// clang-format off
+
 #ifndef GENERATED_PLUGIN_REGISTRANT_
 #define GENERATED_PLUGIN_REGISTRANT_
 

lib/resizable_widget.dart

@@ -1,5 +1,8 @@
 /// Provide [ResizableWidget].
 library resizable_widget;
 
-export 'src/resizable_widget.dart' show ResizableWidget, OnResizedFunc;
+export 'src/resizable_widget.dart' show ResizableWidget, OnResizeBeginFunc, OnResizedFunc, OnResizeEndFunc, SeparatorBuilder;
 export 'src/widget_size_info.dart' show WidgetSizeInfo;
+export 'src/separator_controller.dart' show SeparatorController;
+export 'src/separator_args_info.dart' show SeparatorArgsInfo;
+export 'src/separator.dart' show DefaultSeparator;

lib/src/resizable_widget.dart

@@ -1,12 +1,17 @@
 import 'package:flutter/material.dart';
-import 'package:resizable_widget/src/resizable_widget_args_info.dart';
+import 'resizable_widget_args_info.dart';
 import 'resizable_widget_child_data.dart';
 import 'resizable_widget_controller.dart';
 import 'separator.dart';
+import 'separator_args_info.dart';
+import 'separator_controller.dart';
 import 'widget_size_info.dart';
 
 /// The callback argument type of [ResizableWidget.onResized].
 typedef OnResizedFunc = void Function(List<WidgetSizeInfo> infoList);
+typedef OnResizeBeginFunc = void Function(int separatorIndex, DragDownDetails details);
+typedef OnResizeEndFunc = void Function(int separatorIndex, DragEndDetails details);
+typedef SeparatorBuilder = Widget Function(SeparatorArgsInfo info, SeparatorController controller);
 
 /// Holds resizable widgets as children.
 /// Users can resize the internal widgets by dragging.
@@ -42,29 +47,37 @@ class ResizableWidget extends StatefulWidget {
   /// Separator color.
   final Color separatorColor;
 
+  /// An optional builder to fully customize the separator
+  final SeparatorBuilder? separatorBuilder;
+
   /// Callback of the resizing event.
   /// You can get the size and percentage of the internal widgets.
   ///
   /// Note that [onResized] is called every frame when resizing [children].
   final OnResizedFunc? onResized;
 
+  final OnResizeBeginFunc? onResizeBegin;
+
+  final OnResizeEndFunc? onResizeEnd;
+
   /// Creates [ResizableWidget].
   ResizableWidget({
     Key? key,
     required this.children,
     this.percentages,
-    @Deprecated('Use [isHorizontalSeparator] instead')
-        this.isColumnChildren = false,
+    @Deprecated('Use [isHorizontalSeparator] instead') this.isColumnChildren = false,
     this.isHorizontalSeparator = false,
     this.isDisabledSmartHide = false,
     this.separatorSize = 4,
     this.separatorColor = Colors.white12,
+    this.separatorBuilder,
     this.onResized,
+    this.onResizeBegin,
+    this.onResizeEnd,
   }) : super(key: key) {
     assert(children.isNotEmpty);
     assert(percentages == null || percentages!.length == children.length);
-    assert(percentages == null ||
-        percentages!.reduce((value, element) => value + element) == 1);
+    assert(percentages == null || percentages!.reduce((value, element) => value + element) == 1);
   }
 
   @override

lib/src/resizable_widget_args_info.dart

@@ -8,7 +8,10 @@ class ResizableWidgetArgsInfo {
   final bool isDisabledSmartHide;
   final double separatorSize;
   final Color separatorColor;
+  final SeparatorBuilder? separatorBuilder;
+  final OnResizeBeginFunc? onResizeBegin;
   final OnResizedFunc? onResized;
+  final OnResizeEndFunc? onResizeEnd;
 
   ResizableWidgetArgsInfo(ResizableWidget widget)
       : children = widget.children,
@@ -20,5 +23,8 @@ class ResizableWidgetArgsInfo {
         isDisabledSmartHide = widget.isDisabledSmartHide,
         separatorSize = widget.separatorSize,
         separatorColor = widget.separatorColor,
-        onResized = widget.onResized;
+        separatorBuilder = widget.separatorBuilder,
+        onResized = widget.onResized,
+        onResizeBegin = widget.onResizeBegin,
+        onResizeEnd = widget.onResizeEnd;
 }