Add favorite button with Animation to flutter app

Add favorite button with Animation to flutter app


يعتبر  زر المفضلة بواسطة Favorite button من الميزات السائدة في العديد من التطبيقات.  حيث إنه يمكّن المستخدمين من تحديد أو حفظ الصور أو العناوين أو الروابط أو أشياء أخرى لسهولة الرجوع إليها في المستقبل. في هذه المقالة ، سنرى كيفية تنفيذ  Favorite button  في تطبيق Flutter. تسرد هذه المقالة عدة خطوات للقيام بذلك.

Add favorite button with Animation to flutter app


شرح 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> {
@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 1

SizedBox(
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:

 نقوم بنسخ الصورة داخله ،

add assets file to  flutter app


ثم الذهاب لملف  pubspec.yaml لسماح باضافة الصورة.

add image to pubspaceyaml flutter app


4- إضافة خاصية Favorite button:

 يحتوي التطبيق على بطاقتين داخل SingleChildScrollView. الآن لتطبيق زر المفضلة  ، نحتاج إلى إضافة dependencies  الخاصة ب Favorite button في ملف pubspec.yaml.

dependencies:
  favorite_button: ^0.0.4



dependencies  الخاصة ب Favorite button في ملف pubspec.yaml


ثم استيراد امر معرفة الحزمة الى ملف 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
);
}
}


شكل مخرجات التطبيق:


add favorite button to flatter app




تعليقات