Zeba Academy Infographic UI

A powerful Flutter package for building beautiful and engaging infographic-style user interfaces. Create process diagrams, comparison layouts, statistics widgets, timeline infographics, and visual storytelling experiences with minimal effort.

✨ Features

🔄 Process Diagrams

Create visually appealing step-by-step workflows and process flows.

⚖️ Comparison Layouts

Display side-by-side comparisons with clean and professional designs.

📊 Statistics Widgets

Show KPIs, metrics, and numerical insights using elegant statistic cards.

📅 Timeline Infographics

Present chronological events with customizable timeline components.

📖 Visual Storytelling

Build engaging narratives and user journeys using storytelling widgets.

🎨 Material Design

Fully compatible with Flutter's Material Design system.

📱 Responsive

Works across mobile, tablet, desktop, and web applications.

🛡️ Null Safe

Built with modern Dart and full null-safety support.

Installation

Add the package to your pubspec.yaml:

dependencies:
  zeba_academy_infographic_ui: ^1.0.0

Install dependencies:

flutter pub get

Import

import 'package:zeba_academy_infographic_ui/zeba_academy_infographic_ui.dart';

Process Diagram Example

ZebaProcessDiagram(
  steps: [
    ProcessStep(
      title: 'Plan',
      description: 'Define project goals',
      icon: Icons.lightbulb,
    ),
    ProcessStep(
      title: 'Build',
      description: 'Develop application',
      icon: Icons.code,
    ),
    ProcessStep(
      title: 'Launch',
      description: 'Release to users',
      icon: Icons.rocket_launch,
    ),
  ],
)

Statistics Card Example

const ZebaStatisticCard(
  title: 'Users',
  value: '10K+',
  icon: Icons.people,
)

Timeline Example

ZebaTimeline(
  events: [
    TimelineEvent(
      title: 'Project Started',
      subtitle: 'Initial planning phase',
      date: 'Jan 2026',
    ),
    TimelineEvent(
      title: 'Launch',
      subtitle: 'Public release',
      date: 'Jun 2026',
    ),
  ],
)

Comparison Layout Example

ZebaComparisonCard(
  leftTitle: 'Flutter',
  rightTitle: 'Native',

  leftFeatures: [
    'Single Codebase',
    'Fast Development',
    'Cross Platform',
  ],

  rightFeatures: [
    'Platform Specific',
    'Separate Teams',
    'Higher Cost',
  ],
)

Visual Storytelling Example

ZebaStoryFlow(
  items: [
    StoryItem(
      title: 'Idea',
      description: 'The project concept begins.',
    ),
    StoryItem(
      title: 'Development',
      description: 'Building the solution.',
    ),
    StoryItem(
      title: 'Success',
      description: 'Launch and growth.',
    ),
  ],
)

Roadmap

Future releases may include:

Animated Infographics
Interactive Timelines
Flowchart Connectors
KPI Dashboards
Milestone Widgets
Circular Statistics
SVG Support
Custom Themes
Responsive Grid Infographics
Advanced Storytelling Components

License

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

You are free to:

Use
Modify
Distribute
Contribute

under the terms of the GPL-3.0 License.

See the LICENSE file for complete 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.

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

💻 Level up your tech game today!

Resources

Main Website: https://zeba.academy
Coding Portal: https://code.zeba.academy
YouTube: https://www.youtube.com/@zeba.academy
Instagram: https://www.instagram.com/zeba.academy

Contributing

Contributions, issues, and feature requests are welcome.

If you would like to contribute:

Fork the repository
Create a feature branch
Commit your changes
Submit a pull request

Support

If you find this package useful, consider:

⭐ Starring the repository

📢 Sharing it with the Flutter community

🤝 Contributing improvements

Thank you for using Zeba Academy Infographic UI!