Package detailsv0.0.2+1

switch_up

An animated toggle switch which can be fully customized with desired width, colors, text, corner radius, animation etc. It also maintains selection state.

pub.dev API documentation Source code

30-day downloads: 4
Likes: 23
Pub points: 70

Install package

flutter pub add switch_up

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

SwitchUp is a highly customizable animated toggle switch for Flutter applications. It allows developers to tailor the switch's appearance with adjustable width, colors, text labels, corner radius, and smooth animation effects. The widget maintains its selection state automatically, ensuring seamless user interaction. Designed for simplicity and flexibility, it integrates easily into forms, settings panels, or any UI requiring toggle functionality. Its clean API supports both light and dark mode adaptability, making it ideal for modern app designs.

Use cases

User preference toggles
Settings switches
Form input controls
Dark mode enable/disable
On/off state indicators

Key features

Fully customizable appearance
Smooth animation transitions
State persistence
Adjustable width and corner radius
Supports custom text labels
Light and dark mode ready

Suitable for

Simple toggle interfaces
Customizable UI components
Settings screens
Mobile app development
Flutter beginners and experts

Considerations

No platform-specific integration mentioned
Limited to visual customization
No built-in accessibility features noted
Requires manual handling of focus and semantics

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

README

Switch Up

An animated toggle switch which can be fully customized with desired width, colors, text, corner radius, animation etc. It also maintains selection state.

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:  ...  switch_up: latest_version

Import it:

import 'package:switch_up/switch_up.dart';

Usage Examples

// Here, default theme color are used for selected item.
SwitchUp<String>(
  backgroundColor: Colors.grey.shade200,
  items: const <String>['Home', 'Chat', 'Settings'],
  onChanged: (String value) {
    print(value);
  },
  value: 'Settings',
),

Switch Up with custom Height, Color and Animation

SwitchUp(
  backgroundColor: Colors.grey.shade200,
  color: Colors.amber,
  radius: 0,
	height: 50,
	curves: Curves.easeInOutBack,
  items: const ['Active', 'Pending'],
  onChanged: (value) {
    print(value);
  },
  value: 'Pending',
),

Switch Up with a Gradient Color

SwitchUp(
  gradient: const LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Color(0xFF941F37),
      Color(0xFF590012),
    ],
  ),
  curves: Curves.bounceOut,
  backgroundColor: Colors.grey.shade200,
  items: const ['Male', 'Female', 'Other'],
  onChanged: (value) {
    print(value);
  },
  value: 'Female',
),

SwitchUp(
  backgroundColor: Colors.grey.shade200,
  radius: 40,
  gradient: const RadialGradient(
    radius: 10,
    colors: [
      Color(0xFF941F37),
      Color(0xFF590012),
    ],
  ),
  curves: Curves.easeInOutQuart,
  items: const ['Normal', 'Bold', 'Italic'],
  onChanged: (value) {
    log(value);
  },
  value: 'Bold',
),

Switch Up with Custom Models

// Add toString() to your Custom model class
//   @override
//   String toString() {
//     return name;
//   } 
SwitchUp<States>(
  backgroundColor: Colors.pink.withOpacity(.1),
  radius: 10,
  height: 60,`
  gradient: const LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Color(0xFFFC466B),
      Color(0xFF3F5EFB),
    ],
  ),
  curves: Curves.easeInOutQuart,
  items: states,
  onChanged: (States value) {
    if (kDebugMode) {
      print(value);
    }
  },
  value: states[2],
),