From 096b10f5c70406d1304993544db85fef24038227 Mon Sep 17 00:00:00 2001 From: ume-kun1015 Date: Wed, 15 Jan 2025 11:39:13 +0900 Subject: [PATCH 1/5] refactor: make lorem text ui component --- lib/panache.dart | 3 ++- lib/src/ui/components/lorem_text.dart | 12 ++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 lib/src/ui/components/lorem_text.dart diff --git a/lib/panache.dart b/lib/panache.dart index 360089d..69cf66a 100644 --- a/lib/panache.dart +++ b/lib/panache.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:panache/src/model/lorem.dart'; +import 'package:panache/src/ui/components/lorem_text.dart'; import 'package:panache/src/ui/components/sidebar.dart'; class Panache extends HookWidget { @@ -36,7 +37,7 @@ class Panache extends HookWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start, - children: [Text(generated.value)], + children: [LoremText(text: generated.value)], ), ), ), diff --git a/lib/src/ui/components/lorem_text.dart b/lib/src/ui/components/lorem_text.dart new file mode 100644 index 0000000..8b468b2 --- /dev/null +++ b/lib/src/ui/components/lorem_text.dart @@ -0,0 +1,12 @@ +import 'package:flutter/material.dart'; + +class LoremText extends StatelessWidget { + final String text; + + const LoremText({super.key, required this.text}); + + @override + Widget build(BuildContext context) { + return Text(text); + } +} From ff5823e88eb20c4d6cf6c11cd1835914079c2d2d Mon Sep 17 00:00:00 2001 From: ume-kun1015 Date: Wed, 15 Jan 2025 11:51:13 +0900 Subject: [PATCH 2/5] feat: add fade in and slide transition --- lib/src/ui/components/lorem_text.dart | 42 +++++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/lib/src/ui/components/lorem_text.dart b/lib/src/ui/components/lorem_text.dart index 8b468b2..3047450 100644 --- a/lib/src/ui/components/lorem_text.dart +++ b/lib/src/ui/components/lorem_text.dart @@ -1,12 +1,50 @@ import 'package:flutter/material.dart'; +import 'package:flutter_hooks/flutter_hooks.dart'; -class LoremText extends StatelessWidget { +class LoremText extends HookWidget { final String text; const LoremText({super.key, required this.text}); @override Widget build(BuildContext context) { - return Text(text); + final animationController = useAnimationController( + duration: const Duration(milliseconds: 500), + ); + final opacityAnimation = useState?>(null); + final offsetAnimation = useState?>(null); + + useEffect(() { + opacityAnimation.value = Tween(begin: 0.0, end: 1.0).animate( + CurvedAnimation( + parent: animationController, + curve: Curves.easeIn, + ), + ); + + offsetAnimation.value = + Tween(begin: const Offset(0, 1), end: Offset.zero).animate( + CurvedAnimation( + parent: animationController, + curve: Curves.easeInOut, + ), + ); + + animationController.forward(); + + return; + }, []); + + if (offsetAnimation.value == null || opacityAnimation.value == null) { + return SizedBox.shrink(); + } + + return SlideTransition( + position: offsetAnimation.value!, + child: FadeTransition( + opacity: opacityAnimation.value!, + child: Text(text), + ), + ); } } From 593b13a96f21d471bcbf25c2eca465069808e118 Mon Sep 17 00:00:00 2001 From: ume-kun1015 Date: Wed, 15 Jan 2025 11:53:05 +0900 Subject: [PATCH 3/5] feat: animate when text gets chanegd --- lib/src/ui/components/lorem_text.dart | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/lib/src/ui/components/lorem_text.dart b/lib/src/ui/components/lorem_text.dart index 3047450..9cef10e 100644 --- a/lib/src/ui/components/lorem_text.dart +++ b/lib/src/ui/components/lorem_text.dart @@ -35,6 +35,12 @@ class LoremText extends HookWidget { return; }, []); + useEffect(() { + animationController.forward(from: 0.0); + + return; + }, [text]); + if (offsetAnimation.value == null || opacityAnimation.value == null) { return SizedBox.shrink(); } From 566d19c10aa644f23329ae831658b3cb74995a59 Mon Sep 17 00:00:00 2001 From: ume-kun1015 Date: Wed, 15 Jan 2025 11:55:43 +0900 Subject: [PATCH 4/5] fix: fix offset --- lib/src/ui/components/lorem_text.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/ui/components/lorem_text.dart b/lib/src/ui/components/lorem_text.dart index 9cef10e..a33ae19 100644 --- a/lib/src/ui/components/lorem_text.dart +++ b/lib/src/ui/components/lorem_text.dart @@ -23,7 +23,7 @@ class LoremText extends HookWidget { ); offsetAnimation.value = - Tween(begin: const Offset(0, 1), end: Offset.zero).animate( + Tween(begin: const Offset(0, 0.1), end: Offset.zero).animate( CurvedAnimation( parent: animationController, curve: Curves.easeInOut, From 6deff4842b11387f297a0322218ad089ca1f0c4a Mon Sep 17 00:00:00 2001 From: ume-kun1015 Date: Wed, 15 Jan 2025 12:03:26 +0900 Subject: [PATCH 5/5] refactor: rename --- lib/panache.dart | 4 ++-- lib/src/ui/components/{lorem_text.dart => animated_text.dart} | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) rename lib/src/ui/components/{lorem_text.dart => animated_text.dart} (93%) diff --git a/lib/panache.dart b/lib/panache.dart index 69cf66a..e029c14 100644 --- a/lib/panache.dart +++ b/lib/panache.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:panache/src/model/lorem.dart'; -import 'package:panache/src/ui/components/lorem_text.dart'; +import 'package:panache/src/ui/components/animated_text.dart'; import 'package:panache/src/ui/components/sidebar.dart'; class Panache extends HookWidget { @@ -37,7 +37,7 @@ class Panache extends HookWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start, - children: [LoremText(text: generated.value)], + children: [AnimatedText(text: generated.value)], ), ), ), diff --git a/lib/src/ui/components/lorem_text.dart b/lib/src/ui/components/animated_text.dart similarity index 93% rename from lib/src/ui/components/lorem_text.dart rename to lib/src/ui/components/animated_text.dart index a33ae19..f2d4145 100644 --- a/lib/src/ui/components/lorem_text.dart +++ b/lib/src/ui/components/animated_text.dart @@ -1,10 +1,10 @@ import 'package:flutter/material.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; -class LoremText extends HookWidget { +class AnimatedText extends HookWidget { final String text; - const LoremText({super.key, required this.text}); + const AnimatedText({super.key, required this.text}); @override Widget build(BuildContext context) {