التعامل مع التصميم في حالة portrait و landscape باستخدام mediaQuery في Flutter
في هذا الدرس والتابع لدروس تعلم التعامل مع انواع الشاشات المختلفه وضبط ابعاد التصميم لكي تتناسق مع مختلف الشاشات ولعدم حدوث مشاكل عند تشغيل التطبيق مع الشاشات المختلفه , في درس اليوم سوف نشرح فكرة الmediaQuery وهي من اهم الافكار واكثرها استعمالا في ضبط ابعاد التصميم ونجد ان الاغلب يفضل استخدامها عن غيرها لسهولتها وسهولة التعامل معها وهذا يعد الدرس الرابع من هذة السلسلة .
بعد ظهور فلاتر في عام 2011. كانت لغه احدثت طفرة كبيره في مجال البرمجيات وتطوير التطبيقات، وهي لغة تعمل بمجموعه من الوظائف وتستخدم بكثرة في بيئه عمل فلاتر. ولكن اللغه التي تعمل هي لغه دارت وهي من اللغات الحديثه والتي يمكنك من خلالها كتابه كود واحد يعمل على مختلف انظمه التشغيل سواء الاندرويد او اي او اس او غيرها من الانظمه وحاليا فلاتر دائما في تطور من طرف العملاق جوجل .
اصبحت flutter تدعم العديد من المنصات وايضا اصبح لديها عدد كبير من المستخدمين واغلب المبرمجين حاليا يحاولون تعلم flutter والانتقال اليها وذلك من المميزات التي تقدمها للمطورين .
dart مثلها مثل اي لغه برمجه اخرى ولكن الاختلاف في بيئة العمل فلاتر فيمكنك بكود واحد تشغيل التطبيق الخاص بك على اكثر من منصه او بمعنى اصح يمكنك برمجه موقع وتطبيق وبرنامج في نفس الوقت بنفس الكود ، وهذا يعني انه يجب عليك البدء في تعلم هذه اللغه و لكن في البدايه والنهايه هذه اللغه تعد cross platform .
flutter هي مطلوبه بشكل كبير جدا جدا في العمل الحر او الفريلانس ولكن اذا كنت تبحث على شركات تعمل فـ الافضل ان تكون native ولكن لا تقلق بهذة الفترة ظهرت شركات كثيرة تطلب مطوري flutter ولكن لا اعتقد ان هذا الامر منتشر في الدول الغربيه بشكل كبير لانهم يهتمون بالـ performance بشكل كبير .
التعامل مع الmediaQuery في ضبط ابعاد التصميم
لكي تحصل على طول الشاشه بشكل كامل يمكنك استخدام MediaQuery.of(context).orientation واذا وبعدها نقوم بعمل شرط اذا كان الbody يساوي لقيمة الorientation يتم عمل قائمة تحتوي على عدد 30 من العناصر المصفوفه اسفل بعضها واذا لم لكن يساوي هذا العدد نقوم بعمل GridView وبعدها نقسم العنصر الى 3 لان في هذه الحالة تكون الشاشه في حالة العرض وليس الطول وهذه هي فكرة التعامل مع ابعاد الشاشه في حالة اذا كانت بالعرض او كانت بالطول .
check screen position.dart
class CodeLess extends StatelessWidget {
const CodeLess({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).orientation;
return Scaffold(
appBar: AppBar(),
body: size == Orientation.portrait ?
ListView.builder(
itemCount: 30,
itemBuilder: (context, index) {
return ListTile(
leading: Icon(Icons.favorite_rounded),
title: Text('Text $index'),
);
})
:
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 6),
itemCount: 30,
itemBuilder: (context, index) {
return ListTile(
leading: Icon(Icons.favorite_rounded),
title: Text('Text $index'),
);
}));
}
}
لمزيد من المقالات والدروس في فلاتر
