Zeba Academy Skill Tree UI

A powerful Flutter package for building RPG-style skill trees with unlockable nodes, dependency paths, animated progress indicators, zoomable navigation, and fully customizable node widgets.

Perfect for:

🎮 RPG Games
📚 Learning Platforms
🏆 Achievement Systems
👨‍💼 Employee Training Portals
🚀 Gamified Applications
🎯 Progress Tracking Systems

Features

✅ RPG-style skill trees

✅ Unlockable skill nodes

✅ Parent-child dependency paths

✅ Animated node states

✅ Progress indicators

✅ Zoom and pan support

✅ Custom node widgets

✅ Highly customizable

✅ Lightweight and dependency-free

✅ Production-ready architecture

Installation

Add the package to your pubspec.yaml:

dependencies:
  zeba_academy_skill_tree_ui: latest

Then run:

flutter pub get

Import

import 'package:zeba_academy_skill_tree_ui/zeba_academy_skill_tree_ui.dart';

Quick Start

Create Nodes

final controller = SkillTreeController([
  SkillNode(
    id: '1',
    title: 'Start',
    position: const Offset(100, 300),
    unlocked: true,
  ),
  SkillNode(
    id: '2',
    title: 'Attack',
    position: const Offset(300, 200),
    dependencies: ['1'],
  ),
  SkillNode(
    id: '3',
    title: 'Defense',
    position: const Offset(300, 400),
    dependencies: ['1'],
  ),
  SkillNode(
    id: '4',
    title: 'Ultimate',
    position: const Offset(600, 300),
    dependencies: ['2', '3'],
  ),
]);

Display Skill Tree

SkillTree(
  controller: controller,
)

Complete Example

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final controller = SkillTreeController([
      SkillNode(
        id: '1',
        title: 'Start',
        position: const Offset(100, 300),
        unlocked: true,
      ),
      SkillNode(
        id: '2',
        title: 'Attack',
        position: const Offset(300, 200),
        dependencies: ['1'],
      ),
      SkillNode(
        id: '3',
        title: 'Defense',
        position: const Offset(300, 400),
        dependencies: ['1'],
      ),
      SkillNode(
        id: '4',
        title: 'Ultimate',
        position: const Offset(600, 300),
        dependencies: ['2', '3'],
      ),
    ]);

    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: SkillTree(
          controller: controller,
        ),
      ),
    );
  }
}

SkillNode Properties

Property	Type	Description
id	String	Unique identifier
title	String	Node label
position	Offset	Position on canvas
dependencies	List	Required parent nodes
unlocked	bool	Unlock status
progress	double	Progress value (0-1)

Controller API

Check Unlock Availability

controller.canUnlock(node);

Unlock Node

controller.unlockNode(node);

Update Progress

controller.updateProgress(
  node,
  0.75,
);

Upcoming Features

Animated path transitions
Radial skill trees
Skill categories
Save/Load state
Achievement integration
Minimap navigation
Custom layouts
Skill point system
XP progression system
Theming support

Why Zeba Academy Skill Tree UI?

Unlike traditional tree widgets, this package focuses on:

RPG-inspired progression systems
Learning pathways
Dependency visualization
Gamification experiences
Interactive skill development

This makes it ideal for both gaming and educational applications.

License

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

You may:

Use
Modify
Distribute
Share

under the terms of the GPL-3.0 license.

See the LICENSE file for full details.

About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at:

Your all-in-one learning hub!

🚀 Explore courses and resources in coding, tech, and development at Zeba Academy and Code Zeba Academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience.

Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development.

➡ Visit our main site: https://zeba.academy

➡ Explore hands-on courses and resources: https://code.zeba.academy

➡ YouTube: https://www.youtube.com/@zeba.academy

➡ Instagram: https://www.instagram.com/zeba.academy/

Thank you for visiting!

⭐ If you find this package useful, please consider supporting the project by starring the repository and sharing it with the Flutter community.