ducafecatFlutter エコシステムナビ
FLUTTER ECOSYSTEM

fluttercandies/flutter_switch_clipper

2つのウィジェットをクリッパーで切り替えるFlutterパッケージ。

GitHub で見る ↗
flutter_switch_clipper のプロジェクト画像
Stars
31
Forks
2
最終プッシュ（UTC）
2025/06/11
プロジェクト状態
公開中
FlutterCandies GitHub avatar
GITHUB Organization

FlutterCandies ↗

Custom Flutter candies (packages) for you to build your Flutter app easily. Enjoy it!

China公式サイト ↗
言語DartC++CMakeHTMLRubyCSwiftObjective-CJava

このリポジトリが公開するパッケージ

使用している依存関係

依存関係一覧 3 件
  • flutter{"sdk":"flutter"}
  • flutter_test開発用{"sdk":"flutter"}
  • flutter_lints開発用^1.0.0

元の README

以下は英語原文のスナップショットです。最新版は GitHub をご覧ください。

README を開く / 閉じる

Flutter Switch Clipper

A Flutter package that two widgets switch with clipper.

pub package GitHub stars GitHub forks CodeFactor FlutterCandies

体验一下

体验网址:Demo

使用

使用FillClipper并自定义相关参数

https://raw.githubusercontent.com/fluttercandies/flutter_switch_clipper/master/preview/fv.gif
View code 
SwitchClipper(
    initSelect: true,
    child: const Icon(Icons.favorite, size: 200, color: Colors.redAccent),
    background: const Icon(Icons.favorite, size: 200, color: Colors.white),
    duration: const Duration(milliseconds: 800),
    animationClip: FillClipper(fillAlignment: _alignment,fillOffset: 50),
),

使用默认FillClipper

https://raw.githubusercontent.com/fluttercandies/flutter_switch_clipper/master/preview/fc.gif
View code 
const SwitchClipper(
    enableWhenAnimating: false,
    child: Text(
        'FlutterCandies',
        style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 50,
            color: Colors.amber,
            height: 2,
        ),
    ),
    background: Text(
        'FlutterCandies',
        style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 50,
            color: Colors.white,
            height: 2,
        ),
    ),
    curve: Curves.slowMiddle,
    reverseCurve: Curves.linear,
),

使用CircleClipper切换图标颜色

https://raw.githubusercontent.com/fluttercandies/flutter_switch_clipper/master/preview/cs.gif
View code 
SwitchClipper(
    child: const Icon(Icons.accessibility_new_rounded, size: 200, color: Colors.blueAccent),
    background: const Icon(Icons.accessibility_new_rounded, size: 200, color: Colors.white),
    curve: Curves.ease,
    duration: const Duration(milliseconds: 800),
    animationClip: CircleClipper(),
),

使用CircleClipper切换两个图标

https://raw.githubusercontent.com/fluttercandies/flutter_switch_clipper/master/preview/cs2.gif
View code 
SwitchClipper(
    child: ColoredBox(
    color: Colors.blueGrey[200] ?? Colors.blueGrey,
    child: const Icon(Icons.accessibility_new_rounded, size: 200, color: Colors.white)),
    background: const Icon(Icons.accessible_forward_outlined, size: 200, color: Colors.white),
    curve: Curves.ease,
    duration: const Duration(milliseconds: 800),
    animationClip: CircleClipper(),
),

使用ShutterClipper

https://raw.githubusercontent.com/fluttercandies/flutter_switch_clipper/master/preview/cs3.gif
View code 
SwitchClipper(
    child: ColoredBox(
        color: Colors.blueGrey[200] ?? Colors.blueGrey,
        child: const Icon(Icons.accessibility_new_rounded, size: 200, color: Colors.white)),
    background: const Icon(Icons.accessible_forward_outlined, size: 200, color: Colors.white),
    curve: Curves.ease,
    duration: const Duration(milliseconds: 800),
    animationClip: ShutterClipper(activeAlignment: _alignment),
),

使用WaveClipper

https://raw.githubusercontent.com/fluttercandies/flutter_switch_clipper/master/preview/cs4.gif
View code 
SwitchClipper(
    child: const Icon(Icons.access_time_filled_rounded, size: 200, color: Colors.blue),
    background: const Icon(Icons.access_time_filled_rounded, size: 200, color: Colors.white),
    curve: Curves.ease,
    duration: const Duration(milliseconds: 2000),
    animationClip: WaveClipper(
        waveAlignment: _alignment == FillAlignment.left ? WaveAlignment.left : WaveAlignment.right,
    ),
),

使用CameraClipper

https://raw.githubusercontent.com/fluttercandies/flutter_switch_clipper/master/preview/cs5.gif
View code 
SwitchClipper(
    child: Container(
        width: 200,
        height: 200,
        alignment: Alignment.center,
        decoration: const BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.blue,
        ),
        child: const Text(
            'Camera',
            style: TextStyle(color: Colors.white, fontSize: 40, fontWeight: FontWeight.bold),
        ),
    ),
    background: Container(
        width: 200,
        height: 200,
        decoration: const BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white,
        ),
    ),
    duration: const Duration(milliseconds: 2000),
    animationClip: CameraClipper(),
),