1. مقدمة
| تساعد Material Components (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
تحتاج إلى برنامجَين لإكمال هذا الدرس التطبيقي، وهما حزمة تطوير البرامج (SDK) الخاصة بإطار عمل Flutter ومحرِّر.
يمكنك تشغيل الدرس العملي باستخدام أيّ من الأجهزة التالية:
- جهاز 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، ما أدّى إلى توسيعها لإنشاء لوحة ألوان أكثر اكتمالاً. (هذه الألوان ليست من لوحات ألوان Material لعام 2014).
نظَّم تطبيق Material Theme Editor هذه الألوان في درجات مظلّلة تحمل أرقامًا، بما في ذلك التصنيفات 50 و100 و200 و... إلى 900 لكل لون. يستخدم Shrine الدرجات 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- تعديل أنماط الطباعة والتصنيفات
بالإضافة إلى تغييرات الألوان، قدّم لنا المصمّم أيضًا أسلوب خط محددًا لاستخدامه. يتضمّن ThemeData في Flutter ثلاثة أنماط نصية. كل مظهر نصي هو مجموعة من أنماط النصوص، مثل "العنوان الرئيسي" و "العنوان". سنستخدم بعض الأنماط لتطبيقنا وسنغيّر بعض القيم.
تخصيص مظهر النص
لاستيراد الخطوط إلى المشروع، يجب إضافتها إلى ملف 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() (العنوان الرئيسي والعنوان والتعليق التوضيحي) فقط.
بالنسبة إلى بعض الخطوط، نضبط قيمة fontWeight مخصّصة، بزيادات قدرها 100: w500 (الوزن 500) يتوافق مع متوسط وw400 يتوافق مع عادي.
استخدام سماتالنصالجديدة
أضِف المواضيع التالية إلى _buildShrineTheme بعد الخطأ:
// TODO: Add the text themes (103)
textTheme: _buildShrineTextTheme(base.textTheme),
textSelectionTheme: const TextSelectionThemeData(
selectionColor: kShrinePink100,
),
احفظ مشروعك. في هذه المرة، أعِد تشغيل التطبيق أيضًا (المعروف باسم Hot Restart)، لأنّنا عدّلنا الخطوط.
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,
),
),
أخيرًا، لنستخدِم اللون الثانوي بدلاً من اللون الأساسي لزر "إلغاء" من أجل زيادة التباين.
TextButton(
child: const Text('CANCEL'),
onPressed: () {
_usernameController.clear();
_passwordController.clear();
},
style: TextButton.styleFrom(
primary: Theme.of(context).colorScheme.secondary,
),
),
احفظ مشروعك.
Android | iOS |
|
|
6. ضبط الارتفاع
بعد أن صمّمنا الصفحة باستخدام ألوان وأسلوب خط محددين يتطابقان مع Shrine، لنعدّل الآن مستوى الارتفاع.
تغيير ارتفاع زر NEXT
الارتفاع التلقائي للعنصر ElevatedButton هو 2. لنرفعها أكثر.
في login.dart، أضِف قيمة style: إلى الزر NEXT ElevatedButton:
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 المتقدّمة، نوضّح كيفية إنشاء مكوّنات مخصّصة باستخدام مكتبة Material Flutter لتحقيق المظهر المطلوب.