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:

• 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.

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:

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. 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!