تصميم Container مخصص في Flutter
في هذا المقال سوف نقوم بتخيصيص شكل معين لل Container في فلاتر حتى يظهر للمستخدم بشكل مختلف مثل الايقونات الخاصه باجهزة السامسونج نلاحظ ان العناصر تحتوي على Container ولكنها بشكل مختلف قليلا وفي هذه المقالة سوف نشارك معكم الشكل الذي يوجد باخلها حتى تتمكن من استخدامه في تطبيقك بدون اي مشاكل تماما وبدون تعقيد وسوف نقوم بشرح كيف تقوم بتوليد اي شكل مخصص ترغب به في تطبيقك بفلاتر بدون اي مشاكل وكل هذا يكون من خلال هذه المقالة
ما الذي يجعل Flutter فريدًا جدًا؟ تعد القدرة على تطوير تطبيقات عبر الأنظمة الأساسية من قاعدة بيانات واحدة هي الجانب الأول منها. وهذا يعني أنه لا يلزم إنشاء تطبيقات الويب والجوال وسطح المكتب المميزة. باستخدام Flutter ، ظهرت أداة واحدة تسهل إنشاء التطبيقات. 19 أغسطس 2022
العيب الرئيسي لـ Flutter هو لغة التنفيذ ،
Dart. إذا كنت تدير بيئات استضافة Google عبر الإنترنت أو الخلفية ، فإن Dart هي إحدى اللغات التي يمكنك استخدامها. وهذا في الأساس كل شيء.
تصميم Container مخصص في Flutter مثل مظهر الايقونات على هاتفك
في هذا التصميم قمنا بعمل حجم معين لل Container حتى يظهر بالشكل المخصص والذي قمنا بتصميمه عن طريق paint وايضا يوجد موقع يمكنك من خلاله تنفيذ التصميم الذي ترغب به من خلاله ويولد لك الكود تقوم بنسخه ولصقه لديك كما هو موضح بالكود التالي في paint حيث ان هذا هو الكود الذي يتم توليده لك والذي يمكنك استخدامه في تطبيقك .
ui.dart
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Custom Scroll List'),
backgroundColor:Colors.black,
),
body: Padding(
padding: const EdgeInsets.all(15.0),
child: Center(
child:
ClipPath(
clipper: CustomClipPath(),
child: Container(
height: 300,
width: 300,
child: Image.network(listModel[3].photo, fit: BoxFit.cover,),
),
)
),
)
);
}
}
class CustomClipPath extends CustomClipper<Path> {
@override
Path getClip(Size size) {
// you can use : https://shapemaker.web.app
// design your path and get the path code and best here .
Path path0 = Path();
path0.moveTo(size.width*0.1666667,size.height*0.1650000);
path0.quadraticBezierTo(size.width*0.0195833,size.height*0.5187500,size.width*0.1650000,size.height*0.8300000);
path0.quadraticBezierTo(size.width*0.5333333,size.height*1.0012500,size.width*0.8316667,size.height*0.8316667);
path0.quadraticBezierTo(size.width*0.9958333,size.height*0.5183333,size.width*0.8333333,size.height*0.1666667);
path0.quadraticBezierTo(size.width*0.5037500,size.height*0.0116667,size.width*0.1666667,size.height*0.1650000);
path0.close();
return path0;
// canvas.drawPath(path0, paint0);
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
