https://github.com/fluttercandies/flutter_switch_clipper
A Flutter package that two widgets switch with clipper.
https://github.com/fluttercandies/flutter_switch_clipper
Last synced: about 1 year ago
JSON representation
A Flutter package that two widgets switch with clipper.
- Host: GitHub
- URL: https://github.com/fluttercandies/flutter_switch_clipper
- Owner: fluttercandies
- License: mit
- Created: 2021-11-19T08:47:50.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-24T10:03:17.000Z (almost 2 years ago)
- Last Synced: 2024-11-03T22:32:15.147Z (over 1 year ago)
- Language: Dart
- Size: 1.78 MB
- Stars: 26
- Watchers: 5
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# Flutter Switch Clipper
A Flutter package that two widgets switch with clipper.
[](https://pub.dev/packages/flutter_switch_clipper)
[](https://github.com/fluttercandies/flutter_switch_clipper/stargazers)
[](https://github.com/fluttercandies/flutter_switch_clipper/network/members)
[](https://www.codefactor.io/repository/github/fluttercandies/flutter_switch_clipper)
### 体验一下
体验网址:[Demo](https://xsilencex.github.io/flutter_switch_clipper_demo/)
### 使用
> 使用FillClipper并自定义相关参数
View code
```dart
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),
customClipperBuilder: (Animation animation) => FillClipper(
animation: animation,
fillAlignment: _alignment,
fillOffset: 50,
),
),
```
> 使用默认FillClipper
View code
```dart
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切换图标颜色
View code
```dart
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),
customClipperBuilder: (Animation animation) => CircleClipper(animation: animation),
),
```
> 使用CircleClipper切换两个图标
View code
```dart
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),
customClipperBuilder: (Animation animation) => CircleClipper(animation: animation),
),
```
> 使用ShutterClipper
View code
```dart
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),
customClipperBuilder: (Animation animation) => ShutterClipper(
animation: animation,
activeAlignment: _alignment,
),
),
```
> 使用WaveClipper
View code
```dart
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),
customClipperBuilder: (Animation animation) => WaveClipper(
animation: animation,
waveAlignment: _alignment == FillAlignment.left ? WaveAlignment.left : WaveAlignment.right,
),
),
```
> 使用CameraClipper
View code
```dart
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),
customClipperBuilder: (Animation animation) => CameraClipper(
animation: animation,
),
),
```