عمل تاثير في اثناء فتح العناصر وعرضها في flutter
في هذا المقال سوف نشرح لكم تاثير جميل جدا في اثناء فتح العناصر الخاصه بك في تطبيقات flutter حيث يتم فتح العنصر واذا كان بداخله صورة فسوف يتم تكبير حجمها كما هو موضح بالصورة الخاصه بالمقال هذا التاثير جميل جدا ويمكنك استخدامه في تطبيقك حتى تتمكن من تنفيذ شكل مختلف في عرض بعض العناصر داخل تطبيقك كما هو موضح ولن نحتاج الى اي مكتبات خارجية لتنفيذ هذا التاثير فقط كل شيئ موجود في Flutter وهيا عباره عن مجموعه من ال widgets التي تساعدنا في عمل هذه العمليه .
How to display items & add animation
في الجزء الاول من الكود يكون عباره عن constructor لاضافة البيانات وبعدها قمنا بعمل عرض للبيانات في شكل انميشن والاكواد موجوده بالاسفل يمنكك نسخ الكود والتعديل عليه بالشكل الذي ترغب به في تطبيقك بدون ادنى مشاكل تماما فالامر في غاية السهوله كل شيئ موجود بداخل PostCard وتحديدا جزء animationController وهو المسؤول عن عمل الانميشن للعناصر في تطبيقك بشكل بسيط وجميل .
ui.dart
class PostModel {
String author;
String profilePicture;
String postPicture;
String timeAgo;
PostModel({
required this.author,
required this.profilePicture,
required this.postPicture,
required this.timeAgo,
});
}
const black = Color(0xff1C1C1C);
const white = Color(0xffffffff);
const darkGrey = Color(0xff2B2B2B);
const lightGrey = Color.fromARGB(255, 85, 84, 84);
const bluishPink = Color(0xffA467D5);
const pink = Color(0xffE85587);
// gradient
const greyGradient = LinearGradient(
colors: [darkGrey ,pink],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.0, 0.6],
);
class MyMobileBody extends StatefulWidget {
const MyMobileBody({Key? key}) : super(key: key);
@override
State<MyMobileBody> createState() => _MyMobileBodyState();
}
class _MyMobileBodyState extends State<MyMobileBody> {
final posts = [
PostModel(
author: 'Mark Kyle',
profilePicture: 'assets/img/background/image-5.png',
postPicture: 'assets/img/background/image-5.png',
timeAgo: '23 mins ago',
),
PostModel(
author: 'Amanda',
profilePicture: 'assets/img/background/image-4.jpg',
postPicture: 'assets/img/background/image-4.jpg',
timeAgo: '1 hour ago',
),
PostModel(
author: 'Obi Wan',
profilePicture: 'assets/img/background/image-3.jpg',
postPicture: 'assets/img/background/image-3.jpg',
timeAgo: '4 hours ago',
),
PostModel(
author: 'Julia',
profilePicture: 'assets/img/background/image-2.png',
postPicture: 'assets/img/background/image-2.png',
timeAgo: '14 hours ago',
),
PostModel(
author: 'Ibrahim',
profilePicture: 'assets/img/background/image-1.png',
postPicture: 'assets/img/background/image-1.png',
timeAgo: '2 hours ago',
),
];
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: black,
appBar: AppBar(
elevation: 0,
backgroundColor: black,
leading: Icon(
Icons.menu,
color: Colors.black,
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search, color: Colors.black),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.person, color: Colors.black),
onPressed: () {},
)
],
),
body: ListView.builder(
itemCount: posts.length,
itemBuilder: (_, index) {
return PostCard(post: posts[index]);
},
),
);
}
}
class PostCard extends StatefulWidget {
final PostModel post;
const PostCard({
super.key,
required this.post,
});
@override
State<PostCard> createState() => _PostCardState();
}
class _PostCardState extends State<PostCard> with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 500));
_animation = CurvedAnimation(parent: _controller, curve: Curves.decelerate)
.drive(Tween<double>(begin: 75, end: 300));
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, _) {
return GestureDetector(
onTap: () {
_controller.isCompleted ? _controller.reverse() : _controller.forward();
},
child: Container(
margin: const EdgeInsets.symmetric(vertical: 3.5, horizontal: 10),
height: _animation.value,
decoration: BoxDecoration(
gradient: greyGradient,
borderRadius: BorderRadius.circular(30),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(
leading: GradientBorder(
child: Image.asset(
widget.post.profilePicture,
fit: BoxFit.cover,
),
),
title: Text(
widget.post.author,
style: const TextStyle(
fontSize: 20,
),
),
subtitle: Text(
widget.post.timeAgo,
style: const TextStyle(fontSize: 10),
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (_animation.value <= 150) ...[
const CardIcon(Icons.mode_comment_rounded),
const CardIcon(Icons.favorite_rounded),
],
const CardIcon(Icons.bookmark_rounded),
],
),
),
if (_animation.value >= 150)
Expanded(
child: Stack(
alignment: Alignment.bottomRight,
children: [
ClipPath(
clipper: ContainerClipper(),
child: Container(
width: double.infinity,
height: 250,
decoration: BoxDecoration(
gradient: greyGradient,
image: DecorationImage(
image: AssetImage(widget.post.postPicture), fit: BoxFit.cover),
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 10, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: const [
CardIcon(Icons.mode_comment_rounded),
CardIcon(Icons.favorite_rounded),
],
),
),
],
),
),
],
),
),
);
},
);
}
}
class GradientBorder extends StatelessWidget {
final ImageProvider? image;
final Widget? child;
const GradientBorder({super.key, this.child, this.image});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(2.0),
width: 50,
height: 50,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [bluishPink, pink, bluishPink],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(20),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: child,
),
);
}
}
class CardIcon extends StatelessWidget {
final IconData icon;
const CardIcon(this.icon, {super.key});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(5.0),
child: Icon(icon, size: 20 , color: Colors.white,),
);
}
}
class ContainerClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path0 = Path();
path0.moveTo(0, size.height * 0.0986800);
path0.quadraticBezierTo(
size.width * -0.0022000, size.height * 0.0006800, size.width * 0.0620750, 0);
path0.cubicTo(size.width * 0.2809844, 0, size.width * 0.7188031, 0, size.width * 0.9377125, 0);
path0.quadraticBezierTo(
size.width * 1.0007875, size.height * -0.0009200, size.width, size.height * 0.1003000);
path0.quadraticBezierTo(
size.width, size.height * 0.4780750, size.width, size.height * 0.6040000);
path0.quadraticBezierTo(size.width * 1.0025000, size.height * 0.6975000, size.width * 0.9350000,
size.height * 0.6980000);
path0.quadraticBezierTo(size.width * 0.7962500, size.height * 0.6965000, size.width * 0.7500000,
size.height * 0.6960000);
path0.quadraticBezierTo(size.width * 0.6903125, size.height * 0.6960000, size.width * 0.6862500,
size.height * 0.8000000);
path0.quadraticBezierTo(size.width * 0.6871875, size.height * 0.8735000, size.width * 0.6875000,
size.height * 0.8980000);
path0.quadraticBezierTo(
size.width * 0.6871875, size.height * 0.9935000, size.width * 0.6262500, size.height);
path0.quadraticBezierTo(
size.width * 0.2015625, size.height, size.width * 0.0600000, size.height);
path0.quadraticBezierTo(0, size.height * 0.9990000, 0, size.height * 0.9000000);
path0.lineTo(0, size.height * 0.0986800);
path0.close();
// add this line at the end
return path0;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => true;
}
ويمكنك استخدام مكتبة flutter_easy_faq لعمل انميشن اثناء الضغط على اي عنصر خلال عملية الفتح
flutter_easy_faq: ^1.0.0
وذلك يكون من خلال الامر التالي
EasyFaq(
question: "question?",
answer: "answer.",
),
android sdk manager تحميل flutter developers applications create app android android studio mac
