شرح FloatingActionButton في Flutter وكيفية عمل Custom FloatingActionButton

Ahmed Mahmoud

اخر تحديث :

شرح FloatingActionButton في Flutter وكيفية عمل Custom FloatingActionButton

كما نعلم ان الFloatingActionButton يعد واحد من اهم العناصر التي يتم استخدامها بشكل كبير في التطبيقات ولهذا نشارك معكم في مقالة اليوم كيف تقوم بإنشاء FloatingActionButton بشكل مخصص بمعنى سوف تكون المتحكم في جميع تفاصيل هذا الwidget والامر بسيط جدا ولن نحتاج الى مكتبات خارجية لتنفيذ هذة العملية الامر بسيط كل ما عليك فقط هو متابعة المقالة الى النهايه وسوف تكون قادر على انشاء FloatingActionButton بشكل مخصص ومختلف والتحكم في جميع تفاصيله بسهوله .

Flutter عبارة عن مجموعة أدوات Google UI لإنشاء تطبيقات جميلة ومصممة محليًا للجوال (Android و iOS) وسطح المكتب (Linux و Mac و Windows و Google Fuchsia) والويب من قاعدة بيانات واحدة ، وفقًا للمسؤول. تم إطلاق الإصدار الأصلي من Flutter ، الذي يحمل الاسم الرمزي "Sky" ، في عام 2015 في Dart Developer Summit وتم تشغيله فقط على نظام التشغيل Android. تم إصدار Flutter 1.0 ، أول إصدار "ثابت" من Framework ، في الحدث يوم 4 ديسمبر 2018. تتوفر إعلانات وتحديثات Flutter Live للعرض (بث مباشر)

التحكم في عناصر الFloatingActionButton

اذا كنت ترغب في تصميم الشكل الموجود بالصورة التاليه يمكنك استخدام الكود التالي , حيث اننا نقوم بوضع ايقونة وخلفية للزر وبعدها قمنا بعمل shape لعمل border بشكل دائري وبعدها قمنا بعمل side على الborder باللون الاسود بمقدار 2 لكي يحيط بالwidget ليظهر كما هو موضح بالصورة .

FloatingActionButton .dart

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.notifications),
        onPressed: (){},
        backgroundColor: Colors.redAccent,
        // color of icon
        foregroundColor: Colors.black54,
        shape: const RoundedRectangleBorder(
          // rounded
          borderRadius:BorderRadius.all(Radius.circular(15)),
          // border side
          side: BorderSide(color: Colors.black54 , width: 2),
        ),
      ),
      body: Container()
    );
  }

إنشاء FloatingActionButton مخصص

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

FloatingActionButton custom

class FolatingCustom extends ShapeBorder {
  @override
  // TODO: implement dimensions
  EdgeInsetsGeometry get dimensions => throw UnimplementedError();

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
    // TODO: implement getInnerPath
    return getOuterPath(rect, textDirection: textDirection);
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    // path.. = v = path() -> v.mpveTo
    return Path()..moveTo(rect.left+rect.width / 2.0 , rect.top)
        ..lineTo(rect.right, rect.top+rect.height / 2.0)
        ..lineTo(rect.left + rect.width / 2.0, rect.bottom)
        ..lineTo(rect.left, rect.top + rect.height / 2.0)
        ..close();
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {

  }

  @override
  ShapeBorder scale(double t) {
    // TODO: implement scale
    throw UnimplementedError();
  }

}

تغير موقع ووضع تصميم مخصص للFloatingActionButton

في هذه المرحلة قمنا بوضع الshpe عباره عن التصميم السابق ليظهر كما هو موضح بالصورة , وقمنا بتغيير الموقع ليظهر بالمنتصف كما هو موضح في الامر floatingActionButtonLocation .

location&design.dart

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerTop,
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.notifications),
        onPressed: (){},
        backgroundColor: Colors.redAccent,
        // color of icon
        foregroundColor: Colors.black54,
        shape: FolatingCustom()
      ),
      body: Container()
    );
  }
}