Menu
CoddyTech
flag Ar iconالعربيةdown icon

زر الإجراء العائم

جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 5 من 34.

تحتوي العديد من التطبيقات على زر دائري واحد يطفو في الزاوية السفلية اليمنى: رسالة جديدة، أو ملاحظة جديدة، أو صورة جديدة. يطلق عليه Flutter اسم FloatingActionButton.

لا يوضع داخل body. يحتوي Scaffold على موضع خاص به، بجوار appBar: وbody::

Scaffold(
  body: ...,
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.edit),
  ),
)

يضعه Scaffold في الزاوية ويبقيه فوق كل العناصر الأخرى على الشاشة. وعادةً ما يكون child: الخاص به عبارة عن Icon.

challenge icon

التحدي

سهل

أضِف إلى Scaffold زر إجراء عائمًا باستخدام Icons.add يطبع New note عند الضغط عليه.

جرّب بنفسك

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Text('No notes yet'),
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس إضافة التفاعلية

تدرّب بنفسك: مترجم Flutter عبر الإنترنت