تصميم bottomBar عن طريق الPainter في Flutter

تصميم bottomBar عن طريق الPainter في Flutter

تصميم 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


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


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;
  }
}


تعليقات