1. مقدمة
| تساعد المكونات المادية (MDC) المطورين على تنفيذ التصميم المتعدد الأبعاد. يضم مركز MDC، الذي أنشأه فريق من المهندسين ومصممي تجربة المستخدم في Google، عشرات من مكونات واجهة المستخدم الجميلة والعملية، وهو متاح لأجهزة Android وiOS والويب وFlutter.material.io/develop |
يمكنك الآن استخدام Material Flutter لتخصيص تطبيقاتك مميزًا أكثر من أي وقت مضى. يمنح التوسع الأخير في Material Design المصممين والمطورين مزيدًا من المرونة للتعبير عن العلامة التجارية لمنتجاتهم.
في درس تطبيقي حول الترميز MDC-101 وMDC-102، استخدمت Material Flutter لإنشاء أساسيات تطبيق باسم Shrine، وهو تطبيق للتجارة الإلكترونية يبيع الملابس والسلع المنزلية. يحتوي هذا التطبيق على تدفق مستخدم يبدأ بشاشة تسجيل الدخول، ثم ينقل المستخدم إلى شاشة رئيسية تعرض المنتجات.
ما الذي ستنشئه
في هذا الدرس التطبيقي حول الترميز، ستخصّص تطبيق Shrine باستخدام:
- اللون
- فن الطباعة
- الارتفاع
- شكل
- التنسيق
Android | iOS |
|
|
|
|
مكوّنات Material Flutter والأنظمة الفرعية الخاصة بها في هذا الدرس التطبيقي حول الترميز
- المظاهر
- فن الطباعة
- الارتفاع
- قائمة الصور
ما هو تقييمك لمستوى خبرتك في تطوير Flutter؟
2. إعداد بيئة تطوير Flutter
لإكمال هذا التمرين، تحتاج إلى برنامجَين، وهما Flutter SDK ومحرِّر.
يمكنك تشغيل الدرس التطبيقي حول الترميز باستخدام أي من الأجهزة التالية:
- جهاز Android أو iOS فعلي متصل بجهاز الكمبيوتر وتم ضبطه على "وضع مطور البرامج".
- محاكي iOS (يتطلب تثبيت أدوات Xcode).
- محاكي Android (يتطلب عملية إعداد في "استوديو Android").
- متصفّح (يجب توفُّر متصفّح Chrome لتصحيح الأخطاء)
- كتطبيق سطح المكتب الذي يعمل بنظام التشغيل Windows أو Linux أو macOS. يجب إجراء تطوير على النظام الأساسي الذي تخطّط لنشر الإعلان عليه. لذا، إذا كنت ترغب في تطوير تطبيق سطح مكتب Windows، ينبغي لك تطويره على Windows للوصول إلى سلسلة الإصدار المناسبة. هناك متطلبات خاصة بنظام التشغيل تم تناولها بالتفصيل على docs.flutter.dev/desktop.
3- تنزيل تطبيق بدء الدروس التطبيقية حول الترميز
هل تريد المتابعة من MDC-102؟
إذا أكملت MDC-102، يجب أن يكون الرمز الخاص بك جاهزًا للاستخدام في هذا الدرس التطبيقي حول الترميز. التخطّي إلى الخطوة: تغيير الألوان
هل تريد البدء من نقطة الصفر؟
تنزيل تطبيق "الدرس التطبيقي حول الترميز" للمبتدئين
يتوفّر تطبيق إجراء التفعيل في دليل material-components-flutter-codelabs-103-starter_and_102-complete/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 103-starter_and_102-complete
فتح المشروع وتشغيل التطبيق
- افتح المشروع في المحرِّر الذي تختاره.
- اتّبِع التعليمات من أجل "تشغيل التطبيق" في البدء: اختبار القيادة للمحرِّر الذي اخترته.
اكتمال عملية النقل بنجاح من المفترض أن تظهر لك صفحة تسجيل الدخول إلى Shrine من التمارين التطبيقية السابقة حول الترميز على جهازك.
Android | iOS |
|
|
انقر على "التالي". لعرض صفحة المنتج.
Android | iOS |
|
|
4. تغيير الألوان
تم إنشاء نظام ألوان يمثل العلامة التجارية Shrine، ويريد المصمم منك تنفيذ نظام الألوان هذا عبر تطبيق Shrine
للبدء، دعنا نستورد تلك الألوان إلى مشروعنا.
إنشاء colors.dart
أنشِئ ملف dart جديد في تطبيق lib باسم colors.dart. استيراد material.dart وإضافة قيم const Color:
import 'package:flutter/material.dart';
const kShrinePink50 = Color(0xFFFEEAE6);
const kShrinePink100 = Color(0xFFFEDBD0);
const kShrinePink300 = Color(0xFFFBB8AC);
const kShrinePink400 = Color(0xFFEAA4A4);
const kShrineBrown900 = Color(0xFF442B2D);
const kShrineErrorRed = Color(0xFFC5032B);
const kShrineSurfaceWhite = Color(0xFFFFFBFA);
const kShrineBackgroundWhite = Colors.white;
لوحة الألوان المخصّصة
تم إنشاء مظهر اللون هذا بواسطة مصمم بألوان مخصصة (كما هو موضح في الصورة أدناه). يحتوي التطبيق على ألوان تم اختيارها من علامة Shrine التجارية، وتم تطبيقها على أداة Material Theme Editor التي تم استخدامها في توسيع نطاق هذه الألوان لإنشاء لوحة ألوان أكثر اكتمالاً. (هذه الألوان ليست من لوحات ألوان المواد لعام 2014).
نظمها "محرِّر مظهر Material Theme Editor" في ظلال مصنَّفة رقميًا، بما في ذلك التصنيفات من 50، 100، 200، .... إلى 900 من كل لون. يستخدم الضريح الظلال 50 و100 و300 فقط من العينة الوردية و900 من العينة البنية.
يتم تعيين كل معلمة ملونة في التطبيق المصغّر إلى لون من هذه المخططات. على سبيل المثال، يجب أن يكون لون زخارف الحقل النصي عندما يتلقى إدخالات بشكل نشط هو اللون الأساسي للموضوع. إذا تعذر الوصول إلى هذا اللون (يسهل رؤيته مقابل الخلفية)، استخدم لونًا آخر بدلاً من ذلك.
الآن بعد أن أصبح لدينا الألوان التي نريد استخدامها، يمكننا تطبيقها على واجهة المستخدم. وسننفذ ذلك من خلال ضبط قيم التطبيق المصغّر ThemeData الذي نطبّقه على مثيل MaterialApp في أعلى التدرج الهرمي للأدوات.
تخصيص ThemeData.light()
يتضمّن Flutter بعض المظاهر المدمَجة. والمظهر الفاتح هو أحد هذه الخيارات. بدلاً من إنشاء تطبيق ThemeData المصغّر من البداية، سننسخ المظهر الفاتح ونغيّر القيم لتخصيصها لتطبيقنا.
لنستورد colors.dart باللغة app.dart.
import 'colors.dart';
بعد ذلك، أضِف ما يلي إلى app.dart خارج نطاق فئة ShrineApp:
// TODO: Build a Shrine Theme (103)
final ThemeData _kShrineTheme = _buildShrineTheme();
ThemeData _buildShrineTheme() {
final ThemeData base = ThemeData.light(useMaterial3: true);
return base.copyWith(
colorScheme: base.colorScheme.copyWith(
primary: kShrinePink100,
onPrimary: kShrineBrown900,
secondary: kShrineBrown900,
error: kShrineErrorRed,
),
// TODO: Add the text themes (103)
// TODO: Decorate the inputs (103)
);
}
يمكنك الآن ضبط theme: في نهاية وظيفة build() في ShrineApp (في تطبيق MaterialApp المصغّر) ليكون المظهر الجديد:
// TODO: Customize the theme (103)
theme: _kShrineTheme, // New code
احفظ مشروعك. يُفترض أن تظهر شاشة تسجيل الدخول الآن على النحو التالي:
Android | iOS |
|
|
5- تعديل أنماط الخط والتصنيفات
بالإضافة إلى تغييرات الألوان، أعطانا المصمم أيضًا أسلوب الخط المحدد لاستخدامها. يتضمّن Flutter ThemeData 3 مظاهر نصية. كل مظهر نصي هو مجموعة من أنماط النص، مثل "العنوان" و"العنوان". سنستخدم بعض الأنماط لتطبيقنا ونغير بعض القيم.
تخصيص مظهر النص
لاستيراد الخطوط إلى المشروع، يجب إضافتها إلى ملف pubspec.yaml.
في pubspec.yaml، أضِف ما يلي مباشرةً بعد علامة flutter::
# TODO: Insert Fonts (103)
fonts:
- family: Rubik
fonts:
- asset: fonts/Rubik-Regular.ttf
- asset: fonts/Rubik-Medium.ttf
weight: 500
يمكنك الآن الوصول إلى خط Rubik واستخدامه.
تحديد مشاكل ملف pubspec وحلّها
قد تظهر لك أخطاء عند تشغيل pub get إذا قمت بقص البيان أعلاه ولصقه. وإذا ظهرت لك أخطاء، ابدأ بإزالة المسافة البيضاء البادئة واستبدالها بمسافات باستخدام المسافة البادئة مرتين. (قبل مسافتين
fonts:
، أربع مسافات قبل
family: Rubik
وما إلى ذلك).
إذا رأيت العبارة ربط القيم غير مسموح بها هنا، تحقّق من المسافة البادئة للسطر الذي يحتوي على المشكلة والمسافة البادئة للسطور أعلاه.
في login.dart، غيِّر ما يلي ضمن Column():
Column(
children: <Widget>[
Image.asset('assets/diamond.png'),
const SizedBox(height: 16.0),
Text(
'SHRINE',
style: Theme.of(context).textTheme.headlineSmall,
),
],
)
في app.dart، أضِف ما يلي بعد _buildShrineTheme():
// TODO: Build a Shrine Text Theme (103)
TextTheme _buildShrineTextTheme(TextTheme base) {
return base
.copyWith(
headlineSmall: base.headlineSmall!.copyWith(
fontWeight: FontWeight.w500,
),
titleLarge: base.titleLarge!.copyWith(
fontSize: 18.0,
),
bodySmall: base.bodySmall!.copyWith(
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
bodyLarge: base.bodyLarge!.copyWith(
fontWeight: FontWeight.w500,
fontSize: 16.0,
),
)
.apply(
fontFamily: 'Rubik',
displayColor: kShrineBrown900,
bodyColor: kShrineBrown900,
);
}
يؤدي هذا الإجراء إلى استخدام TextTheme وتغيير مظهر العناوين والعناوين والشرح.
ويؤدي تطبيق fontFamily بهذه الطريقة إلى تطبيق التغييرات فقط على قيم مقياس أسلوب الخط المحدَّدة في copyWith() (العنوان والعنوان والشرح).
بالنسبة إلى بعض الخطوط، يتم ضبط حجم خط مخصص، بزيادات 100: يتجاوب w500 (الوزن 500) مع medium ويتوافق w400 مع medium.
استخدام النص الجديد
إضافة المظاهر التالية إلى _buildShrineTheme بعد الخطأ:
// TODO: Add the text themes (103)
textTheme: _buildShrineTextTheme(base.textTheme),
textSelectionTheme: const TextSelectionThemeData(
selectionColor: kShrinePink100,
),
احفظ مشروعك. وهذه المرة، عليك أيضًا إعادة تشغيل التطبيق (المعروف باسم Hot Redirect) لأنّنا عدّلنا الخطوط.
Android | iOS |
|
|
يبدو النص في صفحة تسجيل الدخول والشاشة الرئيسية مختلفًا، فبعض النصوص تستخدم خط Rubik، بينما يتم عرض نصوص أخرى باللون البني بدلاً من الأسود أو الأبيض. تظهر الأيقونات أيضًا باللون البني.
تصغير النص
التصنيفات كبيرة جدًا.
في home.dart، غيِّر children: للعمود الأبعد:
// TODO: Change innermost Column (103)
children: <Widget>[
// TODO: Handle overflowing labels (103)
Text(
product.name,
style: theme.textTheme.button,
softWrap: false,
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
const SizedBox(height: 4.0),
Text(
formatter.format(product.price),
style: theme.textTheme.bodySmall,
),
// End new code
],
توسيط النص وإفلاته
نريد توسيط التصنيفات ومحاذاة النص إلى أسفل كل بطاقة، بدلاً من أسفل كل صورة.
انقل التصنيفات إلى نهاية (أسفل) المحور الرئيسي وقم بتغييرها بحيث يتم توسيطها:
// TODO: Align labels to the bottom and center (103)
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
احفظ مشروعك.
Android | iOS |
|
|
هذا يبدو أفضل بكثير.
تحديد مظهر الحقول النصية
يمكنك أيضًا استخدام مظهر زخرفي في الحقول النصية باستخدام InputDecorationTheme.
في app.dart، في الطريقة _buildShrineTheme()، حدِّد قيمة inputDecorationTheme::
// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
border: OutlineInputBorder(),
),
في الوقت الحالي، تحتوي الحقول النصية على زخرفة filled. لنزيل ذلك. ستؤدي إزالة filled وتحديد inputDecorationTheme إلى منح الحقول النصية نمط المخطط.
في login.dart، أزِل قيم filled: true:
// Remove filled: true values (103)
TextField(
controller: _usernameController,
decoration: const InputDecoration(
// Removed filled: true
labelText: 'Username',
),
),
const SizedBox(height: 12.0),
TextField(
controller: _passwordController,
decoration: const InputDecoration(
// Removed filled: true
labelText: 'Password',
),
obscureText: true,
),
إعادة التشغيل أولاً. من المفترض أن تظهر شاشة تسجيل الدخول على النحو التالي عندما يكون حقل اسم المستخدم نشطًا (عند كتابته):
Android | iOS |
|
|
اكتب في حقل نصي، وسيتم عرض الحدود والتصنيفات العائمة باللون الأساسي. ولكن لا يمكننا رؤيته بسهولة كبيرة. ولا يمكن الوصول إليه من قبل الأشخاص الذين يجدون صعوبة في التفريق بين وحدات البكسل التي ليس لديها تباين ألوان عالٍ بالقدر الكافي. (لمزيد من المعلومات، راجع مقالة الألوان وإمكانية الوصول الخاصة بإرشادات المواد.
في app.dart، حدِّد focusedBorder: ضمن inputDecorationTheme: :
// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2.0,
color: kShrineBrown900,
),
),
),
بعد ذلك، حدِّد floatingLabelStyle: ضمن inputDecorationTheme: :
// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2.0,
color: kShrineBrown900,
),
),
floatingLabelStyle: TextStyle(
color: kShrineBrown900,
),
),
وأخيرًا، لنجعل زر "Cancel" (إلغاء) يستخدم اللون الثانوي بدلاً من اللون الأساسي لزيادة التباين.
TextButton(
child: const Text('CANCEL'),
onPressed: () {
_usernameController.clear();
_passwordController.clear();
},
style: TextButton.styleFrom(
primary: Theme.of(context).colorScheme.secondary,
),
),
احفظ مشروعك.
Android | iOS |
|
|
6- ضبط الارتفاع
الآن بعد أن صممت الصفحة بلونين وأسلوب خط معينين يتطابقان مع Shrine، دعنا نضبط المسقط الرأسي.
تغيير ارتفاع زر "التالي"
المسقط الرأسي الافتراضي لـ ElevatedButton هو 2. لنرفعها إلى مستوى أعلى.
في "login.dart"، أضِف القيمة style: إلى الزرّ التالي المرتبط بالزر "التالي":
ElevatedButton(
child: const Text('NEXT'),
onPressed: () {
Navigator.pop(context);
},
style: ElevatedButton.styleFrom(
foregroundColor: kShrineBrown900,
backgroundColor: kShrinePink100,
elevation: 8.0,
),
),
احفظ مشروعك.
Android | iOS |
|
|
ضبط ارتفاع البطاقة
في الوقت الحالي، توجد البطاقات على سطح أبيض بجانب التنقل في الموقع.
خلال home.dart، أضِف القيمة elevation: إلى البطاقات:
// TODO: Adjust card heights (103)
elevation: 0.0,
احفظ المشروع.
Android | iOS |
|
|
لقد أزلت الظل تحت البطاقات.
7. إضافة شكل
يتميّز الضريح بأسلوب هندسي رائع ويحدّد العناصر ذات الشكل الثماني أو المستطيل. لنقم بتنفيذ نمط الشكل في البطاقات على الشاشة الرئيسية، والحقول النصية والأزرار على شاشة تسجيل الدخول.
تغيير أشكال الحقول النصية على شاشة تسجيل الدخول
في app.dart، استورِد الملف التالي:
import 'supplemental/cut_corners_border.dart';
لا تزال في app.dart، يمكنك تعديل مظهر زخرفة حقل النص لاستخدام حدود جانب الاقتصاص:
// TODO: Decorate the inputs (103)
inputDecorationTheme: const InputDecorationTheme(
border: CutCornersBorder(),
focusedBorder: CutCornersBorder(
borderSide: BorderSide(
width: 2.0,
color: kShrineBrown900,
),
),
floatingLabelStyle: TextStyle(
color: kShrineBrown900,
),
),
تغيير أشكال الأزرار على شاشة تسجيل الدخول
في login.dart، أضِف حدًا مستطيلاً مشطوفًا إلى الزر إلغاء:
TextButton(
child: const Text('CANCEL'),
onPressed: () {
_usernameController.clear();
_passwordController.clear();
},
style: TextButton.styleFrom(
foregroundColor: kShrineBrown900,
shape: const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7.0)),
),
),
),
لا يحتوي TextButton على شكل مرئي، فلماذا تضيف شكل حد؟ وبالتالي، يرتبط رسم التموج إلى الشكل نفسه عند لمسه.
الآن أضف نفس الشكل إلى زر "NEXT" (التالي):
ElevatedButton(
child: const Text('NEXT'),
onPressed: () {
Navigator.pop(context);
},
style: ElevatedButton.styleFrom(
foregroundColor: kShrineBrown900,
backgroundColor: kShrinePink100,
elevation: 8.0,
shape: const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7.0)),
),
),
),
لتغيير شكل كل الأزرار، يمكننا أيضًا استخدام elevatedButtonTheme أو textButtonTheme من خلال app.dart. ويترك ذلك كتحدٍ للمتعلم!
إعادة التشغيل أولاً.
Android | iOS |
|
|
8. تغيير التنسيق
بعد ذلك، هيا نغير التنسيق لعرض البطاقات بنسب عرض إلى ارتفاع وأحجام مختلفة، بحيث تبدو كل بطاقة فريدة من غيرها.
استبدال GridView باستخدام AsymmetricView
لقد كتبنا الملفات بالفعل للحصول على تخطيط غير متماثل.
في home.dart، أضِف عملية الاستيراد التالية:
import 'supplemental/asymmetric_view.dart';
حذف _buildGridCards واستبدال body:
body: AsymmetricView(
products: ProductsRepository.loadProducts(Category.all),
),
احفظ المشروع.
Android | iOS |
|
|
الآن يتم تمرير المنتجات أفقيًا بنمط مستوحى من الحياكة.
9. تجربة مظهر آخر (اختياري)
يعد اللون طريقة قوية للتعبير عن علامتك التجارية، ويمكن أن يكون لتغيير بسيط في اللون تأثير كبير على تجربة المستخدم. لاختبار ذلك، دعونا نرى كيف يبدو Shrine إذا كان نظام ألوان العلامة التجارية مختلفًا قليلاً.
تعديل الألوان
في colors.dart، أضِف اللون التالي:
const kShrinePurple = Color(0xFF5D1049);
في app.dart، غيِّر الدالة _buildShrineTheme() إلى ما يلي:
ThemeData _buildShrineTheme() {
final ThemeData base = ThemeData.light();
return base.copyWith(
colorScheme: base.colorScheme.copyWith(
primary: kShrinePurple,
secondary: kShrinePurple,
error: kShrineErrorRed,
),
scaffoldBackgroundColor: kShrineSurfaceWhite,
textSelectionTheme: const TextSelectionThemeData(
selectionColor: kShrinePurple,
),
appBarTheme: const AppBarTheme(
foregroundColor: kShrineBrown900,
backgroundColor: kShrinePink100,
),
inputDecorationTheme: const InputDecorationTheme(
border: CutCornersBorder(),
focusedBorder: CutCornersBorder(
borderSide: BorderSide(
width: 2.0,
color: kShrinePurple,
),
),
floatingLabelStyle: TextStyle(
color: kShrinePurple,
),
),
);
}
إعادة التشغيل أولاً. من المفترض أن يظهر المظهر الجديد الآن.
Android | iOS |
|
|
Android | iOS |
|
|
والنتيجة مختلفة جدًا! تتم إعادة app.dart's _buildShrineTheme إلى ما كانت عليه قبل هذه الخطوة. أو يمكنك تنزيل رمز التفعيل الخاص بالرقم 104.
10. تهانينا!
الآن، لقد أنشأت تطبيقًا يشبه مواصفات التصميم من المصمم.
الخطوات التالية
لقد استخدمت الآن Material Flutter التالي: التصميم وأسلوب الخط والمسقط الرأسي والشكل. يمكنك استكشاف المزيد من المكونات والأنظمة الفرعية في مكتبة Material Flutter.
يمكنك التعرّف على الملفات في دليل supplemental للتعرّف على كيفية إنشاء شبكة التصميم غير المتماثلة التي تتيح التمرير أفقيًا.
ماذا لو كان تصميم التطبيق المخطط له يحتوي على عناصر لا تحتوي على مكونات في المكتبة؟ في MDC-104: مكونات Material Advanced، نوضح كيفية إنشاء مكوّنات مخصصة باستخدام مكتبة Material Flutter لتحقيق المظهر المطلوب.