Skip to content

Commit

Permalink
Added Offset Parameter and onAnimationFinish Callback Parameter to ch…
Browse files Browse the repository at this point in the history 
…angeTheme Method (#68)

* added custom offset to changeTheme method parameters

* added onAnimationFinish callback

* added new features to example project
  • Loading branch information
@mahdidahouei
mahdidahouei committed Dec 3, 2023
1 parent 1cadda7 commit e0ac345
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 22 deletions.
51 changes: 43 additions & 8 deletions example/lib/main.dart
View file
Expand Up @@ -101,16 +101,17 @@ class _MyHomePageState extends State<MyHomePage> {
ThemeSwitcher.switcher(
clipper: const ThemeSwitcherBoxClipper(),
builder: (context, switcher) {
return OutlinedButton(
return TapDownButton(
child: const Text('Box Animation'),
onPressed: () {
onTap: (details) {
switcher.changeTheme(
theme: ThemeModelInheritedNotifier.of(context)
.theme
.brightness ==
Brightness.light
? darkTheme
: lightTheme,
offset: details.localPosition,
);
},
);
Expand All @@ -119,16 +120,17 @@ class _MyHomePageState extends State<MyHomePage> {
ThemeSwitcher(
clipper: const ThemeSwitcherCircleClipper(),
builder: (context) {
return OutlinedButton(
return TapDownButton(
child: const Text('Circle Animation'),
onPressed: () {
onTap: (details) {
ThemeSwitcher.of(context).changeTheme(
theme: ThemeModelInheritedNotifier.of(context)
.theme
.brightness ==
Brightness.light
? darkTheme
: lightTheme,
offset: details.localPosition,
);
},
);
Expand All @@ -142,9 +144,9 @@ class _MyHomePageState extends State<MyHomePage> {
ThemeSwitcher(
clipper: const ThemeSwitcherBoxClipper(),
builder: (context) {
return OutlinedButton(
return TapDownButton(
child: const Text('Box (Reverse)'),
onPressed: () {
onTap: (details) {
var brightness =
ThemeModelInheritedNotifier.of(context)
.theme
Expand All @@ -153,6 +155,7 @@ class _MyHomePageState extends State<MyHomePage> {
theme: brightness == Brightness.light
? darkTheme
: lightTheme,
offset: details.localPosition,
isReversed:
brightness == Brightness.dark ? true : false,
);
Expand All @@ -163,9 +166,9 @@ class _MyHomePageState extends State<MyHomePage> {
ThemeSwitcher(
clipper: const ThemeSwitcherCircleClipper(),
builder: (context) {
return OutlinedButton(
return TapDownButton(
child: const Text('Circle (Reverse)'),
onPressed: () {
onTap: (details) {
var brightness =
ThemeModelInheritedNotifier.of(context)
.theme
Expand All @@ -174,6 +177,7 @@ class _MyHomePageState extends State<MyHomePage> {
theme: brightness == Brightness.light
? darkTheme
: lightTheme,
offset: details.localPosition,
isReversed:
brightness == Brightness.dark ? true : false,
);
Expand Down Expand Up @@ -247,3 +251,34 @@ class _MyHomePageState extends State<MyHomePage> {
);
}
}

class TapDownButton extends StatelessWidget {
const TapDownButton({
Key? key,
required this.onTap,
required this.child,
}) : super(key: key);

final void Function(TapDownDetails details) onTap;
final Widget child;

@override
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: onTap,
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 16.0,
horizontal: 24.0,
),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(
Radius.circular(24.0),
),
border: Border.all(width: 1.0),
),
child: child,
),
);
}
}
22 changes: 15 additions & 7 deletions lib/src/theme_provider.dart
View file
Expand Up @@ -100,6 +100,8 @@ class ThemeModel extends ChangeNotifier {
required GlobalKey key,
ThemeSwitcherClipper? clipper,
required bool isReversed,
Offset? offset,
VoidCallback? onAnimationFinish,
}) async {
if (controller.isAnimating) {
return;
Expand All @@ -112,13 +114,17 @@ class ThemeModel extends ChangeNotifier {

oldTheme = _theme;
_theme = theme;
switcherOffset = _getSwitcherCoordinates(key);
switcherOffset = _getSwitcherCoordinates(key, offset);
await _saveScreenshot();

if (isReversed) {
await controller.reverse(from: 1.0);
await controller
.reverse(from: 1.0)
.then((value) => onAnimationFinish?.call());
} else {
await controller.forward(from: 0.0);
await controller
.forward(from: 0.0)
.then((value) => onAnimationFinish?.call());
}
}

Expand All @@ -136,12 +142,14 @@ class ThemeModel extends ChangeNotifier {
}

Offset _getSwitcherCoordinates(
GlobalKey<State<StatefulWidget>> switcherGlobalKey) {
GlobalKey<State<StatefulWidget>> switcherGlobalKey,
[Offset? tapOffset]) {
final renderObject =
switcherGlobalKey.currentContext!.findRenderObject()! as RenderBox;
final size = renderObject.size;
return renderObject
.localToGlobal(Offset.zero)
.translate(size.width / 2, size.height / 2);
return renderObject.localToGlobal(Offset.zero).translate(
tapOffset?.dx ?? (size.width / 2),
tapOffset?.dy ?? (size.height / 2),
);
}
}
21 changes: 14 additions & 7 deletions lib/src/theme_switcher.dart
View file
@@ -1,7 +1,8 @@
import 'package:flutter/material.dart';

import 'clippers/theme_switcher_circle_clipper.dart';
import 'clippers/theme_switcher_clipper.dart';
import 'theme_provider.dart';
import 'package:flutter/material.dart';

typedef ChangeTheme = void Function(ThemeData theme);
typedef BuilderWithSwitcher = Widget Function(
Expand Down Expand Up @@ -66,13 +67,19 @@ class ThemeSwitcherState extends State<ThemeSwitcher> {
);
}

void changeTheme({required ThemeData theme, bool isReversed = false}) {
void changeTheme({
required ThemeData theme,
bool isReversed = false,
Offset? offset,
VoidCallback? onAnimationFinish,
}) {
ThemeModelInheritedNotifier.of(context).changeTheme(
theme: theme,
key: _globalKey,
clipper: widget.clipper,
isReversed: isReversed,
);
theme: theme,
key: _globalKey,
clipper: widget.clipper,
isReversed: isReversed,
offset: offset,
onAnimationFinish: onAnimationFinish);
}
}

Expand Down

0 comments on commit e0ac345

Please sign in to comment.