By using this site, you agree to the Privacy Policy and Terms of Use.
موافق
عرب فلاترعرب فلاتر
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
قراءة: شرح استخدام ويدجت IconButton في فلاتر
شارك
تسجيل الدخول
إشعار أظهر المزيد
Aa
عرب فلاترعرب فلاتر
Aa
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
Search

أقسام الموقع

استكشف جميع أقسام الموقع
قسم Dart في موقع عرب فلاتر

Dart

59 مقالات
قسم Widgets في موقع عرب فلاتر

Widgets

104 مقالات
قسم Packages في موقع عرب فلاتر

Packages

19 مقالات
قسم Tutorials في موقع عرب فلاتر

Tutorials

22 مقالات

أخر المواضيع

استكشف أخر المواضيع المنشورة
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا

5
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials

حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر

10
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials

أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات

18
لديك حساب موجود؟ تسجيل الدخول
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
عرب فلاتر > Widgets > شرح استخدام ويدجت IconButton في فلاتر
Widgets

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

عبدالله يوسف
أخر تحديث 2024/11/15
بواسطة عبدالله يوسف اضف تعليق 5 دقيقة للقراءة 2268 مشاهدات 4
شارك
شرح استخدام ويدجت IconButton في فلاتر
شرح استخدام ويدجت IconButton في فلاتر
شارك

خدماتنا البرمجية – عرب فلاتر🚀

خدماتنا البرمجية – عرب فلاتر

في Flutter، يعد IconButton عنصر واجهة المستخدم الذي يتيح للمستخدم التفاعل مع التطبيق بسهولة. يتميز IconButton بالرموز الصغيرة التي تمثل إجراءً معينًا، مثل إضافة عنصر جديد أو حذف عنصر. يسمح لك Flutter بتخصيص IconButton بسهولة باستخدام مجموعة من الخصائص.

المحتويات
خصائص IconButtonicononPressedtooltipcolorsplashColorhighlightColordisabledColoriconSizepaddingمثال على استخدام IconButton في فلاتر

خصائص IconButton

icon

تتحكم خاصية icon في الرمز الذي يتم عرضه داخل IconButton. يمكن استخدام الرموز المدمجة في Flutter، مثل Icons.add، أو يمكن استخدام الرموز المخصصة الخاصة بالتطبيق.

IconButton(
  icon: Icon(Icons.add),
  onPressed: () {},
),

onPressed

يستخدم onPressed لتحديد الإجراء الذي يتم تنفيذه عند النقر على IconButton. يمكن استخدامه للقيام بأي عملية مخصصة، مثل إضافة عنصر جديد أو حذف عنصر.

IconButton(
  icon: Icon(Icons.add),
  onPressed: () {
    // Add new item
  },
),

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

tooltip

يستخدم tooltip لإضافة نص توضيحي لIconButton. يتم عرض هذا النص التوضيحي عندما يمر المستخدم بالفأرة فوق IconButton.

IconButton(
  icon: Icon(Icons.add),
  onPressed: () {
    // Add new item
  },
  tooltip: 'Add new item',
),

color

يتحكم color في لون الرمز داخل IconButton.

IconButton(
  icon: Icon(Icons.add),
  onPressed: () {
    // Add new item
  },
  color: Colors.blue,
),

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

splashColor

يتحكم splashColor في اللون الذي يظهر عند النقر على IconButton.

IconButton(
  icon: Icon(Icons.add),
  onPressed: () {
    // Add new item
  },
  splashColor: Colors.blueAccent,
),

highlightColor

يتحكم highlightColor في لون التمييز الذي يظهر عند النقر على IconButton.

IconButton(
  icon: Icon(Icons.add),
  onPressed: () {
    // Add new item
  },
  highlightColor: Colors.blueGrey,
),

disabledColor

يتحكم disabledColor في لون IconButton عندما يكون غير فعالًا.

IconButton(
  icon: Icon(Icons.add),
  onPressed: null,
  disabledColor: Colors.grey,
),

iconSize

يتحكم iconSize في حجم الرمز داخل IconButton.

IconButton(
  icon: Icon(Icons.add),
  onPressed: () {
    // Add new item
  },
  iconSize: 32,
),

padding

يتحكم padding في التباعد بين الحواف الخارجية للرمز وحجم IconButton.

IconButton(
  icon: Icon(Icons.add),
  onPressed: () {
    // Add new item
  },
  padding: EdgeInsets.all(16),
),

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

هذا مثال على استخدام IconButton في Flutter:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Counter:',
              style: TextStyle(fontSize: 24),
            ),
            Text(
              '$_counter',
              style: const TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          IconButton(
            icon: const Icon(Icons.remove),
            onPressed: _decrementCounter,
          ),
          const SizedBox(width: 16),
          IconButton(
            icon: const Icon(Icons.add),
            onPressed: _incrementCounter,
          ),
        ],
      ),
    );
  }
}

في هذا المثال، يتم استخدام IconButton لزيادة وتقليل قيمة العداد. يتم استخدام onPressed لتحديد الإجراء الذي يتم تنفيذه عند النقر على IconButton. يتم استخدام الخاصية icon لتحديد الرمز المستخدم في IconButton. يتم استخدام الخاصية floatingActionButton لعرض الأزرار المستخدمة في الجزء السفلي من الشاشة.

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


إن IconButton هو عنصر واجهة المستخدم الذي يتيح للمستخدم التفاعل مع التطبيق بسهولة في Flutter. يتيح لك Flutter تخصيص IconButton بسهولة باستخدام مجموعة من الخصائص المختلفة، مثل icon و onPressed و tooltip و color وغيرها. يمكن استخدام هذه الخصائص لتحديد الرمز المستخدم، والإجراء الذي يتم تنفيذه عند النقر على IconButton، وإضافة نص توضيحي، وتحديد حجم الرمز والتباعد بين الحواف الخارجية للرمز وحجم IconButton.

عناصر واجهة المستخدم مثل IconButton تساعد في تحسين تجربة المستخدم وجعل التطبيق أكثر تفاعلية وسهولة في الاستخدام. يجب على المطورين التركيز على تخصيص هذه العناصر بشكل جيد لتحسين تجربة المستخدم وجعل التطبيق أكثر جاذبية وسهولة في الاستخدام.

Arab Flutter Community 🚀

انضم إلى مجتمع Arab Flutter
شارك هذا المقال
فيسبوك تويتر Whatsapp Whatsapp لينكد ان تلغرام نسخ الرابط
Avatar of عبدالله يوسف
بواسطة عبدالله يوسف Founder and CEO at ArabFlutter
تابع:
أنا عبدالله يوسف، مهندس مصري ومؤسس موقع عرب فلاتر، ملهم بشغف التكنولوجيا والإبداع. كمصمم مواقع ومبرمج تطبيقات موبايل باستخدام Flutter، أستمتع بخلق عوالم رقمية فريدة ومبتكرة. تتجلى مواهبي في تصميم وتطوير واجهات مستخدم تفاعلية، حيث يمزج الجانب الجمالي بالدقة الهندسية. ما يميزني هو إلمامي الواسع بتقنيات البرمجة والتصميم، ومقدرتي على تطوير تطبيقات متنوعة عبر منصات مختلفة. أعتبر نفسي مبدعًا وملتزمًا، حيث أسعى دائمًا لتحقيق تحسين مستمر في مهاراتي وتقنياتي. أستمتع بتحديات العمل الجماعي وأؤمن بأهمية الابتكار والتطور. بفضل إبداعي والتزامي، أسعى لتقديم حلول فعّالة تلبي توقعات العملاء وتفوق عن المألوف.
اترك تعليقا اترك تعليقا

اترك تعليقاً إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials
طريقة انشاء المجلدات باستخدام Dart
طريقة انشاء المجلدات باستخدام كود Dart تلقائيًا
Tutorials

مقالات ذات الصلة

اطلع على المزيد من المقالات المتعلقة بهذا الموضوع!
شرح استخدام ThemeData في فلاتر
Widgets

شرح استخدام ThemeData في فلاتر

37 2
شرح استخدام ويدجت SingleChildScrollView في فلاتر
Widgets

شرح استخدام SingleChildScrollView في فلاتر

26 1
شرح استخدام ويدجت WillPopScope في فلاتر
Widgets

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

19 1
شرح استخدام ويدجت RichText في فلاتر 
Widgets

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

20
شرح استخدام ويدجت TextButton في فلاتر
Widgets

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

20
شرح استخدام ويدجت OutlinedButton في فلاتر
Widgets

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

28 1
أظهر المزيد
شعار موقع عرب فلاتر شعار موقع عرب فلاتر

About US

Quick Links

  • خدماتنا
  • من نحن
  • اتصل بنا
  • اتفاقية استخدام
  • سياسة الخصوصية
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
adbanner
تم اكتشاف مانع إعلانات
مرحبًا، يرجى إيقاف مانع الإعلانات. الإعلانات تُساهم في دعم موقعنا وتغطية جزء من تكاليف الاستضافة وتطوير المحتوى. شكرًا لتفهمك ودعمك.
Okay, I'll Whitelist
Welcome Back!

Sign in to your account

هل نسيت كلمة المرور؟