في Flutter، يعد IconButton عنصر واجهة المستخدم الذي يتيح للمستخدم التفاعل مع التطبيق بسهولة. يتميز IconButton بالرموز الصغيرة التي تمثل إجراءً معينًا، مثل إضافة عنصر جديد أو حذف عنصر. يسمح لك Flutter بتخصيص 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 تساعد في تحسين تجربة المستخدم وجعل التطبيق أكثر تفاعلية وسهولة في الاستخدام. يجب على المطورين التركيز على تخصيص هذه العناصر بشكل جيد لتحسين تجربة المستخدم وجعل التطبيق أكثر جاذبية وسهولة في الاستخدام.