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 分類

安裝套件