Zeba Academy Git Visualizer 🚀
📌 Overview
Zeba Academy Git Visualizer is a Flutter package that provides beautiful and interactive Git concept visualization widgets.
It helps developers, students, and educators understand Git workflows visually.
This package allows you to display:
- Commit graphs
- Branch flows
- Merge operations
- Pull request workflows
- Merge conflicts
- Git history timelines
Built for coding platforms, developer tools, and programming education apps.
✨ Features
🌳 Commit Graph Visualization
Visualize Git commits with an easy-to-understand graph UI.
Features:
- Commit nodes
- Commit messages
- Author details
- Commit flow
- Repository history display
Example:
main
● Initial commit
|
● Added authentication
|
● Fixed bugs
🌿 Branch Flow Visualization
Display Git branches and their relationships.
Supports:
- Main branch
- Feature branches
- Development branches
- Custom branch names
Example:
main
|
|---- feature/login
|
|---- feature/payment
🔀 Merge Visualization
Teach Git merge concepts visually.
Features:
- Source branch
- Target branch
- Merge direction
- Merge learning UI
Example:
feature/profile
↓
MERGE
↓
main
🔥 Pull Request Flow
Create GitHub-style pull request learning screens.
Features:
- PR title
- Source branch
- Target branch
- Merge status
Example:
feature/dashboard
→
Pull Request
→
main
⚠️ Conflict Learning UI
Visualize Git merge conflicts.
Features:
- Compare changes
- Show OURS code
- Show THEIRS code
- Conflict explanation
Example:
<<<<<<< OURS
Theme: Blue
=======
Theme: Red
>>>>>>> THEIRS
📜 Git History Timeline
Display repository history as a timeline.
Includes:
- Commit date
- Commit message
- Author
- History order
📦 Installation
Add dependency:
dependencies:
zeba_academy_git_visualizer: ^1.0.0
Run:
flutter pub get
🚀 Usage
Import:
import 'package:zeba_academy_git_visualizer/zeba_academy_git_visualizer.dart';
Commit Graph Example
CommitGraph(
commits:[
GitCommit(
id:"a001",
message:"Initial commit",
author:"Sufyan",
date:DateTime.now(),
),
GitCommit(
id:"a002",
message:"Added login feature",
author:"Developer",
date:DateTime.now(),
)
]
)
Branch Example
BranchFlow(
branches:[
GitBranch(
name:"main",
commits:[],
),
GitBranch(
name:"feature/login",
commits:[],
)
]
)
Pull Request Example
PRFlow(
request: PullRequest(
title:"Add profile module",
fromBranch:"feature/profile",
targetBranch:"main",
merged:true,
)
)
🏗 Project Structure
lib/
├── models/
│ ├── git_commit.dart
│ ├── git_branch.dart
│ └── pull_request.dart
├── widgets/
│ ├── commit_graph.dart
│ ├── branch_flow.dart
│ ├── merge_view.dart
│ ├── pr_flow.dart
│ ├── conflict_view.dart
│ └── history_timeline.dart
└── zeba_academy_git_visualizer.dart
🎯 Use Cases
Perfect for:
✅ Coding learning apps ✅ Git tutorials ✅ Developer dashboards ✅ Programming courses ✅ Bootcamp platforms ✅ Student projects ✅ Developer portfolio apps
💡 Package Highlights
- No API required
- No GitHub dependency
- Offline friendly
- Lightweight widgets
- Fully customizable
- Beginner friendly
🧪 Testing
Run tests:
flutter test
🤝 Contributing
Contributions are welcome.
Create a branch:
git checkout -b feature/new-feature
Commit:
git commit -m "Add new feature"
Push:
git push origin feature/new-feature
Create Pull Request.
👨💻 About Me
✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.
Website:
LinkedIn:
https://www.linkedin.com/in/sufyanism
🚀 Zeba Academy
Your all-in-one learning hub!
Zeba Academy is a learning platform dedicated to:
- Coding
- Technology
- Development
- Practical skills
Explore:
Website:
Courses:
YouTube:
https://www.youtube.com/@zeba.academy
Instagram:
https://www.instagram.com/zeba.academy/
📄 License
This project is licensed under the:
GNU General Public License v3.0 (GPL-3.0)
You are free to:
- Use
- Modify
- Share
- Improve
According to GPL-3.0 conditions.
⭐ Support
If you like this package:
⭐ Star the repository
⭐ Share with developers
⭐ Contribute improvements
Thank you for using Zeba Academy Git Visualizer ❤️