パッケージ、リポジトリ、アプリカテゴリを検索

パッケージ詳細v1.0.5

xlive_switch

カスタムUIとデザインを備えたスイッチウィジェットプラグイン。Dribbbleのオレグ・フロロフのデザインに似ています。

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;
    });
  }
}

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。