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

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.