switch_up

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

SwitchUp é um interruptor animado altamente personalizável para aplicativos Flutter. Permite que desenvolvedores ajustem a aparência do interruptor com largura ajustável, cores, rótulos de texto, raio de borda e efeitos de animação suave. O widget mantém automaticamente seu estado de seleção, garantindo interações sem problemas com o usuário. Projetado para simplicidade e flexibilidade, integra-se facilmente em formulários, painéis de configurações ou qualquer interface que exija funcionalidade de alternância. Sua API limpa oferece adaptação a modos claro e escuro, tornando-o ideal para designs modernos de aplicativos.

Casos de uso

Alternadores de preferência do usuário
Interruptores de configuração
Controles de entrada de formulário
Ativar/desativar modo escuro
indicadores de estado ligado/desligado

Principais recursos

Aparência totalmente personalizável
Transições de animação suaves
Persistência de estado
Largura e raio de cantos ajustáveis
Suporta rótulos de texto personalizados
Pronto para modo claro e escuro

Indicado para

Interfaces de alternância simples
Componentes de interface personalizáveis
Telas de configuração
Desenvolvimento de aplicativos móveis
Iniciantes e especialistas em Flutter

Considerações

Nenhuma integração específica de plataforma mencionada
Limitado à personalização visual
Nenhuma característica de acessibilidade embutida observada
Requer manipulação manual de foco e semântica

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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

With icons, text and different active background colors

Example code with explanation

Buscar pacotes, repositórios e categorias de apps

Instalar pacote