‫‪Create an Application to show your business card.

‬‬
‫بعد أن تعلمنا في المحاظرات السابقية كيفية أضافة دائرة وأدرجنا بداخها صوره وقمنا بأضافة نص تحت‬
‫هذه الصوره وقمنا بتغير حجم وشكل النص ولكن نوع الخط هنا يكون األفتراضي فأذا أردنا تغير نوع‬
‫الخص فهذا الذي سوف نتعلمه في هذه المحاظره كيفية أضافة خطوط إلى فلتتر‬
‫‪ -1‬نقوم بتنزيل الخط المراد تنزيله من جوجل عبر الموقع‬
‫‪https://fonts.google.com/‬‬

‫‪ -2‬بعد تحميل الخط المراد استخدامه نقوم بأنشاء ملف جديد داخل مجلد البرنامج تبعنا ونسميه ‪fonts‬‬
‫ونقوم بنسخ الخط الذي تم تحميله من جوجل ووضعه في هذا الملف‬
 ‫‪ -3‬بنفس طريقة أستدعاء الصور نقوم بتعديل في ملف االعدادات ‪ pubspec.yaml‬على النحو التالي ‪:‬‬

‫‪ -4‬األن بعد أن تم أضافة الخط وتم اعالم فلتتر بوجود الخط بعد كذه االن نستطيع أستدعاء هذا الخط من اخالل‬
‫استدعاء اسمه في البرنامج وذالك بالرجوع الى البرانامج تبعنا ونعمل على أضافة خاصية ‪:fontFamily‬‬
‫ونقوم بكتابة أسم الخط المضاف سابقا ‪Cairo‬‬
‫من خالل الخطوات السابقة استطعنا تغير الخطوط للبرنامج واألن لنكمل برمجة التطبيق بأضافة أسم الكلية تحت أسم‬
‫الجامعه ‪.‬‬
‫وألن ال ‪ columns‬تستطيع أن تتبنى أكثر من كائن فأننا نقوم بأضافة ‪ Text‬جديده كم هو موضح أدناه‬
‫بعد أن قمنا بأضافة خط وادراجة بالفلتر وتعلمنا عملية االستدعاء األن سوف تعرف على ‪ widget‬جديده وهي ال‬
‫‪ Icon‬االيقونات ‪.‬‬
‫في البداية فالنتعرف لماذا االيقونات مهمه فابأمكاننا أن نحط صوره بدل االيقون ولكن الصوره غير قابلة لتكيف‬
‫والتعديل على غرار األيقونات أيضا أفضل دقة من الصور‪.‬‬
‫نعود الى برمجة التطبيق ونتعلم كيفية أضافة ايقونه الهاتف داخل صف افقي وبجانبه رقم الهاتف على النحو التالي ‪:‬‬
‫‪ -1‬سوف نقوم بأنشاء ‪ container‬بداخل ال ‪column‬‬
‫‪ -2‬نقوم بإنشاء ‪ Row‬بداخل ال ‪ container‬اللي هو باالساس يتبنى ‪A child :‬‬
‫نالحظ هنا أنه تم انشاء ‪ Row‬بداخل ‪ container‬بداخل ‪ column‬ويمكن أنشاء العكس وبهذه الطريقة‬
‫نستطيع تصميم تطبيق مرن ونستطيع تصميم شكل اوالنموذج الذي نريده‬
‫حيث ان ‪ Row‬هنا سوف يكون االبن الرابع ل‪ column‬كما هو موجود في التطبيق‬
‫‪ -3‬بداخل ال ‪ Row‬سوف يكون يتبنى عدة ‪ children‬أول هذه االبناء هو )( ‪ Icon widget‬كما يلي‬
 ‫ومثل ماذكرت مسبقا ان االيقون افضل من الصور ألن نستطيع بسهوله تغير كثير من األشياء عليه من خالل‬
‫الخصائص تبعها مثل اللون او الحجم او لون الخلفيه (كما في الصوره ادناه) على غرار الصور اللتي نحتاج الى‬
‫برنامج تصميم لتعديل مثل الفتوشوب‬

‫هنا في االيقونات وبمجرد استخدمنا مكتبه الدارت التي تأتي مع فلتتر فسوف نستطيع أستخدام األيقونا التي تأتي مع‬
‫فلتر التي تم تصميمها من قبل جوجل‬
‫;'‪import 'package:flutter/material.dart‬‬

‫أذا فتحنا الملف التعليمي تبع ‪ Icons class‬سوف نستطيع ان نتعرف على جميع االيقونات تبع فلتتر‬
‫‪https://api.flutter.dev/flutter/material/Icons-class.html‬‬
 ‫وكل هذه التصماميم تأتي من ‪ Materials‬تبع جوجل‬
‫‪https://fonts.google.com/icons‬‬

‫أيضا هناك موقع جميل سوف يفيدك بالتصميم الرابط أدناه حيث تستطيع من خالل هذا التطبيق اختبار األلوان‬
‫لتطبيقك وسوف يعطيك تصميم أولي اذا كانت األلوان التي أخترتها متناسبه مع بعضها البعض ايضا ممكن نرى‬
‫جميع األيقوانات التي بداخل فلتر‬
‫‪/https://www.materialpalette.com‬‬
 ‫فمثال نستدعي أحد األيقونات ولتكن فرضا النجمه فسوف يكون البرنامج كالتالي‬

‫فأذا اردنا ان نغير الحجم لليقونه وليكن‬

‫هنا اليوجد لدينا بالبكسل ليس مثل الصوره عندما يكبر الحجم دقة الصوره تقل وعند تغير اللون سوف يكون بشكل‬
‫سهل وسلس فقط نعمل على أضافة خاصية اللون وسوف يتغير الون وهنا نؤكد أن استخدام االيقون أسهل وافضل‬
‫من استخدام الصوره‬
 ‫نعود لبرنامجنا ونحن باالساس نريد ايقونة الهاتف حتى نظهر معلومات االتصال للجامعه أيضا وبجانب هذه‬
‫االيقونه نريد وضع نص وهو عباره عن رقم الهاتف لهذا سوف نضع )(‪ Text‬داخل ال )(‪ Row‬يعني بجانب او‬
‫في نفس مسار )(‪ . Icon‬ونتوقع أن يكون تنفيذ البرنامج هو ايقونه الهاتف بحانبه رقم الهاتف مثل ماتم شرحة في‬
‫محاظرة االعمدة والصفوف‬
 ‫األن نغير نمط الخط بأستخدام )(‪ Textstyle‬كما شرحناها في المحاظره السابقة بتغير الون وتغير عرض الخط‬
‫وحجمه كما يلي ‪:‬‬

‫االن نريد وضع فراغ بين األيقونه والنص ( رقم الهاتف) والطريقة األسهل واألفضل هي بأستخدام )(‪SizedBox‬‬
‫كما تعلمنا في المحاظره السابقة في الفيديو"عند وضع فرافات بين الصناديق" وهنا نضع ‪ SizedBox‬بين النص‬
‫وااليقونه كمايلي‬
 ‫بعد ذالك حتى نوضح مكان ‪ container‬األتصال سوف نغير لون ‪ container‬باللون األبيض‬

‫األن نشتغل على الفرغات الداخليه والخارجيه ‪ container‬كما تعلمناه مسبقا بأستخدام‬
‫‪margin: EdgeInsets.all(20.0),‬‬
‫‪padding: EdgeInsets.all(20.0),‬‬

‫مالحظه أغلب )(‪ flutter widget‬لديها ‪ margin and padding‬حتى نستطيع أن نعمل فراغات داخليه‬
‫وخارجية فتنفيذ البرنامج سوف يكون كالتالي ‪:‬‬

‫ىت‬
‫هنا تصميم شبه جاهز لصندوق األول نعمل على أضافة صندوق أخر لمحتويات االيملي مثل األول تمام بأضافة‬
‫‪ container‬أخر وكتابة محتويات االيملي كما يلي‪:‬‬