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 #

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:

• https://sufyanism.com/
• https://www.linkedin.com/in/sufyanism

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.