搜尋套件、儲存庫與 APP 分類

套件詳情v1.0.5

xlive_switch

一個具有自訂UI和設計的開關小工具外掛,設計風格類似於Dribbble上Oleg Frolov的作品

近 30 天下載
28
喜歡數
47
Pub 分數
25

安裝套件

flutter pub add xlive_switch

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

一個受 Oleg Frolov 在 Dribbble 上設計啟發的 Flutter 切換元件外掛程式,提供流暢、可自訂的切換效果,具備平滑動畫與現代美學。它為預設的 Switch 元件提供視覺上更具吸引力的替代方案,非常適合強調現代 UI/UX 的應用程式。此套件支援自訂顏色、尺寸與過渡效果,讓開發者能符合品牌或設計系統的需求。以效能與簡潔性為設計核心,可順暢整合至 Flutter 專案中。

適用情境

  • 現代UI中的自定義切換開關
  • 透過動畫切換按鈕增強應用視覺吸引力
  • 設計設定或偏好螢幕
  • 建立互動式開關控制
  • 實施品牌化開關組件

主要特色

  • Dribbble 為靈感的現代設計
  • 平滑的動畫過渡
  • 可自訂的顏色和大小
  • 與 Flutter 的輕鬆整合
  • 支援狀態化的切換行為

適合對象

  • 尋求精緻開關組件的UI設計師
  • 開發注重美學應用程式的開發者
  • 需要品牌化互動元件的專案
  • Flutter 初學者探索元件自訂
  • 需要深色/淺色模式切換的應用程式

使用建議

  • 有限的平台特定行為
  • 無內建可存取性標籤
  • 需要手動處理焦點和語義
  • 未針對複雜表單互動進行優化
  • 對方向佈局的支援僅限於基本對齊

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

xlive_switch

A Xlive Switcher plugin for Flutter

Getting Started

This plugin is based on Oleg Frolov's animation design which I found on Dribbble: https://dribbble.com/shots/5429846-Switcher-XLIV

Thanks Oleg Forlov for this beautiful design.

Design:

Demo:

Usage

To use plugin, just import package import 'package:xlive_switch/xlive_switch.dart';

You can change the color of the switch follow by these attributes:

  • activeColor: background color when value is true
  • unActiveColor: background color when value is false
  • thumbColor: your thumb color

Example

import 'package:flutter/material.dart';
import 'package:xlive_switch/xlive_switch.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _value = true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              XlivSwitch(
                value: _value,
                onChanged: _changeValue,
              ),
              Text('Current value: $_value'),
            ],
          ),
        ),
      ),
    );
  }

  void _changeValue(bool value) {
    setState(() {
      _value = value;
    });
  }
}

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。