zeba_academy_timeline_widgets 0.0.1

Beautiful and customizable Flutter timeline widgets including vertical, horizontal, animated progress, and achievement timelines.

zeba_academy_timeline

A beautiful and customizable Flutter timeline package for creating elegant vertical, horizontal, animated progress, and achievement timelines with ease.

Perfect for:

• Learning journeys
• Project roadmaps
• Achievement tracking
• Progress indicators
• Educational apps
• Career timelines
• Event flows
• Task progression

---

✨ Features

✅ Vertical Timeline ✅ Horizontal Timeline ✅ Animated Progress Timeline ✅ Achievement Timeline ✅ Custom icons & colors ✅ Smooth animations ✅ Lightweight & customizable ✅ Easy integration ✅ Beautiful modern UI ✅ Null-safe support

---

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_timeline: ^0.0.1

Then run:

flutter pub get

---

🚀 Import

import 'package:zeba_academy_timeline/zeba_academy_timeline_widgets.dart';

---

🧱 Timeline Model

TimelineItem(
  title: 'Started Learning',
  subtitle: 'Flutter Basics',
  icon: Icons.school,
  color: Colors.blue,
  completed: true,
)

---

📚 Example Data

final items = [
  TimelineItem(
    title: 'Started Learning',
    subtitle: 'Flutter Basics',
    icon: Icons.school,
    color: Colors.blue,
    completed: true,
  ),
  TimelineItem(
    title: 'Built First App',
    subtitle: 'Counter App',
    icon: Icons.phone_android,
    color: Colors.green,
    completed: true,
  ),
  TimelineItem(
    title: 'Published Package',
    subtitle: 'zeba_academy_timeline',
    icon: Icons.rocket_launch,
    color: Colors.orange,
    completed: false,
  ),
];

---

📍 Vertical Timeline

Create beautiful vertical timelines.

Usage

VerticalTimeline(
  items: items,
)

---

📍 Horizontal Timeline

Perfect for progress tracking and onboarding flows.

Usage

HorizontalTimeline(
  items: items,
)

---

📍 Animated Progress Timeline

Animated timeline with completed states.

Usage

AnimatedProgressTimeline(
  items: items,
)

---

📍 Achievement Timeline

Modern achievement cards with gradients.

Usage

AchievementTimeline(
  items: items,
)

---

🖥️ Complete Example

import 'package:flutter/material.dart';
import 'package:zeba_academy_timeline/zeba_academy_timeline_widgets.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {

    final items = [
      TimelineItem(
        title: 'Started Learning',
        subtitle: 'Flutter Basics',
        icon: Icons.school,
        color: Colors.blue,
        completed: true,
      ),
      TimelineItem(
        title: 'Built First App',
        subtitle: 'Counter App',
        icon: Icons.phone_android,
        color: Colors.green,
        completed: true,
      ),
      TimelineItem(
        title: 'Published Package',
        subtitle: 'zeba_academy_timeline',
        icon: Icons.rocket_launch,
        color: Colors.orange,
        completed: false,
      ),
    ];

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Zeba Academy Timeline'),
        ),
        body: SingleChildScrollView(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [

              const Text(
                'Vertical Timeline',
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                ),
              ),

              const SizedBox(height: 20),

              VerticalTimeline(items: items),

              const SizedBox(height: 40),

              const Text(
                'Horizontal Timeline',
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                ),
              ),

              const SizedBox(height: 20),

              HorizontalTimeline(items: items),

              const SizedBox(height: 40),

              const Text(
                'Animated Progress Timeline',
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                ),
              ),

              const SizedBox(height: 20),

              AnimatedProgressTimeline(items: items),

              const SizedBox(height: 40),

              const Text(
                'Achievement Timeline',
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                ),
              ),

              const SizedBox(height: 20),

              AchievementTimeline(items: items),
            ],
          ),
        ),
      ),
    );
  }
}

---

📸 Screenshots

Add your screenshots inside:

/screenshots/

Then include:

| Vertical Timeline | Achievement Timeline |
|------------------|----------------------|
| ![](screenshots/1.png) | ![](screenshots/2.png) |

---

🎨 Customization Ideas

You can extend the package with:

• Dotted connectors
• Timeline animations
• Gradient indicators
• Expandable cards
• Timeline themes
• Milestone badges
• Dark mode
• Sliver timelines
• Infinite builder timelines
• Interactive progress tracking

---

🧪 Testing

Run tests using:

flutter test

---

📦 Publish

Check package:

flutter pub publish --dry-run

Publish package:

flutter pub publish

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to fork this repository and submit pull requests.

---

📄 License

This project is licensed under the MIT License.

---

👨‍💻 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:

• https://zeba.academy
• https://code.zeba.academy

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

Level up your tech game today! 💻✨

---

🌐 Connect With Zeba Academy

➡ Main Website: https://zeba.academy ➡ Courses & Resources: https://code.zeba.academy ➡ YouTube: https://www.youtube.com/@zeba.academy ➡ Instagram: https://www.instagram.com/zeba.academy/

---

❤️ Support

If you like this package, give it a ⭐ on GitHub and share it with the Flutter community!

---

🙌 Thank You

Thank you for visiting and supporting open-source development!