zeba_academy_success_state 0.0.1

A beautiful and customizable success state widget for Flutter with an animated checkmark.

zeba_academy_success_state

A lightweight, customizable, and reusable success state widget for Flutter with a beautifully animated checkmark.

Build polished success screens for payments, registrations, orders, account creation, form submissions, onboarding flows, and more.

---

✨ Features

• ✅ Animated success checkmark
• 🎨 Customizable checkmark and background colors
• 📏 Configurable icon size
• 🎬 Custom animation duration
• 🌀 Custom animation curves
• 📝 Customizable title and message
• 🔘 Optional action button
• 🧩 Support for fully custom buttons
• 📦 Zero external dependencies
• 🌗 Works with light and dark themes
• ♿ Uses standard Flutter widgets for accessibility
• 🚀 Lightweight and easy to integrate
• 🧪 Tested with Flutter widget tests

---

📦 Installation

Add zeba_academy_success_state to your pubspec.yaml:

dependencies:
  zeba_academy_success_state: ^0.0.1

Then run:

flutter pub get

---

🚀 Quick Start

Import the package:

import 'package:zeba_academy_success_state/zeba_academy_success_state.dart';

Use the success state widget:

import 'package:flutter/material.dart';
import 'package:zeba_academy_success_state/zeba_academy_success_state.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ZebaSuccessState(
        title: 'Payment Successful!',
        message: 'Your payment has been processed successfully.',
        buttonText: 'Continue',
        onButtonPressed: () {
          Navigator.of(context).pop();
        },
      ),
    );
  }
}

---

🎯 Basic Usage

ZebaSuccessState(
  title: 'Success!',
  message: 'Your operation was completed successfully.',
)

The widget automatically provides:

• Animated checkmark
• Success title
• Optional message
• Theme-aware styling

---

🔘 Success State with Action Button

ZebaSuccessState(
  title: 'Account Created',
  message: 'Your account is ready to use.',
  buttonText: 'Get Started',
  onButtonPressed: () {
    debugPrint('Get Started pressed');
  },
)

---

🎨 Custom Styling

Customize the success animation and layout:

ZebaSuccessState(
  title: 'Payment Complete',
  message: 'Your transaction was completed successfully.',
  config: const SuccessStateConfig(
    iconSize: 150,
    iconColor: Colors.white,
    backgroundColor: Colors.green,
    animationDuration: Duration(milliseconds: 1200),
    animationCurve: Curves.easeOutBack,
    titleSpacing: 32,
    messageSpacing: 16,
    buttonSpacing: 36,
  ),
)

---

🧩 Custom Button

Use any Flutter widget as your action button:

ZebaSuccessState(
  title: 'Changes Saved',
  message: 'Your settings have been updated successfully.',
  button: FilledButton.icon(
    onPressed: () {
      debugPrint('Continue pressed');
    },
    icon: const Icon(Icons.arrow_forward),
    label: const Text('Continue'),
  ),
)

When button is provided, it takes precedence over buttonText.

---

✨ Animated Checkmark Only

If you only need the animated checkmark, use AnimatedCheckmark directly:

AnimatedCheckmark(
  size: 140,
  color: Colors.white,
  backgroundColor: Colors.green,
  duration: const Duration(milliseconds: 1000),
  onComplete: () {
    debugPrint('Animation completed');
  },
)

---

🎬 Animation Customization

AnimatedCheckmark(
  size: 120,
  duration: const Duration(milliseconds: 1500),
  curve: Curves.elasticOut,
)

Available Flutter curves include:

Curves.easeIn
Curves.easeOut
Curves.easeInOut
Curves.easeOutBack
Curves.elasticOut
Curves.bounceOut
Curves.fastOutSlowIn

---

🎨 Theme Integration

The package automatically uses the current Flutter theme when colors are not explicitly provided.

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.green,
    ),
  ),
  home: const SuccessPage(),
)

The checkmark automatically uses:

Theme.of(context).colorScheme.primary

as the background color and:

Theme.of(context).colorScheme.onPrimary

as the checkmark color.

---

📋 API Reference

ZebaSuccessState

The main success state widget.

Property	Type	Default	Description
title	String	Required	Main success title
message	String?	null	Optional description
buttonText	String?	null	Optional button label
onButtonPressed	VoidCallback?	null	Button callback
button	Widget?	null	Custom action widget
config	SuccessStateConfig	Default config	Appearance configuration
padding	EdgeInsetsGeometry	EdgeInsets.all(24)	Widget padding
mainAxisAlignment	MainAxisAlignment	center	Vertical alignment
crossAxisAlignment	CrossAxisAlignment	center	Horizontal alignment

---

AnimatedCheckmark

A standalone animated success checkmark.

Property	Type	Default	Description
size	double	120	Checkmark size
color	Color?	Theme color	Checkmark color
backgroundColor	Color?	Theme color	Circle background
duration	Duration	800ms	Animation duration
curve	Curve	Curves.easeOutBack	Animation curve
strokeWidth	double	6	Checkmark stroke width
onComplete	VoidCallback?	null	Completion callback

---

SuccessStateConfig

Configuration for ZebaSuccessState.

Property	Type	Default
iconSize	double	120
iconColor	Color?	Theme color
backgroundColor	Color?	Theme color
titleStyle	TextStyle?	Theme style
messageStyle	TextStyle?	Theme style
animationDuration	Duration	800ms
animationCurve	Curve	Curves.easeOutBack
titleSpacing	double	24
messageSpacing	double	12
buttonSpacing	double	28

---

🛠️ Example Use Cases

This package is useful for:

• 💳 Payment success screens
• 🛒 Order completion screens
• 👤 Account registration
• 📧 Email verification
• 🔐 Password reset
• 📝 Form submission
• 🎓 Course completion
• 📦 Delivery confirmation
• 🎉 Onboarding completion
• ⚙️ Settings updates
• 🏆 Achievement screens

---

🧪 Testing

Run static analysis:

flutter analyze

Run tests:

flutter test

Validate the package before publishing:

flutter pub publish --dry-run

---

📁 Project Structure

lib/
├── zeba_academy_success_state.dart
└── src/
    ├── models/
    │   └── success_state_config.dart
    ├── painters/
    │   └── checkmark_painter.dart
    └── widgets/
        ├── animated_checkmark.dart
        └── success_state.dart

---

📄 License

Copyright © 2026 Sufyan bin Uzayr.

This project is licensed under the GNU General Public License v3.0.

You may use, modify, and distribute this software under the terms of the GPL-3.0 license.

See the LICENSE file for the complete license text.

---

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

👉 sufyanism.com

Or connect with me on LinkedIn:

👉 LinkedIn

---

🚀 Your All-in-One Learning Hub

🚀 Explore courses and resources in coding, technology, and development at Zeba Academy.

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

🌐 Explore Zeba Academy

➡ Main website: zeba.academy

➡ Hands-on courses and resources: code.zeba.academy

➡ YouTube tutorials: zeba.academy

➡ Instagram: zeba.academy

---

⭐ Support the Project

If you find this package useful:

• ⭐ Star the repository
• 📦 Use it in your Flutter projects
• 🐛 Report issues
• 💡 Suggest improvements
• 🤝 Contribute to the project

Every contribution helps improve the Flutter ecosystem.

---

🙏 Thank You

Thank you for visiting and using zeba_academy_success_state.

Built with ❤️ for the Flutter community by Zeba Academy.