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

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

ما هو InkWell في فلاتر؟

InkWell هو عنصر تحكم في واجهة المستخدم في Flutter يسمح للمستخدمين بالتفاعل مع العناصر. يتميز InkWell بأنه يضيف تأثيرات مفعمة بالحيوية والحركة عندما يقوم المستخدم بالنقر على العنصر، مما يجعل التفاعل مع التطبيق أكثر إثارة للاهتمام.

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

خصائص InkWell

تحتوي InkWell على عدد من الخصائص التي يمكن تعديلها لتحقيق السلوك المطلوب. فيما يلي تفاصيل كل خاصية:

onTap

هي دالة تستدعى عندما يتم النقر على العنصر.

InkWell(
  onTap: () {
    print('Button tapped!');
  },
  child: Text('Button'),
),

borderRadius

هي شكل زاوية وحواف العنصر.

InkWell(
  borderRadius: BorderRadius.circular(8),
  onTap: () {
    print('Button tapped!');
  },
  child: Text('Button'),
),

splashColor

هي لون التأثير الذي يظهر عند النقر على العنصر.

InkWell(
  splashColor: Colors.blue,
  onTap: () {
    print('Button tapped!');
  },
  child: Text('Button'),
),

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

highlightColor

هي لون التأثير الذي يظهر عند تمييز العنصر.

InkWell(
  highlightColor: Colors.blue,
  onTap: () {
    print('Button tapped!');
  },
  child: Text('Button'),
),

child

هو العنصر الذي يتم عرضه في InkWell.

InkWell(
  onTap: () {
    print('Button tapped!');
  },
  child: Text('Button'),
),

enableFeedback

هي قيمة منطقية تحدد ما إذا كان InkWell يعرض تعليقًا عند النقر عليه.

InkWell(
  enableFeedback: true,
  onTap: () {
    print('Button tapped!');
  },
  child: Text('Button'),
),

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

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

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'InkWell Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InkWell Example'),
        ),
        body: Center(
          child: InkWell(
            enableFeedback: false,
            onTap: () {
              print('Button tapped!');
            },
            borderRadius: BorderRadius.circular(8),
            splashColor: Colors.blue,
            child: Container(
              padding: const EdgeInsets.all(12),
              child: const Text('Button'),
            ),
          ),
        ),
      ),
    );
  }
}

في هذا المثال، يتم إنشاء عنصر تحكم InkWell يحتوي على نص “Button”. تم تعيين دالة onTap لتنفيذ أي عملية تريدها المطور عند النقر على الزر. تم تعيين BorderRadius لتحديد شكل زوايا الزر. تم تعيين لون التأثير عند النقر على الزر splashColor كلون أزرق. تم وضع النص داخل عنصر Container لإضافة تباعد بين النص وحواف الزر.

يتم إنشاء التطبيق باستخدام MaterialApp و Scaffold. تم إنشاء AppBar ووضعها في Scaffold. يتم وضع InkWell في وسط Scaffold باستخدام ويدجت Center.

عند تشغيل التطبيق، سيتم عرض زر “Button” الذي يستجيب للنقر ويتضمن تأثيرًا مفعمًا بالحيوية والحركة عند النقر عليه. عند النقر على الزر، سيتم طباعة “Button tapped!” في وحدة تحكم الإخراج كونسول.

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

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