Skip to content

[Draft] FTree #712

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
+1,562 −0
Open

[Draft] FTree #712

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2ec7785
FTree
KrisBraun Oct 5, 2025
27a2347
Add third level to FTree sample
KrisBraun Oct 5, 2025
a817c49
Fix FTree nested line painting
KrisBraun Oct 5, 2025
163b1d9
Fix deeply nested expansion state
KrisBraun Oct 5, 2025
9cc6a16
Remove hardcoded theme padding
KrisBraun Oct 5, 2025
0b420d0
Make FTreeItem.onRowCountChange private
KrisBraun Oct 5, 2025
e3dd301
Lint fixes
KrisBraun Oct 5, 2025
ee2455c
FTree RTL
KrisBraun Oct 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
269 changes: 269 additions & 0 deletions docs/app/docs/data/tree/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,269 @@
import { Callout } from 'nextra/components';
import { Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Tree

A hierarchical tree widget for displaying nested data with visual connecting lines.

<LinkBadgeGroup>
<LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.tree/"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
<Tabs.Tab>
<Widget name='tree' variant='default' height={400}/>
</Tabs.Tab>
<Tabs.Tab>
```dart copy
FTree(
children: [
FTreeItem(
icon: const Icon(FIcons.folder),
label: const Text('Apple'),
initiallyExpanded: true,
children: [
FTreeItem(
icon: const Icon(FIcons.folder),
label: const Text('Red Apple'),
onPress: () {},
),
FTreeItem(
icon: const Icon(FIcons.folder),
label: const Text('Green Apple'),
onPress: () {},
),
],
),
FTreeItem(
icon: const Icon(FIcons.folder),
label: const Text('Banana'),
onPress: () {},
),
FTreeItem(
icon: const Icon(FIcons.folder),
label: const Text('Cherry'),
onPress: () {},
),
FTreeItem(
icon: const Icon(FIcons.file),
label: const Text('Date'),
selected: true,
onPress: () {},
),
],
);
```
</Tabs.Tab>
</Tabs>

## Usage

### Basic Tree

A basic tree structure with collapsible items.

<Tabs items={['Preview', 'Code']}>
<Tabs.Tab>
<Widget name='tree' variant='default' height={300}/>
</Tabs.Tab>
<Tabs.Tab>
```dart copy
FTree(
children: [
FTreeItem(
icon: const Icon(FIcons.folder),
label: const Text('Folder 1'),
children: [
FTreeItem(
icon: const Icon(FIcons.file),
label: const Text('File 1.1'),
onPress: () {},
),
FTreeItem(
icon: const Icon(FIcons.file),
label: const Text('File 1.2'),
onPress: () {},
),
],
),
FTreeItem(
icon: const Icon(FIcons.file),
label: const Text('File 2'),
onPress: () {},
),
],
);
```
</Tabs.Tab>
</Tabs>

### Nested Tree

Trees support arbitrary nesting depth with visual connecting lines.

<Tabs items={['Preview', 'Code']}>
<Tabs.Tab>
<Widget name='tree' variant='nested' height={300}/>
</Tabs.Tab>
<Tabs.Tab>
```dart copy
FTree(
children: [
FTreeItem(
icon: const Icon(FIcons.folder),
label: const Text('Level 1'),
initiallyExpanded: true,
children: [
FTreeItem(
icon: const Icon(FIcons.folder),
label: const Text('Level 2'),
initiallyExpanded: true,
children: [
FTreeItem(
icon: const Icon(FIcons.folder),
label: const Text('Level 3'),
initiallyExpanded: true,
children: [
FTreeItem(
icon: const Icon(FIcons.file),
label: const Text('Deep File'),
onPress: () {},
),
],
),
],
),
],
),
],
);
```
</Tabs.Tab>
</Tabs>

### Selected Item

Tree items can be marked as selected.

<Tabs items={['Preview', 'Code']}>
<Tabs.Tab>
<Widget name='tree' variant='selected' height={200}/>
</Tabs.Tab>
<Tabs.Tab>
```dart copy
FTree(
children: [
FTreeItem(
icon: const Icon(FIcons.folder),
label: const Text('Item 1'),
selected: true,
onPress: () {},
),
FTreeItem(
icon: const Icon(FIcons.folder),
label: const Text('Item 2'),
onPress: () {},
),
],
);
```
</Tabs.Tab>
</Tabs>

## Examples

### File Explorer

A file explorer-style tree with folders and files.

```dart
FTree(
children: [
FTreeItem(
icon: const Icon(FIcons.folder),
label: const Text('src'),
initiallyExpanded: true,
children: [
FTreeItem(
icon: const Icon(FIcons.folder),
label: const Text('components'),
children: [
FTreeItem(
icon: const Icon(FIcons.file),
label: const Text('button.dart'),
onPress: () {},
),
FTreeItem(
icon: const Icon(FIcons.file),
label: const Text('card.dart'),
onPress: () {},
),
],
),
FTreeItem(
icon: const Icon(FIcons.file),
label: const Text('main.dart'),
selected: true,
onPress: () {},
),
],
),
FTreeItem(
icon: const Icon(FIcons.folder),
label: const Text('test'),
children: [
FTreeItem(
icon: const Icon(FIcons.file),
label: const Text('button_test.dart'),
onPress: () {},
),
],
),
],
);
```

## Customization

### Custom Styling

You can customize the tree appearance using `FTreeStyle`.

```dart
FTree(
style: (style) => style.copyWith(
indentWidth: 30,
spacing: 4,
itemStyle: (itemStyle) => itemStyle.copyWith(
borderRadius: BorderRadius.circular(8),
),
),
children: [
// ... tree items
],
);
```

### Custom Line Style

Customize the connecting line style.

```dart
FTree(
style: (style) => style.copyWith(
itemStyle: (itemStyle) => itemStyle.copyWith(
lineStyle: (lineStyle) => lineStyle.copyWith(
color: Colors.blue,
width: 2,
dashPattern: [4, 4], // Dashed line
),
),
),
children: [
// ... tree items
],
);
```
8 changes: 8 additions & 0 deletions forui/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
## Next

### `FTree`
- Add `FTree` - A hierarchical tree widget for displaying nested data with visual connecting lines.
- Add `FTreeItem` - Individual tree node widget with expand/collapse support.
- Add `FTreeController`.
- Add `FTreeStyle`, `FTreeItemStyle`, `FTreeLineStyle`, and `FTreeItemMotion`.

## 0.16.0

### Better Generated Documentation
Expand Down
1 change: 1 addition & 0 deletions forui/lib/forui.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,5 +45,6 @@ export 'widgets/tabs.dart';
export 'widgets/text_field.dart';
export 'widgets/tile.dart';
export 'widgets/time_picker.dart';
export 'widgets/tree.dart';
export 'widgets/time_field.dart';
export 'widgets/tooltip.dart';
17 changes: 17 additions & 0 deletions forui/lib/src/theme/theme_data.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -535,6 +535,17 @@ final class FThemeData with Diagnosticable, _$FThemeDataFunctions {
@override
final FTileGroupStyle tileGroupStyle;

/// The tree style.
///
/// ## CLI
/// To generate and customize this style:
///
/// ```shell
/// dart run forui style create tree
/// ```
@override
final FTreeStyle treeStyle;

/// The time field's style.
///
/// ## CLI
Expand Down Expand Up @@ -622,6 +633,7 @@ final class FThemeData with Diagnosticable, _$FThemeDataFunctions {
FTextFieldStyle? textFieldStyle,
FTileStyle? tileStyle,
FTileGroupStyle? tileGroupStyle,
FTreeStyle? treeStyle,
FTimeFieldStyle? timeFieldStyle,
FTimePickerStyle? timePickerStyle,
FTooltipStyle? tooltipStyle,
Expand Down Expand Up @@ -691,6 +703,7 @@ final class FThemeData with Diagnosticable, _$FThemeDataFunctions {
textFieldStyle: textFieldStyle ?? FTextFieldStyle.inherit(colors: colors, typography: typography, style: style),
tileStyle: tileStyle ?? FTileStyle.inherit(colors: colors, typography: typography, style: style),
tileGroupStyle: tileGroupStyle ?? FTileGroupStyle.inherit(colors: colors, typography: typography, style: style),
treeStyle: treeStyle ?? FTreeStyle.inherit(colors: colors, typography: typography, style: style),
timeFieldStyle: timeFieldStyle ?? FTimeFieldStyle.inherit(colors: colors, typography: typography, style: style),
timePickerStyle:
timePickerStyle ?? FTimePickerStyle.inherit(colors: colors, typography: typography, style: style),
Expand Down Expand Up @@ -751,6 +764,7 @@ final class FThemeData with Diagnosticable, _$FThemeDataFunctions {
textFieldStyle: a.textFieldStyle.lerp(b.textFieldStyle, t),
tileStyle: a.tileStyle.lerp(b.tileStyle, t),
tileGroupStyle: a.tileGroupStyle.lerp(b.tileGroupStyle, t),
treeStyle: a.treeStyle.lerp(b.treeStyle, t),
timeFieldStyle: a.timeFieldStyle.lerp(b.timeFieldStyle, t),
timePickerStyle: a.timePickerStyle.lerp(b.timePickerStyle, t),
tooltipStyle: a.tooltipStyle.lerp(b.tooltipStyle, t),
Expand Down Expand Up @@ -811,6 +825,7 @@ final class FThemeData with Diagnosticable, _$FThemeDataFunctions {
required this.textFieldStyle,
required this.tileStyle,
required this.tileGroupStyle,
required this.treeStyle,
required this.timeFieldStyle,
required this.timePickerStyle,
required this.tooltipStyle,
Expand Down Expand Up @@ -1311,6 +1326,7 @@ final class FThemeData with Diagnosticable, _$FThemeDataFunctions {
FTextFieldStyle Function(FTextFieldStyle style)? textFieldStyle,
FTileStyle Function(FTileStyle style)? tileStyle,
FTileGroupStyle Function(FTileGroupStyle style)? tileGroupStyle,
FTreeStyle Function(FTreeStyle style)? treeStyle,
FTimeFieldStyle Function(FTimeFieldStyle style)? timeFieldStyle,
FTimePickerStyle Function(FTimePickerStyle style)? timePickerStyle,
FTooltipStyle Function(FTooltipStyle style)? tooltipStyle,
Expand Down Expand Up @@ -1376,6 +1392,7 @@ final class FThemeData with Diagnosticable, _$FThemeDataFunctions {
textFieldStyle: textFieldStyle != null ? textFieldStyle(this.textFieldStyle) : this.textFieldStyle,
tileStyle: tileStyle != null ? tileStyle(this.tileStyle) : this.tileStyle,
tileGroupStyle: tileGroupStyle != null ? tileGroupStyle(this.tileGroupStyle) : this.tileGroupStyle,
treeStyle: treeStyle != null ? treeStyle(this.treeStyle) : this.treeStyle,
timeFieldStyle: timeFieldStyle != null ? timeFieldStyle(this.timeFieldStyle) : this.timeFieldStyle,
timePickerStyle: timePickerStyle != null ? timePickerStyle(this.timePickerStyle) : this.timePickerStyle,
tooltipStyle: tooltipStyle != null ? tooltipStyle(this.tooltipStyle) : this.tooltipStyle,
Expand Down
Loading
Loading