إنشاء عروض الأشجار التفاعلية باستخدام fancy_tree_view في Flutter

List<FancyTreeNode> _treeNodes = [
  FancyTreeNode(
    title: 'العقدة الجذرية',
    children: [
      FancyTreeNode(title: 'العقدة الفرعية 1'),
      FancyTreeNode(
        title: 'العقدة الفرعية 2',
        children: [
          FancyTreeNode(title: 'العقدة الفرعية'),
        ],
      ),
    ],
  ),
];

FancyTreeView(
  nodes: _treeNodes,
);

مثال (مستكشف نظام الملفات):

import 'package:flutter/material.dart';
import 'package:flutter_fancy_tree_view/flutter_fancy_tree_view.dart';

class FileNode {
  final String name;
  final bool isDirectory;
  final List<FileNode> children;

  FileNode(this.name, [this.isDirectory = false, this.children = const []]);
}

class FileSystemExplorer extends StatelessWidget {
  final TreeController<FileNode> controller = TreeController<FileNode>(
    roots: [
      FileNode(
        'الصفحة الرئيسية',
        true,
        [
          FileNode('المستندات'),
          FileNode(
            'الصور',
            true,
            [
              FileNode('Image1.jpg'),
              FileNode('Image2.png'),
            ],
          ),
        ],
      ),
    ],
    childrenProvider: (node) => node.children,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('مستعرض الملفات')),
      body: FancyTreeView<FileNode>(
        treeController: controller,
        builder: (context, node) {
          return ListTile(
            leading: Icon(
              node.isDirectory ? Icons.folder : Icons.insert_drive_file,
              color: node.isDirectory ? Colors.orange : Colors.grey,
            ),
            title: Text(node.name),
          );
        },
        theme: FancyTreeTheme(
          expansionIndicator: Icon(Icons.arrow_drop_down),
          collapseIndicator: Icon(Icons.arrow_right),
          connectorLineColor: Colors.grey.shade300,
          verticalSpacing: 4,
        ),
      ),
    );
  }
}