A Flutter package that two widgets switch with clipper.

Overview

Flutter Switch Clipper

A Flutter package that two widgets switch with clipper.

pub package GitHub stars GitHub forks CodeFactor FlutterCandies

使用

使用FillClipper并自定义相关参数

View code
SwitchCipper(
    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),
    customCipperBuilder: (Animation<double> animation) => FillClipper(
        animation: animation,
        fillAlignment: _alignment,
        fillOffset: 50,
    ),
),

使用默认FillClipper

View code
const SwitchCipper(
    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切换图标颜色

View code
SwitchCipper(
    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),
    customCipperBuilder: (Animation<double> animation) => CircleClipper(animation: animation),
),

使用CircleClipper切换两个图标

View code
SwitchCipper(
    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),
    customCipperBuilder: (Animation<double> animation) => CircleClipper(animation: animation),
),

使用ShutterClipper

View code
SwitchCipper(
    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),
    customCipperBuilder: (Animation<double> animation) => ShutterClipper(
        animation: animation,
        activeAlignment: _alignment,
    ),
),

使用WaveClipper

View code
SwitchCipper(
    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),
    customCipperBuilder: (Animation<double> animation) => WaveClipper(
        animation: animation,
        waveAlignment: _alignment == FillAlignment.left ? WaveAlignment.left : WaveAlignment.right,
    ),
),

使用CameraClipper

View code
SwitchCipper(
    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),
    customCipperBuilder: (Animation<double> animation) => CameraClipper(
        animation: animation,
    ),
),

体验一下

体验网址:https://sc.liugl.cn

You might also like...

Simple to use yet powerfull style widgets with syntax inspired by CSS.

Simple to use yet powerfull style widgets with syntax inspired by CSS.

Division Simple to use yet powerfull style widgets with syntax inspired by CSS. Please check out styled_widget which is a replacement of Division! The

Nov 20, 2022

A customizable and easy to use UI widgets to help develop apps faster

A customizable and easy to use UI widgets to help develop apps faster

Lenore UI Beautiful, customizable and easy to use UI widgets to help me (or maybe you) develop my (or maybe your) apps faster. This is my personal pac

Nov 4, 2022

Clip your widgets with custom shapes provided.

Clip your widgets with custom shapes provided.

clippy_flutter Clip your widgets with custom shapes provided. #Arc, #Arrow, #Bevel, #ButtCheek, #Chevron, #Diagonal, #Label, #Message, #Paralellogram,

Dec 11, 2022

Loading widget based on a Flare animation, allow you to create beautiful custom loading widgets or dialogs

flare_loading Loading widget based on a Flare animation, allow you to create custom loading widgets or dialogs If you're using Rive instead of Flare p

Apr 16, 2021

A growing collection of cool, elegant, efficient and performance-optimized animation widgets.

im_animations About A growing collection of cool, elegant, efficient and performance-optimized animation widgets. Feedback For any feedback please fil

Nov 13, 2022

🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

🔔  A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Jan 6, 2023

Dart package that converts number to words (English language)A Flutter/Dart package that converts number to words (English language)

flutter_number_to_words_english A Flutter/Dart package that converts number to words (English language) Flutter (Null Safety) Flutter (Channel stable,

Dec 9, 2022

Flutter package for creating awesome animations.

Flutter package for creating awesome animations.

🎬 Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. 💪 fully tested 📝 well documented 💼 e

Dec 31, 2022

A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Apr 26, 2022
Owner
FlutterCandies
Custom Flutter candies (packages) for you to build your Flutter app easily. Enjoy it!
FlutterCandies
A flutter package which makes it easier to display the difference between two images.

?? Before After A flutter package which makes it easier to display the differences between two images.. The source code is 100% Dart, and everything r

Sahil Kumar 741 Dec 30, 2022
A simple toggle switch widget for Flutter.

Toggle Switch A simple toggle switch widget. It can be fully customized with desired icons, width, colors, text, corner radius, animation etc. It also

Pramod Joshi 84 Nov 20, 2022
A Flutter ListView that implicitly animates between the changes of two lists with support to reorder its items.

Implicitly Animated Reorderable List A Flutter ListView that implicitly calculates the changes between two lists using the MyersDiff algorithm and ani

null 246 Feb 22, 2022
A Flutter ListView that implicitly animates between the changes of two lists with support to reorder its items.

Implicitly Animated Reorderable List A Flutter ListView that implicitly calculates the changes between two lists using the MyersDiff algorithm and ani

null 246 Feb 22, 2022
A Flutter package allows you to Showcase/Highlight your widgets step by step.

ShowCaseView A Flutter package allows you to Showcase/Highlight your widgets step by step. Preview Installing Add dependency to pubspec.yaml Get the l

kirill 0 Dec 8, 2022
This package helps you daily usable function and ready-made Widgets with ease.

Show some love and like to support the project Documentation API Docs are available. Platform Support Android iOS MacOS Web Linux Windows ✔️ ✔️ ✔️ ✔️

Bhoomin Naik 51 Dec 23, 2022
This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS

AwesomeFlutterUI The purpose of this repository is to demonstrate the use of different widgets and tricks in flutter and how to use them in your proje

Subir Chakraborty 132 Nov 13, 2022
Writing custom Widgets in Flutter

Flutter - Custom Widgets Part 1 - EllipsizedText / LeafRenderObjectWidget Writing custom Widgets in Flutter (Part 1) — EllipsizedText Part 2 - ChildSi

Rostyslav Lesovyi 23 Dec 9, 2022
Flutter ListView and GridView that shows Loading Widgets before the real data is loaded.

loadinglistview This package provide an easy way to show loading indicator(Widget) in a listview or a gridview while the app is still fetching the rea

null 3 Dec 8, 2021
Flutter Login interface using basic widgets such as Row, Column

Login UI - Flutter Descrição do Projeto ?? Interface de login utilizando widgets

null 2 Oct 25, 2022