Flutter Nest

🚀 ميزة تسجيل الدخول عبر وسائل التواصل باستخدام OAuth # في Flutter!

في تطبيقات كتير 💼 بنحتاج نوفر طريقة تسجيل دخول سهلة وسريعة وآمنة للمستخدمين، وهنا بييجي دور تسجيل الدخول عبر منصات السوشيال ميديا (Google, , (X), # وغيرها).

📲 بعض المنصات بتوفر باكدجات رسمية تقدر تستخدمها بسهولة مع Firebase # لعملية الـ Authentication، لكن لما تلاقي منصة مش موفرة باكدج مباشرة، هنا بييجي الحل الأمثل والاحترافي:

✨ باكدج flutter_web_auth2

✅ بتوفرلك طريقة مرنة وآمنة لعمل تسجيل دخول (Authentication) من خلال المتصفح باستخدام بروتوكول: 🔐 OAuth – Open Authorization

وده البروتوكول اللي بيخلّي المستخدم يقدر يسمح لتطبيقك بالوصول لبعض بياناته على منصة معينة من غير ما يشارك الباسورد بتاعه! 🔑

📌 مثال على الجملة دي:

> "OAuth allows users to grant limited access to their resources from one site to another without sharing credentials"

🔥 الباكدجات الأساسية في التطبيق بتكون:

oauth1: لعمل Authorization Code Flow

flutter_web_auth2: لتسجيل الدخول عبر OAuth باستخدام WebView

flutter_dotenv: لإدارة بياناتك الحساسة زي API keys بأمان 🛡️

⚙️ طبعًا لازم تضبط إعدادات الـ Android # و iOS #:

تضيف API Key #

تضيف API Secret

تضيف Callback URL

✅ و بكدا تكون فعّلت تسجيل دخول احترافي لتويتر (X) أو غيره، بطريقة آمنة وسلسة ✨

تحسين أداء قوائم فلاتر باستخدام ListView.builder
📱 نصيحة اليوم: استخدم ListView.builder للقوائم الطويلة بدلاً من ListView العادي لتحسين الأداء وتقليل استهلاك الذاكرة!

مع ListView.builder، يتم إنشاء فقط العناصر المرئية على الشاشة، مما يوفر الذاكرة ويحسن الأداء بشكل كبير خاصة مع القوائم الكبيرة!
#فلاتر

📱 نصيحة اليوم: استخدم StatefulWidget فقط عندما تحتاج لتغيير حالة الواجهة، واستخدم StatelessWidget في باقي الحالات للحصول على أداء أفضل!

dart// ✅ طريقة صحيحة: استخدام StatelessWidget لواجهة ثابتة

class ProfileHeader extends StatelessWidget {
final String name;
final String imageUrl;

const ProfileHeader({required this.name, required this.imageUrl});


Widget build(BuildContext context) {
return Row(
children: [
CircleAvatar(backgroundImage: NetworkImage(imageUrl)),
SizedBox(width: 10),
Text(name, style: Theme.of(context).textTheme.headline6),
],
);
}
}

// ✅ استخدام StatefulWidget فقط عند الحاجة لتغيير الحالة
class LikeButton extends StatefulWidget {

_LikeButtonState createState() => _LikeButtonState();
}

class _LikeButtonState extends State {
bool isLiked = false;


Widget build(BuildContext context) {
return IconButton(
icon: Icon(isLiked ? Icons.favorite : Icons.favorite_border),
color: isLiked ? Colors.red : Colors.grey,
onPressed: () {
setState(() {
isLiked = !isLiked;
});
},
);
}
}
#فلاتر