كود معرفة أبعاد الشاشة في فلاتر

نحتاج لمعرفة عرض الشاشة وطولها في وقت التشغيل، لكي نعطي العناصر جزء من الشاشة بشكل يجعل التطبيق جميل ومتجاوب وسهل الإستخدام.

استخدم هذا الكود بلغة دارت لمعرفة عرض الشاشة:

double width = MediaQuery.of(context).size.width;

واستخدم هذا الكود لمعرفة طول الشاشة حالياً:

double height = MediaQuery.of(context).size.height;

لابد أن يكون الـ widget الذي تستخدم فيه هذا الكود داخل ويدجت MaterialApp أو WidgetsApp لأن هذه الويدجتس توفر لك إمكانية معرفة العرض والطول من خلال الميديا كويري (MediaQuery) عندما تستخدم of(Content) كما ترى في الكود السابق.

مثال على معرفة أبعاد الشاشة داخل فلاتر

import 'package:flutter/material.dart';
void main(){
    runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return MaterialApp(
    title: "My Demo Media Query",
    home: Home(),
    );
}
}
class Home extends StatefulWidget {
@override
_HomeState createState() =>_HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
    title: Text("Media Query"),
),
body: Column(
children: <Widget>[
    Container(
    height: (MediaQuery.of(context).size.height),
    width: (MediaQuery.of(context).size.width),
    color: Colors.red,
    )
    ],
),
);
}
}

أتمنى أن تكون استفدت من هذا الشرح السريع لطريقة معرفة عرض وطول الشاشة في فريم ورك فلاتر بإستخدام لغة دارت لكتابة كود ميديا كويري.

لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن “موقع أبانوب حنا للبرمجيات” على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.