تصميم bottomBar عن طريق الPainter في Flutter
في هذا الدرس نقدم لكم تصميم جديد للbottomBar من خلال fluttert حيث يمكنك من خلال هذا الدرس تصميم الشكل الذي ترغب به من خلال استخدام اداة painter والتي تمكنك من الرسم في التصميم الخاص بك وفي هذا المقالة سوف نقوم بتصميم bottomBar متميز لتطبيقك , يمكنك استخدام التصميم الحالي او التعديل في التصميم للوصول الى الهدف الذي ترغب به في نهايه الامر القرار يرجع لك .
أداة بناء الواجهة التي تستخدم Dart تسمى flutter. من الممكن أيضًا وصفه بأنه إطار عمل Google UI. بالإضافة إلى ذلك ، فهو يستهدف منصات سطح المكتب والجوال وعبر الإنترنت بقاعدة كود واحدة. إحدى ميزاته هو مترجم Dart الأصلي الذي ينتج برامج ARM المحسّنة للأجهزة. هناك العديد من المزايا لاستخدام Flutter كمنصة لإنشاء تطبيقات الهاتف المحمول. تم إدراج أفضل 4 منصات لمساعدتك في اختيار النظام الأفضل لك: يضمن Flutter أداءً خاليًا من الأخطاء وعرضًا موحدًا لجميع الأنظمة التي تدعمه عندما تفشل واجهة المستخدم الأصلية جزئيًا أو كليًا في العرض أو تفتقد بعض الوظائف. تتضمن بعض الأمثلة الأفضل Insight Timer و Stadia و Reflect وبعض خدمات Google ، مثل إعلانات Google.
How to create bootmBar by using Painter in Flutter
لو تلاحظ سوف تجد ان الكود التالي مقسوم لجزين الجزء الاول وهو لعرض التصميم كما هو متعارف عليه والنص الاخر من المقال هو للتصميم الخاص بالشكل الذي نرغب بعرضه وعند النقر على كل عنصر يمكنك تغيير الصفحة او حتى تنفيذ امر معين في النهايه القرار بين يديك ويمكنك تنفيذ ما تريد .
ui.dart
class FullPage extends StatefulWidget {
FullPage({Key? key}) : super(key: key);
@override
State<FullPage> createState() => _FullPageState();
}
class _FullPageState extends State<FullPage> with TickerProviderStateMixin {
int currentIndex = 0;
String tv = 'test';
setBottomBarIndex(index) {
setState(() {
currentIndex = index;
switch (index) {
case 0:
tv = 'home';
break;
case 1:
tv = 'food';
break;
case 2:
tv = 'save';
break;
case 3:
tv = 'notification';
break;
default:
tv = 'test';
break;
}
});
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.white10,
appBar: AppBar(
backgroundColor: Colors.white24,
title: Text(tv),
),
body: Stack(
children: [
Positioned(
bottom: 0,
left: 0,
child: Container(
width: size.width,
height: 80,
// color: Colors.white,
child: Stack(
children: [
CustomPaint(
size: Size(size.width, 80),
painter: BNBCustomPainter(),
),
Center(
heightFactor: 0.6,
child: FloatingActionButton(
backgroundColor: Colors.orange,
child: Icon(Icons.add),
elevation: 0.1, onPressed: () {}
),
),
Container(
width: size.width,
height: 80,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
icon: Icon(
Icons.home,
color: currentIndex == 0 ? Colors.orange : Colors.grey.shade400,
),
onPressed: () {
setBottomBarIndex(0);
},
splashColor: Colors.white,
),
IconButton(
icon: Icon(
Icons.restaurant_menu,
color: currentIndex == 1 ? Colors.orange : Colors.grey.shade400,
),
onPressed: () {
setBottomBarIndex(1);
}),
Container(
width: size.width * 0.20,
),
IconButton(
icon: Icon(
Icons.bookmark,
color: currentIndex == 2 ? Colors.orange : Colors.grey.shade400,
),
onPressed: () {
setBottomBarIndex(2);
}),
IconButton(
icon: Icon(
Icons.notifications,
color: currentIndex == 3 ? Colors.orange : Colors.grey.shade400,
),
onPressed: () {
setBottomBarIndex(3);
}),
],
),
),
],
),
)),
],
),
);
}
}
class BNBCustomPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()..color = Colors.white..style = PaintingStyle.fill;
Path path = Path()..moveTo(0, 20);
//design right
path.quadraticBezierTo(size.width*0.20, 0, size.width*0.35, 0);
path.quadraticBezierTo(size.width*0.40, 0, size.width*0.40, 20);
// circle
path.arcToPoint(Offset(size.width*0.60, 20), radius: Radius.circular(10),clockwise: false);
//design left
path.quadraticBezierTo(size.width*0.60, 0, size.width*0.65, 0);
path.quadraticBezierTo(size.width*0.80, 0, size.width, 20);
// fill color
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.close();
canvas.drawShadow(path, Colors.black , 5 , true);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
