زر الإجراء العائم
جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 5 من 34.
تحتوي العديد من التطبيقات على زر دائري واحد يطفو في الزاوية السفلية اليمنى: رسالة جديدة، أو ملاحظة جديدة، أو صورة جديدة. يطلق عليه Flutter اسم FloatingActionButton.
لا يوضع داخل body. يحتوي Scaffold على موضع خاص به، بجوار appBar: وbody::
Scaffold(
body: ...,
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.edit),
),
)يضعه Scaffold في الزاوية ويبقيه فوق كل العناصر الأخرى على الشاشة. وعادةً ما يكون child: الخاص به عبارة عن 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'),
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس إضافة التفاعلية
1الأزرار
زرّك الأولالطباعة في وحدة التحكمالأزرار النصية والمحددة بإطارأزرار الأيقوناتزر الإجراء العائم7مفاتيح التبديل وشرائح التمرير
التشغيل والإيقاف باستخدام مفتاححدّد مربع الاختياراختر قيمة باستخدام شريط التمريرتدرّب بنفسك: مترجم Flutter عبر الإنترنت