شرح استخدام حزمة Device Preview في Flutter

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

تثبيت حزمة device_preview

لتثبيت حزمة device_preview، يجب عليك تعديل ملف pubspec.yaml الخاص بمشروعك. أضف السطر التالي ضمن قسم dependencies:

dependencies:
  flutter:
    sdk: flutter
  device_preview: ^1.2.0

بعد ذلك، قم بتشغيل الأمر التالي في الـ Terminal لتثبيت الحزمة:

flutter pub get

“اقرأ أيضاً: شرح استخدام ويدجت TooltipTheme في فلاتر“

إعداد حزمة device_preview

استيراد الحزمة

بعد تثبيت حزمة device_preview، يمكنك استيرادها في ملف Dart الخاص بك:

import 'package:device_preview/device_preview.dart';
import 'package:flutter/material.dart';

تفعيل المعاينة

لتفعيل حزمة device_preview، قم بتغليف تطبيقك بـ DevicePreview عند نقطة الدخول الرئيسية:

void main() {
  runApp(
    DevicePreview(
      enabled: !kReleaseMode,
      builder: (context) => MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      useInheritedMediaQuery: true,
      locale: DevicePreview.locale(context),
      builder: DevicePreview.appBuilder,
      home: HomeScreen(),
    );
  }
}

شرح الكود

• enabled: يُستخدم لتفعيل أو تعطيل device_preview. يمكن استخدام !kReleaseMode لتفعيل الحزمة فقط في وضع التطوير.
• builder: يبني التطبيق باستخدام DevicePreview.
• useInheritedMediaQuery: يضمن أن إعدادات الجهاز المحاكي يتم توريثها عبر التطبيق.
• locale: يحدد لغة التطبيق بناءً على الجهاز المحاكي.
• appBuilder: يبني التطبيق باستخدام إعدادات device_preview.

ناتج الكود

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

“اقرأ أيضاً: شرح استخدام ويدجت Offstage في فلاتر“

خصائص حزمة device_preview

تغيير الجهاز المحاكي

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

تغيير حجم الشاشة والدقة

يمكنك أيضًا تغيير حجم الشاشة والدقة لمحاكاة مختلف الأجهزة والأنماط. يتم ذلك من خلال الواجهة الرسومية.

دعم الوضع الليلي

يدعم device_preview تغيير الوضع بين الوضع الليلي والوضع النهاري لمحاكاة كيفية ظهور تطبيقك في كلا الوضعين.

“اقرأ أيضاً: 10 تمارين محلولة على لغة دارت Dart OOP الجزء الرابع 2024“

مثال كامل على حزمة device_preview

فيما يلي مثال كامل على استخدام حزمة device_preview مع جميع الخصائص المذكورة:

import 'package:device_preview/device_preview.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    DevicePreview(
      enabled: !kReleaseMode,
      builder: (context) => const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      useInheritedMediaQuery: true,
      locale: DevicePreview.locale(context),
      builder: DevicePreview.appBuilder,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Device Preview Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Hello, Device Preview!',
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // Example button action
              },
              child: const Text('Press Me'),
            ),
          ],
        ),
      ),
    );
  }
}

شرح الكود

• HomeScreen: الشاشة الرئيسية للتطبيق تحتوي على نص وزر.
• useInheritedMediaQuery: يضمن توريث إعدادات الجهاز المحاكي.
• locale: يحدد لغة التطبيق بناءً على الجهاز المحاكي.
• appBuilder: يبني التطبيق باستخدام إعدادات device_preview.

ناتج الكود

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

“اقرأ أيضاً: شرح Arrow Function في لغة دارت (Dart)“

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