From 4f0484f632c1761f33be32d81544be56795cc04a Mon Sep 17 00:00:00 2001 From: rajputvarun591 Date: Fri, 10 Feb 2023 22:37:48 +0530 Subject: [PATCH] Ability added to use cutsom icons along with default icons in Node Leading. --- .../example/lib/trees/controller_usage.dart | 6 ++- .../lib/src/builder.dart | 12 ++++- .../lib/src/node_widget.dart | 53 +++++++++++-------- .../lib/src/tree_view.dart | 30 ++++++++--- 4 files changed, 68 insertions(+), 33 deletions(-) diff --git a/packages/flutter_simple_treeview/example/lib/trees/controller_usage.dart b/packages/flutter_simple_treeview/example/lib/trees/controller_usage.dart index 268d44bb..26ac8f53 100644 --- a/packages/flutter_simple_treeview/example/lib/trees/controller_usage.dart +++ b/packages/flutter_simple_treeview/example/lib/trees/controller_usage.dart @@ -59,10 +59,12 @@ class _ControllerUsageState extends State { Widget buildTree() { return TreeView( treeController: _controller, + primaryIcon: Icon(Icons.check_box_outline_blank), + secondaryIcon: Icon(Icons.check_box), nodes: [ TreeNode(content: Text("node 1")), TreeNode( - content: Icon(Icons.audiotrack), + content: Text("Icons.audiotrack"), children: [ TreeNode(content: Text("node 21")), TreeNode( @@ -70,7 +72,7 @@ class _ControllerUsageState extends State { key: _key, children: [ TreeNode( - content: Icon(Icons.sentiment_very_satisfied), + content: Text("Icons.sentiment_very_satisfied"), ), ], ), diff --git a/packages/flutter_simple_treeview/lib/src/builder.dart b/packages/flutter_simple_treeview/lib/src/builder.dart index a9b8cd54..b8217f7f 100644 --- a/packages/flutter_simple_treeview/lib/src/builder.dart +++ b/packages/flutter_simple_treeview/lib/src/builder.dart @@ -11,8 +11,14 @@ import 'primitives/tree_controller.dart'; import 'primitives/tree_node.dart'; /// Builds set of [nodes] respecting [state], [indent] and [iconSize]. -Widget buildNodes(Iterable nodes, double? indent, - TreeController state, double? iconSize) { +Widget buildNodes( + Iterable nodes, + double? indent, + TreeController state, + double? iconSize, + Widget? primaryIcon, + Widget? secondaryIcon, +) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -22,6 +28,8 @@ Widget buildNodes(Iterable nodes, double? indent, indent: indent, state: state, iconSize: iconSize, + primaryIcon: primaryIcon, + secondaryIcon: secondaryIcon, ) ], ); diff --git a/packages/flutter_simple_treeview/lib/src/node_widget.dart b/packages/flutter_simple_treeview/lib/src/node_widget.dart index 509628f7..f097382a 100644 --- a/packages/flutter_simple_treeview/lib/src/node_widget.dart +++ b/packages/flutter_simple_treeview/lib/src/node_widget.dart @@ -16,14 +16,18 @@ class NodeWidget extends StatefulWidget { final double? indent; final double? iconSize; final TreeController state; + final Widget? primaryIcon; + final Widget? secondaryIcon; - const NodeWidget( - {Key? key, - required this.treeNode, - this.indent, - required this.state, - this.iconSize}) - : super(key: key); + const NodeWidget({ + Key? key, + required this.treeNode, + this.indent, + required this.state, + this.iconSize, + this.primaryIcon, + this.secondaryIcon, + }) : super(key: key); @override _NodeWidgetState createState() => _NodeWidgetState(); @@ -31,8 +35,7 @@ class NodeWidget extends StatefulWidget { class _NodeWidgetState extends State { bool get _isLeaf { - return widget.treeNode.children == null || - widget.treeNode.children!.isEmpty; + return widget.treeNode.children == null || widget.treeNode.children!.isEmpty; } bool get _isExpanded { @@ -44,23 +47,25 @@ class _NodeWidgetState extends State { var icon = _isLeaf ? null : _isExpanded - ? Icons.expand_more - : Icons.chevron_right; + ? widget.secondaryIcon ?? Icon(Icons.expand_more) + : widget.primaryIcon ?? Icon(Icons.chevron_right); - var onIconPressed = _isLeaf - ? null - : () => setState( - () => widget.state.toggleNodeExpanded(widget.treeNode.key!)); + var onIconPressed = _isLeaf ? null : () => setState(() => widget.state.toggleNodeExpanded(widget.treeNode.key!)); return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: [ - IconButton( - iconSize: widget.iconSize ?? 24.0, - icon: Icon(icon), - onPressed: onIconPressed, + Material( + child: InkWell( + borderRadius: BorderRadius.circular(2.00), + child: SizedBox.square( + dimension: widget.iconSize ?? 24.0, + child: icon, + ), + onTap: onIconPressed, + ), ), widget.treeNode.content, ], @@ -68,8 +73,14 @@ class _NodeWidgetState extends State { if (_isExpanded && !_isLeaf) Padding( padding: EdgeInsets.only(left: widget.indent!), - child: buildNodes(widget.treeNode.children!, widget.indent, - widget.state, widget.iconSize), + child: buildNodes( + widget.treeNode.children!, + widget.indent, + widget.state, + widget.iconSize, + widget.primaryIcon, + widget.secondaryIcon, + ), ) ], ); diff --git a/packages/flutter_simple_treeview/lib/src/tree_view.dart b/packages/flutter_simple_treeview/lib/src/tree_view.dart index 839e7cf1..4745749a 100644 --- a/packages/flutter_simple_treeview/lib/src/tree_view.dart +++ b/packages/flutter_simple_treeview/lib/src/tree_view.dart @@ -25,13 +25,21 @@ class TreeView extends StatefulWidget { /// Tree controller to manage the tree state. final TreeController? treeController; - TreeView( - {Key? key, - required List nodes, - this.indent = 40, - this.iconSize, - this.treeController}) - : nodes = copyTreeNodes(nodes), + /// This widget will be takes place of default icon when Node will not be in expanded state + final Widget? primaryIcon; + + /// This widget will be takes place of default icon when Node will be in expanded state + final Widget? secondaryIcon; + + TreeView({ + Key? key, + required List nodes, + this.indent = 40, + this.iconSize, + this.treeController, + this.primaryIcon, + this.secondaryIcon, + }) : nodes = copyTreeNodes(nodes), super(key: key); @override @@ -50,6 +58,12 @@ class _TreeViewState extends State { @override Widget build(BuildContext context) { return buildNodes( - widget.nodes, widget.indent, _controller!, widget.iconSize); + widget.nodes, + widget.indent, + _controller!, + widget.iconSize, + widget.primaryIcon, + widget.secondaryIcon, + ); } }