Skip to content

Commit

Permalink
Merge pull request #36 from splashbyte/version0.8.0
Browse files Browse the repository at this point in the history 
Version 0.8.0-beta.2
  • Loading branch information
@maeddin
maeddin committed Aug 1, 2023
2 parents 6dc4799 + b075ac5 commit fa31621
Show file tree
Hide file tree
Showing 9 changed files with 239 additions and 87 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 0.8.0-beta.2 (2023-08-01)
- minor fixes
- updates README

## 0.8.0-beta.1 (2023-07-31)
- adds `active` to all constructors
- closes [#30](https://github.com/splashbyte/animated_toggle_switch/issues/30)
Expand Down
9 changes: 5 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ For a slider with a similar look you can check out [action_slider](https://pub.d
## Examples
`AnimatedToggleSwitch.dual()`
![animated_toggle_switch_example_dual](https://user-images.githubusercontent.com/43761463/161432631-e6dd3d16-7b64-410b-a9fa-c956d3442598.gif)
![animated_toggle_switch_example_borderradius_builder](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/985492df-82a4-4225-a0ad-500970ad692d)
![animated_toggle_switch_example_borderradius_builder](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/ee615f64-d897-43f1-b508-0318805195e4)
![animated_toggle_switch_example_lite_rolling_gradient](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/6cd5d2d3-b4bd-4020-8568-354c71221e40)

Switch inspired by [lite_rolling_switch](https://pub.dev/packages/lite_rolling_switch) (made with `AnimatedToggleSwitch.dual()`)
Expand All @@ -36,6 +36,8 @@ Switch inspired by [toggle_switch](https://pub.dev/packages/toggle_switch) (made
![animated_toggle_switch_example_toggle_switch](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/4812efdc-fe9a-4c34-808a-0983de65d2a4)


Switch inspired by [crazy-switch](https://github.com/pedromassango/crazy-switch) (made with `CustomAnimatedToggleSwitch()`)
![animated_toggle_switch_example_crazy_switch](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/106afaf5-88a0-4d4b-ad59-2b22182d18be)

`AnimatedToggleSwitch.rolling()`
![animated_toggle_switch_example_1](https://user-images.githubusercontent.com/43761463/161432579-9fe81c57-6463-45c3-a48f-75db666a3a22.gif)
Expand All @@ -49,9 +51,8 @@ You can build any other switch with `CustomAnimatedToggleSwitch()`
![animated_toggle_switch_example_custom_1](https://user-images.githubusercontent.com/43761463/161433015-c3ec634a-38da-463d-a06e-4ae0b29f77ed.gif)

`AnimatedToggleSwitch.size()`
![animated_toggle_switch_example_4](https://user-images.githubusercontent.com/43761463/161432714-435d8369-7e54-432a-8b9b-6b55a0764f4a.gif)
![animated_toggle_switch_example_size_loading](https://user-images.githubusercontent.com/43761463/209121115-ed0f634b-0ec4-46b5-b030-21dbdde8cf07.gif)
![animated_toggle_switch_example_5](https://user-images.githubusercontent.com/43761463/161432720-1d5fa49e-6d20-401a-9a90-a6df88873266.gif)
![animated_toggle_switch_example_size](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/805a0e3f-b3a2-4801-baf9-7a5509905452)
![animated_toggle_switch_example_size_2](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/ed2c1e50-1012-41ef-8218-71c1144e514b)

`AnimatedToggleSwitch.size()` with custom rolling animation
![animated_toggle_switch_example_6](https://user-images.githubusercontent.com/43761463/161432744-f60b660d-30d9-4d1d-9b87-14b62bc54e39.gif)
Expand Down
3 changes: 2 additions & 1 deletion analysis_options.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@ analyzer:
strict-raw-types: true

linter:
rules:
rules:
prefer_single_quotes: true
76 changes: 76 additions & 0 deletions example/lib/crazy_switch.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
// This switch is inspired by https://github.com/pedromassango/crazy-switch

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

class CrazySwitch extends StatefulWidget {
const CrazySwitch({super.key});

@override
State<CrazySwitch> createState() => _CrazySwitchState();
}

class _CrazySwitchState extends State<CrazySwitch> {
bool current = false;

@override
Widget build(BuildContext context) {
const red = Color(0xFFFD0821);
const green = Color(0xFF46E82E);
const borderWidth = 10.0;
const height = 58.0;
const innerIndicatorSize = height - 4 * borderWidth;

return CustomAnimatedToggleSwitch(
current: current,
dif: 24.0,
values: [false, true],
animationDuration: const Duration(milliseconds: 350),
animationCurve: Curves.bounceOut,
iconBuilder: (context, local, global) => const SizedBox(),
onChanged: (b) => setState(() => current = b),
height: height,
indicatorSize: Size.square(height),
foregroundIndicatorBuilder: (context, global) {
final color = Color.lerp(red, green, global.position)!;
return Padding(
padding: EdgeInsets.all(borderWidth),
child: DecoratedBox(
decoration:
BoxDecoration(color: Colors.white, shape: BoxShape.circle),
child: Container(
margin: const EdgeInsets.all(borderWidth),
child: Center(
child: Container(
width: innerIndicatorSize * 0.4 +
global.position * innerIndicatorSize * 0.6,
height: innerIndicatorSize,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: color,
)),
),
),
),
);
},
wrapperBuilder: (context, global, child) {
final color = Color.lerp(red, green, global.position)!;
return DecoratedBox(
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(50.0),
boxShadow: [
BoxShadow(
color: color.withOpacity(0.7),
blurRadius: 12.0,
offset: const Offset(0.0, 8.0),
),
],
),
child: child,
);
},
);
}
}
185 changes: 120 additions & 65 deletions example/lib/main.dart
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import 'dart:math';

import 'package:animated_toggle_switch/animated_toggle_switch.dart';
import 'package:example/crazy_switch.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

Expand Down Expand Up @@ -126,6 +127,56 @@ class _MyHomePageState extends State<MyHomePage> {
child:
Text('Off', style: TextStyle(color: Colors.white))),
),
SizedBox(height: 16.0),
DefaultTextStyle.merge(
style: const TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold),
child: IconTheme.merge(
data: IconThemeData(color: Colors.white),
child: AnimatedToggleSwitch<bool>.dual(
current: positive,
first: false,
second: true,
dif: 45.0,
animationDuration: const Duration(milliseconds: 600),
style: ToggleStyle(
borderColor: Colors.transparent,
indicatorColor: Colors.white,
backgroundColor: Colors.black,
),
customStyleBuilder: (context, local, global) {
if (global.position <= 0.0)
return ToggleStyle(backgroundColor: Colors.red[800]);
return ToggleStyle(
backgroundGradient: LinearGradient(
colors: [green, Colors.red[800]!],
stops: [
global.position -
(1 - 2 * max(0, global.position - 0.5)) * 0.2,
global.position +
max(0, 2 * (global.position - 0.5)) * 0.2,
],
));
},
borderWidth: 6.0,
height: 60.0,
loadingIconBuilder: (context, global) =>
CupertinoActivityIndicator(
color: Color.lerp(
Colors.red[800], green, global.position)),
onChanged: (b) => setState(() => positive = b),
iconBuilder: (value) => value
? Icon(Icons.power_outlined, color: green, size: 32.0)
: Icon(Icons.power_settings_new_rounded,
color: Colors.red[800], size: 32.0),
textBuilder: (value) => value
? Center(child: Text('Active'))
: Center(child: Text('Inactive')),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
Expand Down Expand Up @@ -176,7 +227,13 @@ class _MyHomePageState extends State<MyHomePage> {
),
),
),
SizedBox(height: 16.0),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Switch inspired by package lite_rolling_switch',
textAlign: TextAlign.center,
),
),
DefaultTextStyle.merge(
style: const TextStyle(
color: Colors.white,
Expand Down Expand Up @@ -218,56 +275,17 @@ class _MyHomePageState extends State<MyHomePage> {
),
),
),
SizedBox(height: 16.0),
DefaultTextStyle.merge(
style: const TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold),
child: IconTheme.merge(
data: IconThemeData(color: Colors.white),
child: AnimatedToggleSwitch<bool>.dual(
current: positive,
first: false,
second: true,
dif: 45.0,
animationDuration: const Duration(milliseconds: 600),
style: ToggleStyle(
borderColor: Colors.transparent,
indicatorColor: Colors.white,
backgroundColor: Colors.black,
),
customStyleBuilder: (context, local, global) {
if (global.position <= 0.0)
return ToggleStyle(backgroundColor: Colors.red[800]);
return ToggleStyle(
backgroundGradient: LinearGradient(
colors: [green, Colors.red[800]!],
stops: [
global.position -
(1 - 2 * max(0, global.position - 0.5)) * 0.2,
global.position +
max(0, 2 * (global.position - 0.5)) * 0.2,
],
));
},
borderWidth: 6.0,
height: 60.0,
loadingIconBuilder: (context, global) =>
CupertinoActivityIndicator(
color: Color.lerp(
Colors.red[800], green, global.position)),
onChanged: (b) => setState(() => positive = b),
iconBuilder: (value) => value
? Icon(Icons.power_outlined, color: green, size: 32.0)
: Icon(Icons.power_settings_new_rounded,
color: Colors.red[800], size: 32.0),
textBuilder: (value) => value
? Center(child: Text('Active'))
: Center(child: Text('Inactive')),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Switch inspired by CrazySwitch (https://github.com/pedromassango/crazy-switch)',
textAlign: TextAlign.center,
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0, bottom: 16.0),
child: const CrazySwitch(),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
Expand Down Expand Up @@ -375,8 +393,7 @@ class _MyHomePageState extends State<MyHomePage> {
values: const [0, 1, 2, 3],
onChanged: (i) => setState(() => value = i),
iconBuilder: rollingIconBuilder,
separatorBuilder: (index) =>
SizedBox.expand(child: ColoredBox(color: Colors.red)),
separatorBuilder: (index) => const VerticalDivider(),
borderWidth: 4.5,
style: ToggleStyle(
indicatorColor: Colors.white,
Expand Down Expand Up @@ -492,17 +509,55 @@ class _MyHomePageState extends State<MyHomePage> {
size: min(size.width, size.height),
);
},
style: const ToggleStyle(borderColor: Colors.transparent),
style: ToggleStyle(
borderColor: Colors.transparent,
),
borderWidth: 0.0,
styleBuilder: (i) => ToggleStyle(
indicatorColor:
i.isEven == true ? Colors.amber : Colors.red),
styleBuilder: (i) {
final color = colorBuilder(i);
return ToggleStyle(
backgroundColor: color.withOpacity(0.3),
indicatorColor: color,
);
},
onChanged: (i) {
setState(() => value = i);
return Future<dynamic>.delayed(Duration(seconds: 3));
},
),
SizedBox(height: 16.0),
const SizedBox(height: 16.0),
AnimatedToggleSwitch<int>.size(
textDirection: TextDirection.rtl,
current: value,
values: const [0, 1, 2, 3],
iconOpacity: 0.2,
indicatorSize: const Size.fromWidth(100),
iconBuilder: iconBuilder,
borderWidth: 4.0,
iconAnimationType: AnimationType.onHover,
style: ToggleStyle(
borderColor: Colors.transparent,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: Colors.black26,
spreadRadius: 1,
blurRadius: 2,
offset: Offset(0, 1.5),
),
],
),
styleBuilder: (i) =>
ToggleStyle(indicatorColor: colorBuilder(i)),
onChanged: (i) => setState(() => value = i),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Switch inspired by package toggle_switch',
textAlign: TextAlign.center,
),
),
AnimatedToggleSwitch<int>.size(
current: min(value, 2),
style: ToggleStyle(
Expand Down Expand Up @@ -650,12 +705,7 @@ class _MyHomePageState extends State<MyHomePage> {
Widget coloredRollingIconBuilder(int value, Size iconSize, bool foreground) {
final color = foreground ? colorBuilder(value) : null;
return Icon(
switch (value) {
0 => Icons.access_time_rounded,
1 => Icons.check_circle_outline_rounded,
2 => Icons.power_settings_new_rounded,
_ => Icons.lightbulb_outline_rounded,
},
iconDataByValue(value),
color: color,
size: iconSize.shortestSide,
);
Expand All @@ -666,14 +716,19 @@ class _MyHomePageState extends State<MyHomePage> {
}

Widget rollingIconBuilder(int? value, Size iconSize, bool foreground) {
IconData data = Icons.access_time_rounded;
if (value?.isEven ?? false) data = Icons.cancel;
return Icon(
data,
iconDataByValue(value),
size: iconSize.shortestSide,
);
}

IconData iconDataByValue(int? value) => switch (value) {
0 => Icons.access_time_rounded,
1 => Icons.check_circle_outline_rounded,
2 => Icons.power_settings_new_rounded,
_ => Icons.lightbulb_outline_rounded,
};

Widget sizeIconBuilder(BuildContext context, SizeProperties<int> local,
GlobalToggleProperties<int> global) {
return iconBuilder(local.value, local.iconSize);
Expand Down
4 changes: 2 additions & 2 deletions lib/src/widgets/animated_toggle_switch.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -773,7 +773,7 @@ class AnimatedToggleSwitch<T> extends StatelessWidget {
Function()? onTap,
this.minTouchTargetSize = 48.0,
this.textDirection,
this.cursors = const ToggleCursors(),
this.cursors = const ToggleCursors(defaultCursor: SystemMouseCursors.click),
EdgeInsetsGeometry textMargin = const EdgeInsets.symmetric(horizontal: 8.0),
Offset animationOffset = const Offset(20.0, 0),
bool clipAnimation = true,
Expand Down Expand Up @@ -989,7 +989,7 @@ class AnimatedToggleSwitch<T> extends StatelessWidget {
borderRadius: style.borderRadius,
),
child: ClipRRect(
borderRadius: style.borderRadius,
borderRadius: style.borderRadius!,
child: child,
),
),
Expand Down
Loading

0 comments on commit fa31621

Please sign in to comment.