diff --git a/lib/main.dart b/lib/main.dart index 98245b5..35f613c 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -20,6 +20,83 @@ class MyApp extends StatelessWidget { } } +class LikeButtonDecorator extends StatelessWidget { + const LikeButtonDecorator({super.key, required this.child, required this.height, required this.width}); + + final Widget child; + final double height, width; + + @override + Widget build(BuildContext context) { + return SizedBox( + height: height, + width: width, + child: Stack( + children: [ + Center(child: child), + Padding( + padding: const EdgeInsets.all(2.0), + child: Align( + alignment: Alignment.topRight, + child: Container( + padding: const EdgeInsets.all(3.0), + decoration: const BoxDecoration(shape: BoxShape.circle, color: Colors.blue), + child: const Icon(Icons.thumb_up, color: Colors.white, size: 16), + ), + ), + ), + ], + ), + ); + } +} + +class AnimatedPulsingBorderDecorator extends StatefulWidget { + const AnimatedPulsingBorderDecorator({super.key, required this.child}); + + final Widget child; + + @override + State createState() => AnimatedPulsingBorderDecoratorState(); +} + +class AnimatedPulsingBorderDecoratorState extends State + with SingleTickerProviderStateMixin { + late final AnimationController controller; + late final Animation paddingAnimation; + + @override + void initState() { + super.initState(); + controller = AnimationController( + duration: const Duration(milliseconds: 750), + vsync: this, + ); + paddingAnimation = Tween(begin: 0.0, end: 3.0).animate(controller); + controller.repeat(reverse: true); + } + + @override + void dispose() { + super.dispose(); + controller.dispose(); + } + + @override + Widget build(BuildContext context) { + return AnimatedBuilder( + builder: (context, _) { + return Container( + padding: EdgeInsets.all(paddingAnimation.value), + decoration: BoxDecoration(color: Colors.amber, borderRadius: BorderRadius.circular(15.0)), + child: widget.child, + ); + }, + animation: paddingAnimation, + ); + } +} + class MyHomePage extends StatefulWidget { const MyHomePage({super.key}); @@ -33,19 +110,29 @@ class _MyHomePageState extends State { return Scaffold( appBar: AppBar( backgroundColor: Theme.of(context).colorScheme.inversePrimary, - title: const Text('Abstract Factory'), + title: const Text('Decorator'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Text( - 'You have pushed the button this many times:', - ), - Text( - 'some text', - style: Theme.of(context).textTheme.headlineMedium, + 'Decorators!!', ), + LikeButtonDecorator( + height: 30, + width: 160, + child: ElevatedButton( + onPressed: () {}, + child: const SizedBox( + height: 30, + width: 160, + child: Center(child: Text('Like Me!')), + ), + )), + const SizedBox(height: 20), + AnimatedPulsingBorderDecorator( + child: ElevatedButton(onPressed: () {}, child: const Text('Pulsing goodness!!'))) ], ), ),