MDC-101 Flutter: أساسيات المكوّنات المادية

1. مقدمة

ما هو التصميم المتعدد الأبعاد ومكتبة Material Flutter؟

‫التصميم المتعدد الأبعاد هو نظام لإنشاء منتجات رقمية جريئة وجميلة. من خلال توحيد الأسلوب والعلامة التجارية والتفاعل والحركة ضمن مجموعة متسقة من المبادئ والمكوّنات، يمكن لفِرق المنتجات تحقيق أكبر إمكانات التصميم.

تتضمّن مكتبة Material Flutter عناصر واجهة مستخدم Flutter التي تنفّذ تصاميم مكوّنات التصميم المتعدد الأبعاد (MDC باختصار) لإنشاء تجربة مستخدم متّسقة على مستوى التطبيقات والمنصات. مع تطوّر نظام التصميم المتعدد الأبعاد، يتم تعديل هذه المكوّنات لضمان تنفيذها بشكلٍ متّسق ودقيق، مع الالتزام بمعايير تطوير الواجهة الأمامية في Google.

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

ما ستنشئه

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

في هذا الدرس التطبيقي حول الترميز، ستنشئ صفحة تسجيل دخول إلى تطبيق Shrine تتضمّن ما يلي:

• صورة شعار Shrine
• اسم التطبيق (Shrine)
• حقلان نصيان، أحدهما لإدخال اسم المستخدم والآخر لكلمة المرور
• زرّان

Android	iOS

هذا هو الدرس التطبيقي الأول من أربعة دروس تطبيقية حول الترميز ترشدك خلال عملية إنشاء تطبيق لمنتج يُعرف باسم Shrine. ننصحك بإكمال جميع الدروس التطبيقية حول الترميز بالترتيب لأنّها تتضمّن مهامًا متسلسلة.يمكنك العثور على الدروس التطبيقية ذات الصلة على الروابط التالية: MDC-102 Flutter: بنية وتصميم Material MDC-103 Flutter: تخصيص التصميم المتعدد الأبعاد باستخدام اللون والشكل والارتفاع والنوع ‫MDC-104 Flutter: مكوّنات Material Design المتقدّمة

مكوّنات Material Flutter والأنظمة الفرعية في هذا الدرس التطبيقي حول الترميز

• حقل نصي
• زرّ
• تموّج الحبر (شكل مرئي من أشكال الملاحظات حول أحداث اللمس)

في هذا الدرس التطبيقي حول الترميز، ستستخدم المكوّنات التلقائية التي يوفّرها التصميم المتعدد الأبعاد Flutter. يمكنك التعرّف على كيفية تخصيصها في MDC-103: تخصيص التصميم المتعدد الأبعاد باستخدام اللون والشكل والارتفاع والنوع.

ما هو تقييمك لمستوى خبرتك في تطوير تطبيقات Flutter؟

مبتدئ متوسط متقدّم

2. إعداد بيئة تطوير Flutter

تحتاج إلى برنامجَين لإكمال هذا الدرس التطبيقي، وهما حزمة تطوير البرامج (SDK) الخاصة بإطار عمل Flutter ومحرِّر.

يمكنك تشغيل الدرس العملي باستخدام أيّ من الأجهزة التالية:

• جهاز Android أو iOS فعلي متصل بالكمبيوتر وتم ضبطه على "وضع مطور البرامج"
• محاكي iOS (يتطلّب تثبيت أدوات Xcode)
• محاكي Android (يتطلّب الإعداد في "استوديو Android")
• متصفّح (يجب استخدام Chrome لتصحيح الأخطاء).
• كتطبيق سطح مكتب على Windows أو Linux أو macOS يجب أن يتم التطوير على النظام الأساسي الذي تخطّط للنشر عليه. لذا، إذا أردت تطوير تطبيق سطح مكتب لنظام التشغيل Windows، يجب أن يتم التطوير على Windows للوصول إلى سلسلة الإنشاء المناسبة. هناك متطلبات خاصة بنظام التشغيل يتم تناولها بالتفصيل على الرابط docs.flutter.dev/desktop.

3- تنزيل تطبيق بدء الدرس التطبيقي حول الترميز

تنزيل مشروع البداية

يقع مشروع التطبيق الأوّلي في الدليل material-components-flutter-codelabs-101-starter/mdc_100_series.

...أو استنسِخه من GitHub

لاستنساخ هذا الدرس التطبيقي حول الترميز من GitHub، شغِّل الأوامر التالية:

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs/mdc_100_series
git checkout 101-starter

للحصول على مزيد من المساعدة: استنساخ مستودع من GitHub

الفرع الصحيح

تتكامل الدروس التطبيقية حول الترميز من 101 إلى 104 من "تصميم المواد" مع بعضها البعض. لذلك، عند الانتهاء من الرمز البرمجي الخاص بالدرس 101، يصبح الرمز البرمجي الأولي الخاص بالدرس 102. يتم تقسيم الرمز على فروع مختلفة، ويمكنك إدراجها كلها باستخدام الأمر التالي:

git branch --list

للاطّلاع على الرمز البرمجي المكتمل، يمكنك الانتقال إلى الفرع 102-starter_and_101-complete.

افتح المشروع وشغِّل التطبيق

1. افتح المشروع في المحرِّر الذي تختاره.
2. اتّبِع التعليمات الواردة في مقالة البدء: تجربة القيادة ضمن القسم "تشغيل التطبيق" في المحرّر الذي اخترته.

اكتمال النقل بنجاح يجب أن يكون رمز البداية لصفحة تسجيل الدخول في Shrine قيد التشغيل على جهازك. يجب أن يظهر لك شعار Shrine والاسم "Shrine" أسفله مباشرةً.

Android	iOS

لنلقِ نظرة على الرمز.

تتضمّن مهام TODO في الرمز أرقامًا (101 و102 وما إلى ذلك)، وتشير هذه الأرقام إلى رقم الدرس العملي الذي ستنفّذ فيه التغيير.

التطبيقات المصغّرة في login.dart

افتح login.dart. يجب أن يتضمّن ما يلي:

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // TODO: Add text editing controllers (101)
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            const SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                const SizedBox(height: 16.0),
                const Text('SHRINE'),
              ],
            ),
            const SizedBox(height: 120.0),
            // TODO: Remove filled: true values (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

لاحظ أنّه يحتوي على عبارة import وصنفَين جديدَين:

• تسمح عبارة import باستخدام مكتبة Material في هذا الملف.
• يمثّل الصف LoginPage الصفحة بأكملها المعروضة في المحاكي.
• تتحكّم الدالة build() في الفئة _LoginPageState في طريقة إنشاء جميع التطبيقات المصغّرة في واجهة المستخدم.

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

4. إضافة عناصر واجهة مستخدم TextField

للبدء، سنضيف حقلَي نص إلى صفحة تسجيل الدخول، حيث يُدخِل المستخدمون اسم المستخدم وكلمة المرور. سنستخدم أداة TextField التي تعرض تصنيفًا عائمًا وتفعّل تأثير التموج عند اللمس.

تمت ترقية حقول النص في Material بشكل كبير لتحسين مرونة العلامة التجارية، مع تحسينات مدعومة بأبحاث مكثفة حول تجربة المستخدم لتحسين سهولة الاستخدام والتصميم المرئي.

يمكنك الاطّلاع على مزيد من المعلومات حول حقول النصوص الجديدة في مقالة "إرشادات التصميم المتعدد الأبعاد".

تم تصميم هذه الصفحة في المقام الأول باستخدام ListView، الذي يرتب العناصر الثانوية في عمود قابل للتمرير. لنضع حقول النص أدناه.

إضافة عناصر واجهة المستخدم TextField

أضِف حقلَي نص جديدَين وفاصلًا بعد const SizedBox(height: 120.0).

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// spacer
const SizedBox(height: 120.0),
// [Password]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),

تحتوي الحقول النصية على حقل decoration: يأخذ أداة InputDecoration. يشير الحقل filled: إلى أنّ خلفية حقل النص مملوءة بشكل خفيف لمساعدة المستخدمين في التعرّف على مساحة النقر أو مساحة اللمس في حقل النص. تستبدل قيمة obscureText: true في حقل النص الثاني تلقائيًا الإدخال الذي يكتبه المستخدم بنقاط تعداد، وهو أمر مناسب لكلمات المرور.

احفظ مشروعك (باستخدام ضغطة المفتاح: command + s) التي تنفّذ إعادة تحميل سريعة.

من المفترض أن تظهر الآن صفحة تتضمّن حقلَين نصيَّين لاسم المستخدم وكلمة المرور. إليك طريقة عمل الصورة المتحركة للتصنيف العائم:

Android	iOS

تشمل ميزات TextField ما يلي:

• يمكن تغيير مظهر أداة TextField بسهولة. بالنسبة إلى حقل التزيين، حدِّد قيمة InputDecoration.
• يعرض حقل النص ملاحظات اللمس (المعروفة باسم التموج أو "الحبر") تلقائيًا.
• ‫FormField هو أداة مشابهة تتضمّن ميزات خاصة لتضمين الحقول في النماذج.
• مستندات فئة TextField

5- إضافة أزرار

بعد ذلك، سنضيف زرَّين إلى صفحة تسجيل الدخول: "إلغاء" و"التالي". سنستخدم نوعَين من عناصر واجهة المستخدم للأزرار: TextButton وElevatedButton.

الاختيار بين الأزرار النصية والأزرار المرتفعة

لماذا لا يتم عرض زرَّين بارزَين ببساطة؟ يشير كل نوع من أنواع الأزرار إلى الإجراءات الأكثر أهمية من غيرها.

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

أقل إجراء نريده هو إلغاء تسجيل الدخول. بما أنّ الزر البارز يجذب الانتباه بمظهره المرتفع، يجب استخدامه للإجراء الأكثر أهمية. بالمقارنة، يبدو زر النص العادي على يسارها أقل أهمية.

يمكنك الاطّلاع على مزيد من المعلومات حول ترتيب الأزرار في مقالة الأزرار ضمن إرشادات Material Design.

إضافة OverflowBar

بعد الحقول النصية، أضِف OverflowBar إلى العناصر الفرعية في ListView:

// TODO: Add button bar (101)
OverflowBar(
  alignment: MainAxisAlignment.end,
  // TODO: Add a beveled rectangular border to CANCEL (103)
  children: <Widget>[
    // TODO: Add buttons (101)
  ],
),

يرتّب OverflowBar عناصره الثانوية في صف.

إضافة الأزرار

بعد ذلك، أضِف زرَّين إلى قائمة children في OverflowBar:

    // TODO: Add buttons (101)
    TextButton(
      child: const Text('CANCEL'),
      onPressed: () {
        // TODO: Clear the text fields (101)
      },
    ),
    // TODO: Add an elevation to NEXT (103)
    // TODO: Add a beveled rectangular border to NEXT (103)
    ElevatedButton(
      child: const Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101) 
      },
    ),

لماذا لدينا حقول فارغة في onPressed:؟

إذا مرّرنا قيمة فارغة، سيتم إيقاف الأزرار. ولن نحصل على أي ملاحظات بشأن اللمس، ولن نتمكّن من تكوين فكرة جيدة عن السلوك المفعَّل. يؤدي استخدام وحدات فارغة إلى منع إيقافها.

لمزيد من المعلومات حول الأزرار وطرق التفاعل معها، يُرجى الاطّلاع على إضافة عناصر تفاعلية إلى تطبيقك.

احفظ مشروعك. أسفل حقل النص الأخير، من المفترض أن يظهر زرّان:

Android	iOS

يتولّى OverflowBar مهمة إنشاء التنسيق نيابةً عنك. يضع الأزرار أفقيًا، لذا تظهر جنبًا إلى جنب.

يؤدي لمس زر إلى بدء حركة تموّج الحبر بدون التسبّب في حدوث أي شيء آخر. لنضِف وظائف إلى دوال onPressed: المجهولة، بحيث يمحو زر الإلغاء حقول النص، ويغلق زر التالي الشاشة:

إضافة عناصر TextEditingController

لإتاحة محو قيم حقول النص، سنضيف TextEditingControllers للتحكّم في النص.

أسفل تعريف الفئة _LoginPageState مباشرةً، أضِف عناصر التحكّم كمتغيّرات final.

  // TODO: Add text editing controllers (101)
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

في حقل controller: الخاص بحقل النص الأول، اضبط _usernameController على:

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  controller: _usernameController,

في حقل controller: الخاص بحقل النص الثاني، اضبط الآن _passwordController:

// TODO: Add TextField widgets (101)
// [Password]
TextField(
  controller: _passwordController,

تعديل onPressed

أضِف أمرًا لمحو كل أداة تحكّم في الدالة onPressed: الخاصة بـ TextButton:

    // TODO: Clear the text fields (101)
    _usernameController.clear();
    _passwordController.clear();

احفظ مشروعك. الآن، عند كتابة أي شيء في حقول النص، سيؤدي النقر على "إلغاء" إلى محو كل حقل مرة أخرى.

نموذج تسجيل الدخول هذا في حالة جيدة. لننتقل بالمستخدمين إلى بقية تطبيق Shrine.

تمييز

لإغلاق هذا العرض، نريد إزالة هذه الصفحة (التي يسمّيها Flutter مسارًا) من حزمة التنقّل.

تحتفظ أداة Navigator بمجموعة من المسارات تمامًا مثل UINavigationController على نظام التشغيل iOS. يؤدي دفع مسار إلى وضعه في أعلى الحزمة. يؤدي إزالة الحزمة إلى إزالة المسار الذي تمت إضافته مؤخرًا. في app.dart من تطبيقنا، يؤدي استدعاء initialRoute: '/login', إلى إضافة شاشة تسجيل الدخول إلى "المستكشف".

تعرَّف على المسارات والتنقّل في أساسيات التنقّل.

في الدالة onPressed: الخاصة بـ ElevatedButton، أزِل أحدث مسار من Navigator:

        // TODO: Show the next page (101) 
        Navigator.pop(context);

أخيرًا، افتح home.dart واضبط resizeToAvoidBottomInset على false في Scaffold:

    return Scaffold(
      // TODO: Add app bar (102)
      // TODO: Add a grid view (102)
      body: Center(
        child: Text('You did it!'),
      ),
      // TODO: Set resizeToAvoidBottomInset (101)
      resizeToAvoidBottomInset: false,
    );

يضمن ذلك ألا يؤدي ظهور لوحة المفاتيح إلى تغيير حجم الصفحة الرئيسية أو أدواتها.

هذا كل شيء! احفظ مشروعك. انقر على "التالي".

أحسنت!

Android	iOS

هذه الشاشة هي نقطة البداية لدرسنا العملي التالي الذي ستعمل عليه في MDC-102.

لمحة عن الأزرار:

• بالإضافة إلى TextButton وElevatedButton، هناك OutlinedButton وFloatingActionButton وIconButton وغير ذلك.

6. تهانينا!

أضفنا حقولاً نصية وأزرارًا ولم نضطر إلى التفكير في رمز التصميم. تتضمّن Material Components for Flutter الكثير من الأنماط ويمكن وضعها على الشاشة بسهولة تامة.

يتوفّر تطبيق MDC-101 المكتمل في الفرع 102-starter_and_101-complete.

يمكنك اختبار إصدار تطبيقك مقارنةً بإصدار التطبيق في هذا الفرع.

الخطوات التالية

حقول النص والأزرار هما عنصران أساسيان في نظام Material، ولكن هناك العديد من العناصر الأخرى. يمكنك أيضًا استكشاف الباقي في كتالوج أدوات Material Components.

يمكنك بدلاً من ذلك الانتقال إلى MDC-102: بنية وتنسيق التصميم المتعدد الأبعاد للتعرّف على المكوّنات التي يغطيها MDC-102 في Flutter.

الدرس التطبيقي التالي

تمكّنتُ من إكمال هذا الدرس التطبيقي حول الترميز خلال فترة زمنية معقولة وبجهد معقول

أوافق بشدة أوافق لا أوافق ولا أعارض لا أوافق لا أوافق أبدًا

أريد مواصلة استخدام "مكوّنات Material" في المستقبل

أوافق بشدة أوافق لا أوافق ولا أعارض لا أوافق لا أوافق أبدًا