zeba_academy_liquid_switch

A beautiful and highly customizable liquid animated switch for Flutter with physics-based motion, elastic transitions, glowing effects, and smooth gradient animations.

✨ Features

✅ Liquid / water animation
✅ Elastic thumb movement
✅ Physics-based spring motion
✅ Smooth gradient backgrounds
✅ Animated glow effects
✅ Highly customizable
✅ Lightweight and fast
✅ Production-ready architecture
✅ Supports disabled state
✅ Flutter Web + Android + iOS support

📦 Installation

Add dependency in your pubspec.yaml:

dependencies:
  zeba_academy_liquid_switch: ^0.0.1

Then run:

flutter pub get

🚀 Import

import 'package:zeba_academy_liquid_switch/zeba_academy_liquid_switch.dart';

💡 Basic Usage

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isEnabled = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF101014),
      body: Center(
        child: ZebaAcademyLiquidSwitch(
          value: isEnabled,
          onChanged: (value) {
            setState(() {
              isEnabled = value;
            });
          },
        ),
      ),
    );
  }
}

🎨 Customization Example

ZebaAcademyLiquidSwitch(
  value: isEnabled,
  width: 90,
  height: 46,

  glowEnabled: true,

  thumbColor: Colors.white,

  activeColors: const [
    Color(0xFF00C9FF),
    Color(0xFF92FE9D),
  ],

  inactiveColors: const [
    Color(0xFF3E3E3E),
    Color(0xFF1E1E1E),
  ],

  onChanged: (value) {
    setState(() {
      isEnabled = value;
    });
  },
)

⚙️ Properties

Property	Type	Default	Description
`value`	`bool`	required	Current switch state
`onChanged`	`ValueChanged<bool>?`	null	Callback when toggled
`width`	`double`	80	Width of switch
`height`	`double`	42	Height of switch
`duration`	`Duration`	700ms	Animation duration
`activeColors`	`List<Color>`	Gradient	Active gradient
`inactiveColors`	`List<Color>`	Gradient	Inactive gradient
`thumbColor`	`Color`	White	Thumb color
`glowEnabled`	`bool`	true	Enable glow effect

🌊 Included Animations

Liquid Background Animation

Smooth fluid-style animated gradients.

Elastic Thumb Motion

Spring-based thumb movement with realistic physics.

Glow Effects

Beautiful glowing neon-style lighting effects.

Physics-Based Animation

Natural spring simulation powered by Flutter physics engine.

📱 Platform Support

Platform	Supported
Android	✅
iOS	✅
Web	✅
Windows	✅
macOS	✅
Linux	✅

🧪 Testing

Run tests using:

flutter test

📂 Package Structure

lib/
│
├── zeba_academy_liquid_switch.dart
│
└── src/
    ├── liquid_switch.dart
    ├── liquid_painter.dart
    ├── liquid_thumb.dart
    ├── glow_painter.dart
    └── physics_controller.dart

🔥 Upcoming Features

Ripple splash animation
Bubble particles
Drag interaction
Haptic feedback
Theme presets
Neon liquid modes
Dynamic wave simulation
Sound effects

🤝 Contributing

Contributions are welcome!

Feel free to:

Fork the repository
Improve animations
Add new features
Fix bugs
Improve documentation

📜 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:

🚀 Your all-in-one learning hub!

Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy.

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

Level up your tech game today! 💻✨

🌐 Links

➡ Main Website
https://zeba.academy

➡ Coding Platform
https://code.zeba.academy

➡ YouTube
https://www.youtube.com/@zeba.academy

➡ Instagram
https://www.instagram.com/zeba.academy/

❤️ Support

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

🙌 Thank You

Thank you for using zeba_academy_liquid_switch!