القائمة الرئيسية

الصفحات

كيفية عمل خط منقط ( dotted border ) في Flutter

كيفية عمل خط منقط ( dotted border ) في Flutter

كيفية عمل خط منقط ( dotted border ) في Flutter


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


الشرح في flutter متوفر بشكل كبير في الفترة الاخيره ويوجد الكثير من أدوات الذكية التي تساعد على انجاز الاعمال بشكل اسرع مثال على ذلك plugin مفتوحة المصدر التي تسهل علينا الكثير و ال دروس التي نحصل على معلومات مختلفة منها تقوينا في المجال , واذا كنت في البرمجة بسيط او بمحنى اخر الصفر في البرمجة فلا تقلق فسوف نساعدك على تطوير من نفسك داخل المجال وهو ببساطة عبارة عن مجموعة من الاوامر التي نكتبها تخرج لنا تطبيق الجوال وكل شيئ سيكون بشرح مفصل بإذن الله , وسوف نحاول تقديم كورس الفلاتر بشكل مجاني لكم وذلك بعد ان انتهينا في الاندرويد و التطبيق عليها ويجب عليك تعلمها فهي الاساس او native واغلب الشركات تحتاج الى application native  لذلك يجب عليك تعلم  code خام الاول .


الفلاتر تعمل على widgets بمعنى ان كل حالة او عنصر نطلق عليه widgets في flutter و طريقة الكود هنا مختلفة عن الاندرويد قليلا لتعلم تصميم واجة تحتاج الى كتابتها عن طريق الاكواد وهذا افضل للمطورين واصبح android developer يفضلها مثل انشاء button بشكل اسرع وبالنسبة للتعامل مع firebase تقريبا نفس الفكرة التي يعملها بها مطور الاندرويد حيث يسمح للهاتف المحمول أيضا بالوصول الى ما يريد و الهواتف يجب ان توافق على الاتفاقية .


اضافة مكتبة dotted_border داخل فلاتر


اضافة مكتبة 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


وضع خط منقط باستخدام DottedBorder


اذا كنت ترغب بعمل خط منقط كما يظهر بالصورة بالابعاد التي تريدها يمكنك استخدام الكود التالي 


Padding(
              padding: const EdgeInsets.symmetric(horizontal: 50.0),
              child: DottedBorder(
                color: Colors.grey.shade400,
                dashPattern: [15,15],
                padding: EdgeInsets.all(0),
                child: Container(),
              ),
            )
            


في النهايه نتمنى ان تكون المقالة مفيده لكم ونتمنى ان نراكم مجددا في المقالات القادمه ولمزيد من الاكواد والشروحات في لغة دارات وتقنية فلاتر تحديدا يمنكم الانتقال الى القسم الخاص بها في الموقع وسوف تشاهد الكثير من الاكواد والشروحات في هذة اللغة .


تعليقات

التنقل السريع