Implement TreeView

CHANGELOG.md

@@ -2,6 +2,7 @@ Date format: DD/MM/YYYY
 
 ## [3.5.3] - [DD/MM/YYYY]
 
+- Implement `TreeView`
 - Fix scroll buttons when there are too many tabs in `TabView` ([#92](https://github.com/bdlukaa/fluent_ui/issues/92))
 - Fix button style on tab in `TabView` ([#90](https://github.com/bdlukaa/fluent_ui/issues/90))
 - Fix `Slider` and `RatingBar` ([#116](https://github.com/bdlukaa/fluent_ui/issues/116))

README.md

@@ -79,6 +79,7 @@ Unofficial implementation of Fluent UI for [Flutter](flutter.dev). It's written
   - [Scrollbar](#scrollbar)
   - [List Tile](#list-tile)
   - [Info Header](#info-header)
+  - [TreeView](#treeview)
 - [Mobile Widgets](#mobile-widgets)
   - [Chip](#chip)
   - [Pill Button Bar](#pill-button-bar)
@@ -1459,6 +1460,53 @@ ComboBox(
 
 This will produce the same as the image above.
 
+## TreeView
+
+The `TreeView` control enables a hierarchical list with expanding and collapsing nodes that contain nested items. It can be used to illustrate a folder structure or nested relationships in your UI. [Learn More](https://docs.microsoft.com/en-us/windows/apps/design/controls/tree-view)
+
+The tree view uses a combination of indentation and icons to represent the nested relationship between parent nodes and child nodes. Collapsed nodes use a chevron pointing to the right, and expanded nodes use a chevron pointing down.
+
+![TreeView Simple](https://docs.microsoft.com/en-us/windows/apps/design/controls/images/treeview-simple.png)
+
+You can include an icon in the tree view item data template to represent nodes. For example, if you show a file system hierarchy, you could use folder icons for the parent notes and file icons for the leaf nodes.
+
+![TreeView Icons](https://docs.microsoft.com/en-us/windows/apps/design/controls/images/treeview-icons.png)
+
+Here's an example of how to create a tree view:
+
+```dart
+TreeView(
+  items: [
+    TreeViewItem(
+      content: const Text('Work Documents'),
+      children: [
+        TreeViewItem(content: const Text('XYZ Functional Spec')),
+        TreeViewItem(content: const Text('Feature Schedule')),
+        TreeViewItem(content: const Text('Overall Project Plan')),
+        TreeViewItem(content: const Text('Feature Resources Allocation')),
+      ],
+    ),
+    TreeViewItem(
+      content: const Text('Personal Documents'),
+      children: [
+        TreeViewItem(
+          content: const Text('Home Remodel'),
+          children: [
+            TreeViewItem(content: const Text('Contractor Contact Info')),
+            TreeViewItem(content: const Text('Paint Color Scheme')),
+            TreeViewItem(content: const Text('Flooring weedgrain type')),
+            TreeViewItem(content: const Text('Kitchen cabinet style')),
+          ],
+        ),
+      ],
+    ),
+  ],
+  onItemInvoked: (item) => debugPrint(item), // (optional)
+  // (optional). Can be TreeViewSelectionMode.single or TreeViewSelectionMode.multiple
+  selectionMode: TreeViewSelectionMode.none, 
+),
+```
+
 # Mobile Widgets
 
 Widgets with focus on mobile. Based on the official documentation and source code for [iOS](https://developer.microsoft.com/pt-br/fluentui#/controls/ios) and [Android](https://developer.microsoft.com/pt-br/fluentui#/controls/android). Most of the widgets above can adapt to small screens, and will fit on all your devices.

example/lib/screens/others.dart

@@ -20,6 +20,32 @@ class _OthersState extends State<Others> {
 
   bool checked = false;
 
+  final items = [
+    TreeViewItem(
+      content: const Text('Work Documents'),
+      children: [
+        TreeViewItem(content: const Text('XYZ Functional Spec')),
+        TreeViewItem(content: const Text('Feature Schedule')),
+        TreeViewItem(content: const Text('Overall Project Plan')),
+        TreeViewItem(content: const Text('Feature Resources Allocation')),
+      ],
+    ),
+    TreeViewItem(
+      content: const Text('Personal Documents'),
+      children: [
+        TreeViewItem(
+          content: const Text('Home Remodel'),
+          children: [
+            TreeViewItem(content: const Text('Contractor Contact Info')),
+            TreeViewItem(content: const Text('Paint Color Scheme')),
+            TreeViewItem(content: const Text('Flooring weedgrain type')),
+            TreeViewItem(content: const Text('Kitchen cabinet style')),
+          ],
+        ),
+      ],
+    ),
+  ];
+
   @override
   void dispose() {
     flyoutController.dispose();
@@ -254,6 +280,59 @@ class _OthersState extends State<Others> {
               ),
             ),
           ),
+          const SizedBox(height: 20.0),
+          SizedBox(
+            height: 380.0,
+            child: ListView(
+              scrollDirection: Axis.horizontal,
+              children: [
+                Container(
+                  constraints: const BoxConstraints(
+                    maxHeight: 380,
+                    minHeight: 380,
+                    maxWidth: 350,
+                  ),
+                  decoration: BoxDecoration(
+                    border: Border.all(
+                        color: FluentTheme.of(context).inactiveColor),
+                  ),
+                  child: TreeView(items: items),
+                ),
+                Container(
+                  constraints: const BoxConstraints(
+                    maxHeight: 380,
+                    minHeight: 380,
+                    maxWidth: 350,
+                  ),
+                  decoration: BoxDecoration(
+                    border: Border.all(
+                        color: FluentTheme.of(context).inactiveColor),
+                  ),
+                  child: TreeView(
+                    selectionMode: TreeViewSelectionMode.single,
+                    items: items,
+                    onItemInvoked: (item) => debugPrint('$item'),
+                  ),
+                ),
+                Container(
+                  constraints: const BoxConstraints(
+                    maxHeight: 380,
+                    minHeight: 380,
+                    maxWidth: 350,
+                  ),
+                  decoration: BoxDecoration(
+                    border: Border.all(
+                        color: FluentTheme.of(context).inactiveColor),
+                  ),
+                  child: TreeView(
+                    selectionMode: TreeViewSelectionMode.multiple,
+                    items: items,
+                    onItemInvoked: (item) => debugPrint('$item'),
+                  ),
+                ),
+              ],
+            ),
+          ),
         ],
       ),
     );

lib/fluent_ui.dart

@@ -56,6 +56,7 @@ export 'src/controls/inputs/slider.dart';
 
 export 'src/controls/navigation/navigation_view/view.dart';
 export 'src/controls/navigation/tab_view.dart';
+export 'src/controls/navigation/tree_view.dart';
 
 export 'src/controls/surfaces/calendar/calendar_view.dart';
 export 'src/controls/surfaces/bottom_sheet.dart';