zeba_academy_git_visualizer 1.0.0

Git visualization widgets for Flutter learning apps.

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:

https://sufyanism.com/

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:

https://zeba.academy

Courses:

https://code.zeba.academy

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 ❤️