From 7d9312dbb70d4b735a34d7ee96480bff7363c3cf Mon Sep 17 00:00:00 2001 From: Paul Kepinski Date: Fri, 2 Sep 2022 22:37:45 +0200 Subject: [PATCH 1/2] Move animated icons to yaru_icons.dart --- example/lib/example_page_items.dart | 23 -- lib/src/animations/yaru_animated_ok_icon.dart | 200 ------------------ lib/yaru_widgets.dart | 3 - 3 files changed, 226 deletions(-) delete mode 100644 lib/src/animations/yaru_animated_ok_icon.dart diff --git a/example/lib/example_page_items.dart b/example/lib/example_page_items.dart index c4c61808b..5ecb17bf1 100644 --- a/example/lib/example_page_items.dart +++ b/example/lib/example_page_items.dart @@ -36,29 +36,6 @@ final examplePageItems = [ iconData: YaruIcons.settings_filled, builder: (_) => ExtraOptionRowPage(), ), - YaruPageItem( - titleBuilder: (context) => YaruPageItemTitle.text('YaruAnimatedIcons'), - iconData: YaruIcons.ok, - builder: (_) => YaruPage( - children: [ - Padding( - padding: const EdgeInsets.only(top: 25), - child: YaruAnimatedOkIcon( - size: 96, - color: YaruColors.success, - ), - ), - Padding( - padding: const EdgeInsets.only(top: 25), - child: YaruAnimatedOkIcon( - size: 96, - filled: true, - color: YaruColors.success, - ), - ), - ], - ), - ), YaruPageItem( titleBuilder: (context) => YaruPageItemTitle.text('YaruProgressIndicator'), iconData: YaruIcons.download, diff --git a/lib/src/animations/yaru_animated_ok_icon.dart b/lib/src/animations/yaru_animated_ok_icon.dart deleted file mode 100644 index 7f4b5e821..000000000 --- a/lib/src/animations/yaru_animated_ok_icon.dart +++ /dev/null @@ -1,200 +0,0 @@ -import 'package:flutter/material.dart'; - -const _kTargetCanvasSize = 24.0; -const _kTargetIconSize = 20.0; -const _kAnimationCurve = Curves.easeInCubic; -const _kAnimationDuration = 400; - -/// An animated Yaru ok icon, similar to the original one -class YaruAnimatedOkIcon extends StatefulWidget { - /// Create an animated Yaru ok icon, similar to the original one - const YaruAnimatedOkIcon({ - this.size = 24.0, - this.filled = false, - this.color, - this.onCompleted, - super.key, - }); - - /// Determines the icon canvas size - /// To fit the original Yaru icon, the icon will be slightly smaller (20.0 on a 24.0 canvas) - /// Defaults to 24.0 as the original Yaru icon - final double size; - - /// Determines if the icon uses a solid background - /// Defaults to false as the original Yaru icon - final bool filled; - - /// Color used to draw the icon - /// If null, defaults to colorScheme.onSurface - final Color? color; - - /// Callback called once animation completed - final Function? onCompleted; - - @override - _YaruAnimatedOkIconState createState() => _YaruAnimatedOkIconState(); -} - -class _YaruAnimatedOkIconState extends State - with TickerProviderStateMixin { - late Animation _animation; - late AnimationController _controller; - - @override - void initState() { - super.initState(); - - _controller = AnimationController( - duration: const Duration(milliseconds: _kAnimationDuration), - vsync: this, - ); - _animation = Tween(begin: 0.0, end: 1.0) - .chain(CurveTween(curve: _kAnimationCurve)) - .animate(_controller); - - _controller.addStatusListener((status) { - if (status == AnimationStatus.completed && widget.onCompleted != null) { - widget.onCompleted!(); - } - }); - - _controller.forward(); - } - - @override - void dispose() { - _controller.dispose(); - super.dispose(); - } - - @override - Widget build(BuildContext context) { - return ClipRRect( - child: SizedBox.square( - dimension: widget.size, - child: AnimatedBuilder( - animation: _animation, - builder: ((context, child) { - return CustomPaint( - painter: _YaruAnimatedOkIconPainter( - widget.size, - widget.filled, - widget.color ?? Theme.of(context).colorScheme.onSurface, - _animation.value, - ), - ); - }), - ), - ), - ); - } -} - -class _YaruAnimatedOkIconPainter extends CustomPainter { - _YaruAnimatedOkIconPainter( - this.size, - this.filled, - this.color, - this.animationPosition, - ) : assert(animationPosition >= 0.0 && animationPosition <= 1.0); - - final double size; - final bool filled; - final Color color; - final double animationPosition; - - @override - void paint(Canvas canvas, Size size) { - if (filled && animationPosition >= 0.5) { - canvas.drawPath( - Path.combine( - PathOperation.difference, - _createCirclePath(), - _createCheckmarkPath(), - ), - _createFillPaint(), - ); - } else { - canvas.drawPath(_createCheckmarkPath(), _createFillPaint()); - canvas.drawPath(_createCirclePath(), _createStrokePaint()); - } - } - - Path _createCheckmarkPath() { - final Path checkmark = Path(); - final Offset start1 = Offset(size * 0.354, size * 0.477); - final Offset start2 = Offset(size * 0.310, size * 0.521); - final Offset mid1 = Offset(size * 0.521, size * 0.643); - final Offset mid2 = Offset(size * 0.521, size * 0.732); - final Offset end1 = Offset(size * 0.865, size * 0.299); - final Offset end2 = Offset(size * 0.892, size * 0.360); - - if (animationPosition < 0.5) { - final double pathT = animationPosition * 2.0; - final Offset drawMid1 = Offset.lerp(start1, mid1, pathT)!; - final Offset drawMid2 = Offset.lerp(start2, mid2, pathT)!; - - checkmark.moveTo(start1.dx, start1.dy); - checkmark.lineTo(drawMid1.dx, drawMid1.dy); - checkmark.lineTo(drawMid2.dx, drawMid2.dy); - checkmark.lineTo(start2.dx, start2.dy); - checkmark.close(); - } else { - final double pathT = (animationPosition - 0.5) * 2.0; - final Offset drawEnd1 = Offset.lerp(mid1, end1, pathT)!; - final Offset drawEnd2 = Offset.lerp(mid2, end2, pathT)!; - - checkmark.moveTo(start1.dx, start1.dy); - checkmark.lineTo(mid1.dx, mid1.dy); - checkmark.lineTo(drawEnd1.dx, drawEnd1.dy); - checkmark.lineTo(drawEnd2.dx, drawEnd2.dy); - checkmark.lineTo(mid2.dx, mid2.dy); - checkmark.lineTo(start2.dx, start2.dy); - checkmark.close(); - } - - return checkmark; - } - - Path _createCirclePath() { - final finalCircleRadius = - (size / 2 - 1) * _kTargetIconSize / _kTargetCanvasSize; - // From 1.0 to 0.75 to 1.0 - final circleRadius = animationPosition < 0.5 - ? finalCircleRadius - finalCircleRadius * 0.25 * animationPosition - : finalCircleRadius * 0.75 + - finalCircleRadius * 0.25 * animationPosition; - - return Path() - ..addOval( - Rect.fromCircle( - center: Offset(size / 2, size / 2), - radius: circleRadius, - ), - ); - } - - Paint _createFillPaint() { - return Paint() - ..color = color - ..style = PaintingStyle.fill; - } - - Paint _createStrokePaint() { - return Paint() - ..color = color - ..style = PaintingStyle.stroke - ..strokeWidth = 1 / (_kTargetCanvasSize / size); - } - - @override - bool shouldRepaint( - _YaruAnimatedOkIconPainter oldDelegate, - ) { - return oldDelegate.animationPosition != animationPosition || - oldDelegate.size != size || - oldDelegate.filled != filled || - oldDelegate.color != color; - } -} diff --git a/lib/yaru_widgets.dart b/lib/yaru_widgets.dart index 317453ff6..9c9f340db 100644 --- a/lib/yaru_widgets.dart +++ b/lib/yaru_widgets.dart @@ -1,8 +1,5 @@ library yaru_widgets; -// Animations -export 'src/animations/yaru_animated_ok_icon.dart'; - // Controls export 'src/controls/yaru_color_disk.dart'; export 'src/controls/yaru_color_picker_button.dart'; From a876f313774f0059747ea01c01e8a08806984f8b Mon Sep 17 00:00:00 2001 From: Paul Kepinski Date: Sat, 3 Sep 2022 12:39:03 +0200 Subject: [PATCH 2/2] Remove yaru_colors --- example/lib/example_page_items.dart | 1 - example/pubspec.yaml | 1 - 2 files changed, 2 deletions(-) diff --git a/example/lib/example_page_items.dart b/example/lib/example_page_items.dart index 5ecb17bf1..b9cd64d99 100644 --- a/example/lib/example_page_items.dart +++ b/example/lib/example_page_items.dart @@ -1,5 +1,4 @@ import 'package:flutter/material.dart'; -import 'package:yaru_colors/yaru_colors.dart'; import 'package:yaru_icons/yaru_icons.dart'; import 'package:yaru_widgets/yaru_widgets.dart'; import 'package:yaru_widgets_example/pages/banner_page.dart'; diff --git a/example/pubspec.yaml b/example/pubspec.yaml index d0ffbdb7e..97c1df488 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -14,7 +14,6 @@ dependencies: provider: ^6.0.2 yaru: ^0.3.2 yaru_icons: ^0.2.1 - yaru_colors: ^0.1.0 yaru_widgets: path: ../