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

Flutter هي إطار عمل مفتوح المصدر تم إنشاؤها بواسطة شركة Google وتستخدم لتطوير تطبيقات الهواتف المحمولة والويب. توفر Flutter العديد من العناصر الواجهة المستخدمة لبناء واجهات مستخدم جميلة وديناميكية. واحدة من هذه العناصر هي ShaderMask، والتي تستخدم لتطبيق التأثيرات على العناصر في واجهة المستخدم.

ما هو ShaderMask؟

ShaderMask هو عنصر واجهة Flutter يستخدم لتطبيق تأثيرات مختلفة على العناصر في واجهة المستخدم باستخدام الوظيفة Shader. يمكن استخدام ShaderMask لتطبيق تأثيرات مثل الظلال والتدرجات والتأثيرات الأخرى على العناصر.

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

خصائص ShaderMask

تحتوي ShaderMask على مجموعة من الخصائص التي يمكن تعيينها لتحديد سلوك العنصر. يتم تفصيل الخصائص في الأسفل:

blendMode

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

blendMode: BlendMode.srcIn,

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

shaderCallback

وظيفة تستخدم لإنشاء Shader وتطبيقه على العنصر. يمكن تعيين هذه الخاصية عبر الكود التالي:

shaderCallback: (Rect bounds) {
  return LinearGradient(
    colors: [Colors.blue, Colors.red],
  ).createShader(bounds);
},

child

العنصر الذي يتم تطبيق ShaderMask عليه. يمكن تعيين هذه الخاصية عبر الكود التالي:

child: Container(
  height: 200,
  width: 200,
  color: Colors.white,
),

استخدام ShaderMask في Flutter

لإستخدام ShaderMask في تطبيقك، يجب أولاً استيراد العنصر من حزمة Flutter الرسمية. يمكنك القيام بذلك عن طريق إضافة السطر التالي إلى ملف الـdart الخاص بالشاشة التي تريد استخدام ShaderMask فيها:

import 'package:flutter/material.dart';

بعد ذلك، يمكن إنشاء ShaderMask وتعيين الخصائص اللازمة للعنصر. يمكن استخدام الكود التالي كنموذج لإستخدام ShaderMask:

ShaderMask(
  blendMode: BlendMode.srcIn,
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.blue, Colors.red],
    ).createShader(bounds);
  },
  child: Container(
    height: 200,
    width: 200,
    color: Colors.white,
  ),
),

في هذا المثال، يتم إنشاء ShaderMask ويتم تعيين الخاصية blendMode لتحديد كيفية خلط الألوان في التأثير المطبق على العنصر. كما يتم استخدام وظيفة shaderCallback لإنشاء Shader وتطبيقه على العنصر المحدد، ويتم استخدام الخاصية child لتحديد العنصر الذي يتم تطبيق ShaderMask عليه.

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

تتيح ShaderMask في Flutter إمكانية تطبيق التأثيرات على العناصر في واجهة المستخدم باستخدام الوظيفة Shader. يمكن استخدام ShaderMask لتطبيق تأثيرات مثل الظلال والتدرجات والتأثيرات الأخرى على العناصر. تحتوي ShaderMask على مجموعة من الخصائص التي يمكن تعيينها لتحديد سلوك العنصر، مثل blendMode وshaderCallback وchild. يمكن استخدام ShaderMask بسهولة في تطبيقات Flutter وتطبيق التأثيرات المختلفة على العناصر في واجهة المستخدم.