switchy 1.0.1+2

A beautiful, customizable, animated Flutter switch with support for IconData and SVGs. Perfect for adding smooth, modern toggle buttons to your app.

🎨 Switchy

Transform your Flutter apps with beautifully animated, fully customizable toggle switches that delight users.

---

✨ Why Fancy Switch?

Tired of boring, stock toggle switches? Fancy Switch brings your Flutter app to life with:

• 🎨 Gorgeous gradient animations that smoothly transition between states
• 🎭 Dual-icon support with separate icons for on/off states
• 📐 Pixel-perfect customization - control every aspect of the design
• ⚡ Buttery-smooth 60fps animations with customizable durations
• 🎯 Native Flutter experience - no platform-specific hacks

---

🚀 Quick Start

1. Installation

Add to your pubspec.yaml:

dependencies:
  switchy: ^1.0.1
  flutter_svg: ^2.0.0+1  # Optional, for SVG support

🎨 Demo

Dark/Light Mode	Notifications	Airplane Mode

2. Basic Usage

import 'package:switchy/switchy.dart';

bool isEnabled = false;

Switchy(
  value: isEnabled,
  onChanged: (value) => setState(() => isEnabled = value),
  activeIcon: Icons.notifications_active,
  inactiveIcon: Icons.notifications_off,
  activeColors: [Colors.green, Colors.lightGreen],
  inactiveColors: [Colors.grey, Colors.blueGrey],
)

🎨 Features

🌈 Gradient Colors

Switchy(
  value: isDarkMode,
  onChanged: (v) => setState(() => isDarkMode = v),
  activeIcon: Icons.nightlight_round,
  inactiveIcon: Icons.wb_sunny,
  activeColors: [Color(0xFF2C3E50), Color(0xFF34495E)],
  inactiveColors: [Color(0xFFF39C12), Color(0xFFE67E22)],
)

🖼️ Icon & SVG Support

Switchy(
  activeIcon: Icons.wifi,
  inactiveIcon: Icons.wifi_off,
)

Switchy(
  activeIcon: 'assets/icons/moon.svg',
  inactiveIcon: 'assets/icons/sun.svg',
)

📐 Complete Customization

Switchy(
  value: value,
  onChanged: onChanged,
  activeIcon: Icons.check,
  inactiveIcon: Icons.close,
  width: 120,
  height: 50,
  iconSize: 24,
  duration: Duration(milliseconds: 500),
  circlePadding: 6,
  circleMargin: 8,
  circleSizeRatio: 0.65,
  activeColors: [Colors.purple, Colors.deepPurple],
  inactiveColors: [Colors.blueGrey, Colors.grey],
)

📱 Examples

// Dark Mode Toggle
Switchy(
  value: darkMode,
  onChanged: (v) => setState(() => darkMode = v),
  activeIcon: Icons.nightlight_round,
  inactiveIcon: Icons.wb_sunny,
  activeColors: [Color(0xFF2C3E50), Color(0xFF34495E)],
  inactiveColors: [Color(0xFFF39C12), Color(0xFFE67E22)],
)

// Notifications Toggle
Switchy(
  value: notifications,
  onChanged: (v) => setState(() => notifications = v),
  activeIcon: Icons.notifications_active,
  inactiveIcon: Icons.notifications_off,
  activeColors: [Color(0xFF27AE60), Color(0xFF2ECC71)],
  inactiveColors: [Color(0xFF95A5A6), Color(0xFF7F8C8D)],
  width: 80,
  height: 36,
)

// Airplane Mode
Switchy(
  value: airplaneMode,
  onChanged: (v) => setState(() => airplaneMode = v),
  activeIcon: Icons.airplanemode_active,
  inactiveIcon: Icons.airplanemode_inactive,
  activeColors: [Color(0xFFE74C3C), Color(0xFFC0392B)],
  inactiveColors: [Color(0xFF3498DB), Color(0xFF2980B9)],
)

⚙️ API Reference

Property	Type	Default	Description
value	bool	Required	Current switch state
onChanged	ValueChanged	Required	Callback when state changes
activeIcon	dynamic	Required	Icon for active state (IconData or SVG path)
inactiveIcon	dynamic	Required	Icon for inactive state (IconData or SVG path)
activeColors	List	[#27AE60, #2ECC71]	Gradient colors for active state
inactiveColors	List	[#95A5A6, #7F8C8D]	Gradient colors for inactive state
width	double	70	Total width of the switch
height	double	36	Total height of the switch
iconSize	double	20	Size of icons
duration	Duration	400ms	Animation duration
circlePadding	double	6	Internal padding of the white circle
circleMargin	double	4	Margin from edges
circleSizeRatio	double	0.7	Circle size relative to height

🎯 Advanced Usage

Theme-Aware Switch

class ThemeSwitch extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Switchy(
      value: theme.brightness == Brightness.dark,
      onChanged: (isDark) {},
      activeIcon: Icons.nightlight_round,
      inactiveIcon: Icons.wb_sunny,
      activeColors: [theme.colorScheme.primary, theme.colorScheme.primary.withOpacity(0.8)],
      inactiveColors: [theme.colorScheme.secondary, theme.colorScheme.secondary.withOpacity(0.8)],
    );
  }
}

Custom Switch with SVG

Switchy(
  value: isPremium,
  onChanged: (v) => setState(() => isPremium = v),
  activeIcon: 'assets/icons/crown.svg',
  inactiveIcon: 'assets/icons/crown_outline.svg',
  activeColors: [Color(0xFFFFD700), Color(0xFFFFA500)],
  inactiveColors: [Color(0xFFBDC3C7), Color(0xFF7F8C8D)],
  width: 100,
  height: 45,
  iconSize: 22,
)

🤝 Contributing

• Fork the repository
• Create a feature branch: git checkout -b feature/amazing-feature
• Commit your changes: git commit -m 'Add amazing feature'
• Push to the branch: git push origin feature/amazing-feature
• Open a Pull Request

Development Setup

git clone https://github.com/unclegenson/switchy.git
flutter pub get
cd example
flutter run

📖 FAQ

• Can I use custom SVG animations? Yes.
• How to change animation curve? Default Curves.easeInOut.
• RTL support? Yes.
• Can I use emojis? Use SVG versions or custom widget.

📊 Performance

• ✅ 60 FPS animations
• ✅ Minimal rebuilds
• ✅ Efficient painting
• ✅ Zero unnecessary state changes

🌟 Showcase

Used in productivity, social media, e-commerce apps, and more.

Share your creation! Tag @unclegenson or submit a PR.

📄 License

MIT License

Copyright (c) 2024 UncleGenSon

Permission granted free of charge to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software.

🙏 Acknowledgments

• Flutter Team
• flutter_svg package
• All contributors
• You for using Switchy! 🎉

📞 Support

• Email: [e-mail]
• Telegram: @unclegenson
• GitHub: unclegenson

Made with ❤️ by UncleGenSon for the Flutter community