في Flutter، هناك العديد من الطرق لإضافة الظلال إلى عناصر واجهة المستخدم الخاصة بك. في هذا المنشور، سنتناول الطرق الشائعة لإضافة الظلال إلى عناصر واجهة المستخدم داخل تطبيقك. وسنلقي نظرة فاحصة أيضًا على الخصائص التي تتحكم في كيفية ظهور الظلال حتى تتمكن من إنشاء تأثير الظل المثالي.
جدول المحتويات
إضافة الظلال إلى الحاوية
- استخدم فئة BoxDecoration لإضافة الظلال إلى عناصر واجهة المستخدم في Flutter
- استكشاف فئة BoxShadow
1. BlurRadius
2. أسلوب التمويه
3. اللون
4. الإزاحة
5. انتشار نصف القطر
- استخدام عناصر واجهة المستخدم المتعددة BoxShadow لإضافة الظلال في Flutter
- إضافة الظلال إلى الأدوات الأخرى
- تغليف عناصر واجهة المستخدم باستخدام حاوية لإضافة الظلال في Flutter
- خاتمة
إضافة الظلال إلى الحاوية
سنبدأ بإضافة ظل إلى إحدى الأدوات الأكثر استخدامًا في Flutter: Containerالأداة. أولاً، قمنا بإعداد تطبيق بسيط داخل ملفنا main.dartيعرض Containerأداة مركزية بلون خلفية أزرق.
CMD...
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(
home: Scaffold(
body: Center(
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: const SizedBox.shrink(),
),
),
),
);
}
}
CMD.....
عندما نقوم بتشغيل main.dartالملف، سوف ترى لونًا أزرقًا Containerمعروضًا في وسط الشاشة.
الآن دعونا ننتقل إلى القسم التالي حيث سنقوم بتطبيق الظلال على Containerالأداة.
استخدم فئة BoxDecoration لإضافة الظلال إلى عناصر واجهة المستخدم في Flutter
Containerيمكن إضافة الظلال إلى عنصر واجهة مستخدم في Flutter باستخدام BoxDecorationالفئة. تتيح لك هذه الفئة تخصيص Containerمظهر عنصر واجهة المستخدم، بما في ذلك الظلال.
CMD...
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(
home: Scaffold(
body: Center(
child: Container(
width: 200,
height: 200,
decoration: const BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
blurRadius: 25,
blurStyle: BlurStyle.normal,
color: Colors.black,
offset: Offset.zero,
spreadRadius: 2,
),
],
),
),
),
),
);
}
}
CMD.....
في الكود أعلاه، استبدلنا colorخاصية the Containerبالخاصية decoration. داخل decorationالخاصية، نستخدم BoxDecorationمثيلًا. BoxDecorationيسمح لنا المثيل بتعيين لون الخلفية وإضافة تأثير ظل إلى Container.
داخل BoxDecorationالمثيل، قمنا بتعيين colorsالخاصية إلى Colors.white، والخاصية boxShadowإلى قائمة تحتوي على BoxShadowمثيل واحد لإضافة ظل. BoxShadowيأخذ المثيل الخصائص التالية:
- blurRadius:يحدد عدم وضوح الظل. تؤدي القيمة الأعلى إلى إنشاء ظل أكثر نعومة.
- blurStyle:يحدد نمط التمويه المطبق على الظل. في هذه الحالة، يتم ضبطه على تمويه عادي.
- color:تعيين لون الظل إلى اللون المحدد، والذي في هذا المثال تم تعيينه إلى اللون الأسود.
- offset:يحدد موضع الظل. هنا، Offset.zeroيعني أن الظل يقع مباشرة أسفله Containerدون أي إزاحة في أي اتجاه.
- spreadRadius:يتحكم في مدى انتشار الظل من حواف Container.
عندما نقوم بتشغيل التطبيق، سوف ترى لونًا أبيض Containerمع ظل داكن حوله.
في القسم القادم من هذه التدوينة، سنلقي نظرة عن كثب على كل خاصية من خصائص BoxShadowالفئة.
استكشاف فئة BoxShadow
لقد تعلمنا حتى الآن أن هذه BoxShadowالفئة تسمح لنا بإنشاء تأثيرات ظلية Containerللأدوات. BoxShadowوتوفر هذه الفئة الكثير من التخصيصات. دعنا نستعرض خيارات التخصيص لنرى ما يمكننا تحقيقه باستخدامها.
1. BlurRadius
تتحكم الخاصية blurRadiusفي مدى ضبابية الظل. تؤدي القيمة الأكبر، مثل 100، إلى إنشاء ظل أكثر نعومة ووضوحًا. وعلى العكس من ذلك، يؤدي تعيين blurRadiusإلى إلى إلى 0إنشاء ظل ذو حواف حادة.
CMD...
BoxShadow(
blurRadius: 100,
blurStyle: BlurStyle.normal,
color: Colors.black,
offset: Offset.zero,
spreadRadius: 2,
),
CMD.....
في هذا المثال، قمنا بتعيين الخيار blurRadiusإلى 100لجعل الظل ناعمًا للغاية وأكثر انتشارًا.
2. أسلوب التمويه
تعرف الخاصية blurStyleالموجودة في BoxShadowالفصل على نمط التمويه المطبق على الظل.
CMD...
BoxShadow(
blurRadius: 100,
blurStyle: BlurStyle.solid,
color: Colors.black,
offset: Offset.zero,
spreadRadius: 2,
),
CMD.....
في الكود أعلاه، نستخدم BlurStyle.solid، والذي ينشئ ظلًا صلبًا وحاد الحواف.
3. اللون
تسمح لنا الخاصية colorالموجودة في BoxShadowالفصل بتحديد لون الظل.
CMD...
BoxShadow(
blurRadius: 100,
blurStyle: BlurStyle.solid,
color: Colors.blue,
offset: Offset.zero,
spreadRadius: 2,
),
CMD.....
في هذا الكود، قمنا بتغيير colorإلى Colors.blue، مما سيؤدي إلى تحويل الظل إلى اللون الأزرق. يمكنك استخدام أي لون تريده، أو حتى التدرجات اللونية للحصول على تأثيرات أكثر إبداعًا.
4. الإزاحة
تحدد الخاصية offsetالموجودة في BoxShadowالفصل موضع الظل بالنسبة للأداة.
CMD...
BoxShadow(
blurRadius: 100,
blurStyle: BlurStyle.solid,
color: Colors.blue,
offset: Offset(25, 25),
spreadRadius: 2,
),
CMD.....
في هذه الحالة، قمنا بتعيين القيمة offsetإلى Offset(25, 25)، وهذا من شأنه تحريك وحدات بكسل الظل 25إلى اليمين ووحدات 25بكسل أسفل الأداة. وهذا من شأنه أن يخلق تأثير ظل يعطي انطباعًا بأن الضوء قادم من الاتجاه العلوي الأيسر.
يمكننا أيضًا استخدام القيم السلبية لتحريك الظل في الاتجاه المعاكس.
CMD...
BoxShadow(
blurRadius: 100,
blurStyle: BlurStyle.solid,
color: Colors.blue,
offset: Offset(-25, -25),
spreadRadius: 2,
),
CMD.....
في الوقت الحالي، قمنا بتغيير offsetإلى Offset(-25, -25)، وهذا من شأنه أن يحرك وحدات بكسل الظل 25إلى اليسار 25والبكسلات الموجودة أعلى الأداة. ويعطي هذا التغيير انطباعًا بأن الضوء قادم من الاتجاه السفلي الأيمن.
5. انتشار نصف القطر
تحدد الخاصية spreadRadiusالموجودة في BoxShadowالفصل مدى انتشار الظل من حدود الأداة.
CMD...
BoxShadow(
blurRadius: 100,
blurStyle: BlurStyle.solid,
color: Colors.blue,
offset: Offset.zero,
spreadRadius: 50,
),
CMD.....
في هذا المثال، قمنا بتعيين spreadRadiusإلى 50، مما يعني أن الظل سيمتد 50بكسلًا من حواف الأداة.
استخدام عناصر واجهة المستخدم المتعددة BoxShadow لإضافة الظلال في Flutter
ربما لاحظت أن boxShadowخاصية الفصل BoxDecorationتأخذ قائمة من BoxShadowالحالات. وهذا يعني أنه يمكنك تطبيق ظلال متعددة.
CMD...
Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
blurRadius: 5,
color: Colors.blue.withOpacity(0.8),
offset: const Offset(5, 5),
spreadRadius: 5,
),
BoxShadow(
blurRadius: 5,
color: Colors.green.withOpacity(0.8),
offset: const Offset(-5, -5),
spreadRadius: 5,
),
],
),
),
CMD.....
في مقتطف التعليمات البرمجية هذا، أضفنا مثيلين BoxShadowداخل boxShadowالخاصية. كل مثيل له لون مختلف، وواحد له إزاحة موجبة بينما الآخر له إزاحة سالبة. يؤدي هذا إلى إنشاء ظل حول Containerالأداة بألوان متعددة.
إضافة الظلال إلى الأدوات الأخرى
حتى الآن، نقوم بإنشاء ظلال باستخدام Containerالأداة مع BoxDecorationالفصل. تحتوي بعض الأدوات أيضًا على ظلال افتراضيًا ويمكن تعديلها بسهولة باستخدام الخصائص. خذ Cardالأداة كمثال.
CMD...
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: Card(
color: Colors.blue,
elevation: 20,
shadowColor: Colors.black,
child: SizedBox(
width: 200,
height: 200,
),
),
),
),
);
}
}
CMD.....
في هذا الكود، نستخدم Cardعنصر واجهة المستخدم ذي الخلفية الزرقاء. ونضبط elevationto 20لجعل الظل أكثر بروزًا، و shadowColorto Colors.blackلجعل الظل داكنًا.
كما ترى، فإن تغيير الظل على Cardالأداة بسيط! ومع ذلك، BoxShadowفإن الطريقة أكثر مرونة. لحسن الحظ، في معظم الحالات، يمكنك تغليف أدواتك باستخدام Containerأداة، وسنتناول المزيد حول هذا في القسم التالي.
تغليف عناصر واجهة المستخدم باستخدام حاوية لإضافة الظلال في Flutter
في الحالات التي لا تكون فيها الظلال المحددة مسبقًا كافية، يمكنك تغليف الأداة باستخدام Containerأداة وتطبيق ظل مخصص BoxDecoration، كما تمت مناقشته سابقًا.
CMD...
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(
home: Scaffold(
body: Center(
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 25,
blurStyle: BlurStyle.normal,
color: Colors.grey.withOpacity(0.5),
offset: Offset.zero,
spreadRadius: 25,
),
],
),
child: const Card(
color: Colors.blue,
child: SizedBox(
width: 200,
height: 200,
),
),
),
),
),
);
}
}
CMD.....
في مقتطف التعليمات البرمجية هذا، قمنا بتغليف Cardالأداة باستخدام Containerأداة. ومن خلال القيام بذلك، يمكننا تطبيق تأثير ظل مخصص على البطاقة باستخدام BoxShadowالفئة. هنا، قمنا بإنشاء ظل مع a blurRadiusof 25وa blurStyleof BlurStyle.normalوa colorof grey مع تعتيم 0.5وan offsetof Offset.zeroوa spreadRadiusof 25.
لقد قمنا أيضًا بإزالة الخاصيتين elevationand shadowColorمن Cardالأداة للتأكد من أن الظل المخصص وظل البطاقة الافتراضي لا يتداخلان مع بعضهما البعض.
خاتمة
عندما يتعلق الأمر بـ Flutter، فهناك العديد من الطرق لإضافة الظلال إلى عناصر واجهة المستخدم الخاصة بك. يمكنك دائمًا استخدام Containerعنصر واجهة المستخدم مع BoxDecorationالفئة. تحتوي بعض عناصر واجهة المستخدم أيضًا على ظلال محددة مسبقًا يمكن تغييرها باستخدام الخصائص.
