switch_up 0.0.2+1 copy "switch_up: ^0.0.2+1" to clipboard
switch_up: ^0.0.2+1 copied to clipboard

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

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',
),

ezgif.com-gif-maker(3).gif

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',
),

ezgif.com-gif-maker(4).gif

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',
),

ezgif.com-gif-maker(5).gif

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',
),

ezgif.com-gif-maker(6).gif

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],
),

ezgif.com-gif-maker(7).gif

With icons, text and different active background colors

Example code with explanation

23
likes
90
points
10
downloads

Publisher

unverified uploader

Weekly Downloads

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on switch_up