Add favorite button with Animation to flutter app
يعتبر زر المفضلة بواسطة Favorite button من الميزات السائدة في العديد من التطبيقات. حيث إنه يمكّن المستخدمين من تحديد أو حفظ الصور أو العناوين أو الروابط أو أشياء أخرى لسهولة الرجوع إليها في المستقبل. في هذه المقالة ، سنرى كيفية تنفيذ Favorite button في تطبيق Flutter. تسرد هذه المقالة عدة خطوات للقيام بذلك.
شرح favorite button على اليوتيوب:
1- اولا علينا جعل الشاشة قابلة للتمرير:
الآن سنجعل الشاشة قابلة للتمرير باستخدام SingleChildScrollView وإنشاء بطاقة أخرى أسفل البطاقة الأولى مفصولة بصندوق SizedBox.
class Favorite extends StatefulWidget {const Favorite({Key? key}) : super(key: key);@override_FavoriteState createState() => _FavoriteState();}class _FavoriteState extends State<Favorite> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Favorite Button'),backgroundColor: Colors.red[400],centerTitle: true,),body: SingleChildScrollView(padding: EdgeInsets.only(left: 0, right: 0, top: 20, bottom: 20),child: Center(child: Column(children: [// Card 1SizedBox(height: 20,)// Card 2]),),),);}}
2- عمل بطاقة على الشاشة الرئيسية:
ثاني شيء علينا القيام به لعمل بطاقتين جميلة ، بتكرار الكود وتغير لون البطاقة.
Card(
elevation: 50,
shadowColor: Colors.black,
color: Colors.pink[100],
child: SizedBox(
width: 310,
height: 400,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
Container(
width: 150.00,
height: 150.00,
decoration: new BoxDecoration(
image: new DecorationImage(
image: ExactAssetImage('assets/appsmaker.png'),
fit: BoxFit.contain,
),
shape: BoxShape.rectangle,
)),
SizedBox(
height: 10,
),
Text(
'Apps Maker',
style: TextStyle(
fontSize: 30,
color: Colors.green[900],
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 10,
),
Text(
'شروحات فلاتر لاتنسى الاعجاب بالفيديو \n والاشتراك بالقناة',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.green[900],
), //Textstyle
), //Text
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 100,
child: RaisedButton(
onPressed: () => null,
color: Colors.red,
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Row(
children: [
Icon(
Icons.touch_app,
color: Colors.white,
),
Text(
'Visit',
style: TextStyle(color: Colors.white),
),
],
), //Row
), //Padding
), //RaisedButton
),
SizedBox(
width: 10,
),
],
), //SizedBox
],
), //Column
), //Padding
), //SizedBox
),
3- انشاء ملف aseets:
نقوم بنسخ الصورة داخله ،
ثم الذهاب لملف pubspec.yaml لسماح باضافة الصورة.
4- إضافة خاصية Favorite button:
يحتوي التطبيق على بطاقتين داخل SingleChildScrollView. الآن لتطبيق زر المفضلة ، نحتاج إلى إضافة dependencies الخاصة ب Favorite button في ملف pubspec.yaml.
dependencies:
favorite_button: ^0.0.4
ثم استيراد امر معرفة الحزمة الى ملف main.dart.
import 'package:favorite_button/favorite_button.dart';
سيؤدي هذا إلى إضافة حزمة Favorite button إلى تطبيقنا. هذه الحزمة عبارة عن مكتبة تسمح للمطورين بتنفيذ Favorite button على شكل قلب مع رسوم متحركة في تطبيقنا.
5- اضافة الكود الخاص ب Favorite button:
FavoriteButton(
isFavorite: false,
valueChanged: (_isFavorite) {
print('Is Favorite : $_isFavorite');
},
),
هذا هو الكود النهائي للتطبيق.
import 'package:favorite_button/favorite_button.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: Favorite(),
);
}
}
class Favorite extends StatefulWidget {
const Favorite({Key? key}) : super(key: key);
@override
_FavoriteState createState() => _FavoriteState();
}
class _FavoriteState extends State<Favorite> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Favorite Button'),
backgroundColor: Colors.red[400],
centerTitle: true,
),
body: SingleChildScrollView(
padding: EdgeInsets.only(left: 0, right: 0, top: 20, bottom: 20),
child: Center(
child: Column(children: [
Card(
elevation: 50,
shadowColor: Colors.black,
color: Colors.red[100],
child: SizedBox(
width: 310,
height: 400,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
Container(
width: 150.00,
height: 150.00,
decoration: new BoxDecoration(
image: new DecorationImage(
image: ExactAssetImage('assets/appsmaker.png'),
fit: BoxFit.contain,
),
shape: BoxShape.rectangle,
)),
SizedBox(
height: 10,
),
Text(
'Apps Maker',
style: TextStyle(
fontSize: 30,
color: Colors.green[900],
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 10,
),
Text(
'شروحات فلاتر لاتنسى الاعجاب بالفيديو \n والاشتراك بالقناة',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.green[900],
), //Textstyle
), //Text
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 100,
child: RaisedButton(
onPressed: () => null,
color: Colors.red,
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Row(
children: [
Icon(
Icons.touch_app,
color: Colors.white,
),
Text(
'Visit',
style: TextStyle(color: Colors.white),
),
],
), //Row
), //Padding
), //RaisedButton
),
SizedBox(
width: 10,
),
FavoriteButton(
isFavorite: false,
valueChanged: (_isFavorite) {
print('Is Favorite : $_isFavorite');
},
),
],
), //SizedBox
],
), //Column
), //Padding
), //SizedBox
),
SizedBox(
height: 20,
),
Card(
elevation: 50,
shadowColor: Colors.black,
color: Colors.pink[100],
child: SizedBox(
width: 310,
height: 400,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
Container(
width: 150.00,
height: 150.00,
decoration: new BoxDecoration(
image: new DecorationImage(
image: ExactAssetImage('assets/appsmaker.png'),
fit: BoxFit.contain,
),
shape: BoxShape.rectangle,
)),
SizedBox(
height: 10,
),
Text(
'Apps Maker',
style: TextStyle(
fontSize: 30,
color: Colors.green[900],
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 10,
),
Text(
'شروحات فلاتر لاتنسى الاعجاب بالفيديو \n والاشتراك بالقناة',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.green[900],
), //Textstyle
), //Text
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 100,
child: RaisedButton(
onPressed: () => null,
color: Colors.red,
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Row(
children: [
Icon(
Icons.touch_app,
color: Colors.white,
),
Text(
'Visit',
style: TextStyle(color: Colors.white),
),
],
), //Row
), //Padding
), //RaisedButton
),
SizedBox(
width: 10,
),
FavoriteButton(
isFavorite: false,
valueChanged: (_isFavorite) {
print('Is Favorite : $_isFavorite');
},
),
],
), //SizedBox
],
), //Column
), //Padding
), //SizedBox
),
// Card 2
]), //Card
),
), //Center
);
}
}
شكل مخرجات التطبيق:
تعليقات
إرسال تعليق