كيفية عمل خط منقط ( dotted border ) في Flutter
من الاشكال المميزه التي يتم استخدامها بشكل كبير في البرمجه وهو عمل خط منقط حيث يعطي هذا الخط منظر جمالي للتصميم الذي تعمل عليه ويمكنك تحديد الابعاد وحجم الخطوط بداخله وفي هذا المقال سوف نتعرف على كيفية انشاءه والتعامل معه بسهوله وهذا سوف يكون عن طريق مكتبة سوف نقوم بوضعها داخل فلاتر وتحديدا داخل ملف pubspec وهي التي سوف تساعدنا في حل هذة المشكلة وعمل الخط بسهوله دون كتابة كود كبير لتفيذها .
الشرح في flutter متوفر بشكل كبير في الفترة الاخيره ويوجد الكثير من أدوات الذكية التي تساعد على انجاز الاعمال بشكل اسرع مثال على ذلك plugin مفتوحة المصدر التي تسهل علينا الكثير و ال دروس التي نحصل على معلومات مختلفة منها تقوينا في المجال , واذا كنت في البرمجة بسيط او بمحنى اخر الصفر في البرمجة فلا تقلق فسوف نساعدك على تطوير من نفسك داخل المجال وهو ببساطة عبارة عن مجموعة من الاوامر التي نكتبها تخرج لنا تطبيق الجوال وكل شيئ سيكون بشرح مفصل بإذن الله , وسوف نحاول تقديم كورس الفلاتر بشكل مجاني لكم وذلك بعد ان انتهينا في الاندرويد و التطبيق عليها ويجب عليك تعلمها فهي الاساس او native واغلب الشركات تحتاج الى application native لذلك يجب عليك تعلم code خام الاول .
الفلاتر تعمل على widgets بمعنى ان كل حالة او عنصر نطلق عليه widgets في flutter و طريقة الكود هنا مختلفة عن الاندرويد قليلا لتعلم تصميم واجة تحتاج الى كتابتها عن طريق الاكواد وهذا افضل للمطورين واصبح android developer يفضلها مثل انشاء button بشكل اسرع وبالنسبة للتعامل مع firebase تقريبا نفس الفكرة التي يعملها بها مطور الاندرويد حيث يسمح للهاتف المحمول أيضا بالوصول الى ما يريد و الهواتف يجب ان توافق على الاتفاقية .
اضافة مكتبة dotted_border داخل فلاتر
انقل الى ملف pubspec وقم بلصق الكود في المكان الصحيح له وهو يكون اسفل dependencies وتحديدا اسفل flutter ,
dotted_border: ^2.0.0وضع نقاط حول الصورة او اللوجو
اذا كنت تريد وضع نقاط خول الصور كما يظهر بالصورة التاليه يمكنك استخدام الكود التالي والذي يساعدك في عمل هذة الخطوة حيث تثوم بعمل الصور داخل DottedBorder وتقوم بإستدعائها داخل child .
DottedBorder(
color Colors.black,
strokeWidth 1,
child Icon(Icons.access_alarm , size 80,),
)
وضع خط منقط باستخدام DottedBorder
اذا كنت ترغب بعمل خط منقط كما يظهر بالصورة بالابعاد التي تريدها يمكنك استخدام الكود التالي
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50.0),
child: DottedBorder(
color: Colors.grey.shade400,
dashPattern: [15,15],
padding: EdgeInsets.all(0),
child: Container(),
),
)
في النهايه نتمنى ان تكون المقالة مفيده لكم ونتمنى ان نراكم مجددا في المقالات القادمه ولمزيد من الاكواد والشروحات في لغة دارات وتقنية فلاتر تحديدا يمنكم الانتقال الى القسم الخاص بها في الموقع وسوف تشاهد الكثير من الاكواد والشروحات في هذة اللغة .
- اضافة BottomSheet الى تطبيقك في Flutter بسهوله
- شرح استخدام Reusable Components في Flutter واهميته
- اضافة صور وملحقات خارجية الى Flutter والتعامل معها في التطبيق
- كيفية اضافة الوان مختلفة في Flutter وتحسين شكل التطبيق
