switch_up

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

SwitchUp 是一个高度可定制的动画切换开关，适用于 Flutter 应用程序。它允许开发者通过调整宽度、颜色、文本标签、圆角半径和流畅的动画效果来定制开关的外观。该组件会自动维护其选中状态，确保用户交互的无缝体验。设计简洁且灵活，可轻松集成到表单、设置面板或任何需要切换功能的 UI 中。其简洁的 API 支持明暗模式自适应，非常适合现代应用设计。

适合场景

用户偏好切换
设置开关
表单输入控件
启用/禁用深色模式
开/关状态指示灯

主要特点

完全可自定义的外观
平滑的动画过渡
状态持久化
可调节的宽度和圆角半径
支持自定义文本标签
支持浅色和深色模式

适合对象

简单的切换界面
可自定义的 UI 组件
设置屏幕
移动应用开发
Flutter 初学者和专家

使用建议

未提及特定平台的集成
仅限视觉自定义
未注意到内置的无障碍功能
需要手动处理焦点和语义

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

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

搜索插件、代码仓与 APP 分类

安装插件