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

أزرار الأيقونات

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

بعض الأزرار لا تحتوي إلا على أيقونة: قلب، أو سلة مهملات، أو سهم مشاركة. وهذا هو IconButton:

IconButton(
  icon: Icon(Icons.delete),
  onPressed: () {
    print('Deleted');
  },
)

ليس له child:. بل يأخذ icon: بدلًا منه، وهي عنصر واجهة المستخدم Icon نفسه الذي استخدمته في القسم الأول. يؤدي النقر إلى ظهور تموّج دائري حول الأيقونة.

لا يمكن النقر على عنصر Icon عادي؛ فهو يرسم صورة فحسب. يحوّله IconButton إلى شيء يمكنك الضغط عليه.

challenge icon

التحدي

سهل

بعد النص Like this post، أضف IconButton مع Icons.thumb_up ليطبع Liked عند الضغط عليه.

جرّب بنفسك

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: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Like this post'),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

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

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

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