zeba_academy_liquid_switch 0.0.1

Beautiful liquid animated switch with physics, gradients, and glow effects.

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:

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