شرح استخدام ويدجت FloatingActionButton في فلاتر

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

ما هو FloatingActionButton في فلاتر؟

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

“اقرأ أيضاً: شرح استخدام ويدجت IntrinsicHeight في فلاتر“

خصائص FloatingActionButton

تحتوي FloatingActionButton على العديد من الخصائص التي تسمح لنا بتخصيص شكلها وسلوكها. في هذا الدليل، سنستعرض جميع الخصائص ونشرح كيفية استخدامها بالتفصيل.

الخاصية heroTag

يستخدم هذا الخاصية لتحديد الوسم (Tag) الذي يتم استخدامه للمساعدة في عملية تحويل الشاشات. باستخدام هذا الوسم، يمكننا تحديد ما إذا كان نفس FloatingActionButton يجب أن يتم استخدامه في كل شاشة أم لا.

FloatingActionButton(
  heroTag: 'myHeroTag',
  onPressed: () {},
  child: Icon(Icons.add),
),

الخاصية onPressed

يتم استخدام هذه الخاصية لتحديد الوظيفة التي سيتم تنفيذها عند النقر على FloatingActionButton.

FloatingActionButton(
  onPressed: () {
    // Do something when FloatingActionButton is pressed
  },
  child: Icon(Icons.add),
),

الخاصية child

يتم استخدام هذه الخاصية لتحديد الرمز المستخدم لإظهار FloatingActionButton. يمكن استخدام أي عنصر واجهة مستخدم كطفل (child) في FloatingActionButton، مثل Icon أو Text أو Image.

FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
),

الخاصية backgroundColor

يتم استخدام هذه الخاصية لتحديد لون خلفية FloatingActionButton.

FloatingActionButton(
  onPressed: () {},
  backgroundColor: Colors.blue,
  child: Icon(Icons.add),
),

الخاصية foregroundColor

يتم استخدام هذه الخاصية لتحديد لون النص أو الرمز المستخدم في FloatingActionButton.

FloatingActionButton(
  onPressed: () {},
  foregroundColor: Colors.white,
  child: Icon(Icons.add),
),

“اقرأ أيضاً: شرح استخدام AnimatedPositioned في فلاتر“

الخاصية elevation

يتم استخدام هذه الخاصية لتحديد مستوى الارتفاع(elevation) لـ FloatingActionButton.

FloatingActionButton(
  onPressed: () {},
  elevation: 6,
  child: Icon(Icons.add),
),

الخاصية shape

يستخدم هذه الخاصية لتحديد شكل FloatingActionButton. يمكننا استخدام أشكال مختلفة مثل CircleBorder أو StadiumBorder أو RoundedRectangleBorder.

FloatingActionButton(
  onPressed: () {},
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  child: Icon(Icons.add),
),

الخاصية mini

يتم استخدام هذه الخاصية لجعل FloatingActionButton أصغر حجمًا.

FloatingActionButton(
  onPressed: () {},
  mini: true,
  child: Icon(Icons.add),
),

الخاصية isExtended

يتم استخدام هذه الخاصية لجعل FloatingActionButton ممتدًا عند الضغط عليه.

FloatingActionButton(
  onPressed: () {},
  isExtended: true,
  child: Icon(Icons.add),
),

الخاصية tooltip

يتم استخدام هذه الخاصية لتحديد النص الذي سيتم عرضه كتلميح (tooltip) عند الضغط على FloatingActionButton.

FloatingActionButton(
  onPressed: () {},
  tooltip: 'Add new item',
  child: Icon(Icons.add),
),

مثال على استخدام FloatingActionButton في فلاتر

في هذا المثال، سنستخدم FloatingActionButton لإضافة عنصر جديد إلى قائمة. سنستخدم خاصية onPressed لتحديد الوظيفة التي يجب تنفيذها عند الضغط على FloatingActionButton.

import 'package:flutter/material.dart';

void main() {
  runApp(MyListApp());
}

class MyListApp extends StatefulWidget {
  @override
  _MyListAppState createState() => _MyListAppState();
}

class _MyListAppState extends State<MyListApp> {
  final List<String> items = ['Item 1', 'Item 2', 'Item 3'];

  void _addItemToList() {
    setState(() {
      items.add('New Item');
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My List App'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _addItemToList,
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

في هذا المثال، قمنا بإنشاء تطبيق بسيط يعرض قائمة بعناصر ثابتة ويستخدم FloatingActionButton لإضافة عنصر جديد إلى القائمة. تم استخدام ListView.builder لإنشاء قائمة، وتم استخدام FloatingActionButton لإضافة زر الإضافة.

عند النقر على زر FloatingActionButton، يتم استدعاء الدالة _addItemToList التي تقوم بإضافة عنصر جديد إلى القائمة. تم استخدام setState لتحديث واجهة المستخدم وإعادة إنشاء ListView بعد إضافة العنصر الجديد.

أتمنى أن يكون هذا المثال مفيدًا لك في فهم كيفية استخدام FloatingActionButton في Flutter.

“اقرأ أيضاً: شرح استخدام ويدجت Visibility في فلاتر“

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