142 lines
3.7 KiB
Dart
142 lines
3.7 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
void main() {
|
|
runApp(const MyApp());
|
|
}
|
|
|
|
class MyApp extends StatelessWidget {
|
|
const MyApp({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return MaterialApp(
|
|
title: 'Flutter Demo',
|
|
theme: ThemeData(
|
|
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
|
|
useMaterial3: true,
|
|
),
|
|
home: const MyHomePage(),
|
|
);
|
|
}
|
|
}
|
|
|
|
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<StatefulWidget> createState() => AnimatedPulsingBorderDecoratorState();
|
|
}
|
|
|
|
class AnimatedPulsingBorderDecoratorState extends State<AnimatedPulsingBorderDecorator>
|
|
with SingleTickerProviderStateMixin {
|
|
late final AnimationController controller;
|
|
late final Animation<double> paddingAnimation;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
controller = AnimationController(
|
|
duration: const Duration(milliseconds: 750),
|
|
vsync: this,
|
|
);
|
|
paddingAnimation = Tween<double>(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});
|
|
|
|
@override
|
|
State<MyHomePage> createState() => _MyHomePageState();
|
|
}
|
|
|
|
class _MyHomePageState extends State<MyHomePage> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
|
|
title: const Text('Decorator'),
|
|
),
|
|
body: Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: <Widget>[
|
|
const Text(
|
|
'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!!')))
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|