استخدام أداة SnackBar في Flutter
على الرغم من أن SnackBarالأداة لا تحتوي على طريقة سهلة للعرض في الجزء العلوي من الشاشة، لا يزال هناك نهج واحد يمكننا اتباعه لتحقيق ذلك.
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: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () => ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
backgroundColor: Colors.orange,
content: const Text(
'You have a new message.',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
),
behavior: SnackBarBehavior.floating,
margin: EdgeInsets.only(
bottom: MediaQuery.sizeOf(context).height * 0.91,
left: 10,
right: 10,
),
),
),
child: const Text('Show Snackbar'),
),
),
);
}
}
في مقتطف التعليمات البرمجية أعلاه، MyAppتعرض الفئة MaterialAppعنصر واجهة المستخدم الخاص بنا. داخل MaterialAppعنصر واجهة المستخدم، نعيد HomePageعنصر واجهة مستخدم مخصصًا باستخدام homeالسمة. داخل HomePageعنصر واجهة المستخدم، لدينا عنصر مركزي ElevatedButton، عند الضغط عليه، يظهر SnackBarاستخدام showSnackBarوظيفة الفئة ScaffoldMessenger.
لضمان SnackBarظهورها في أعلى الشاشة، قمنا بتعيين behaviorالسمة إلى SnackBarBehavior.floating، مما يجعلها تطفو فوق عناصر واجهة المستخدم الأخرى. بعد ذلك، نستخدم marginالسمة لإضافة هامش في الأسفل، مما يدفع SnackBarلأعلى إلى الأعلى. نحصل على ارتفاع الشاشة الحالي باستخدام MediaQuery.sizeOf(context).heightونستخدم 91% من هذا الارتفاع لتجنب حظر شريط حالة Android.
يمكن تعديل النسبة المئوية، على سبيل المثال، إذا كنت تستخدم AppBarأداة أو تحتاج إلى موضع مختلف.
استخدام أداة MaterialBanner في Flutter
بدلاً من استخدام SnackBarالأداة لعرض رسائل الإشعارات في أعلى الشاشة في Flutter، يمكننا استخدام الأداة المضمنة MaterialBanner، والتي تعرض الرسائل في الأعلى بشكل افتراضي. وعلى عكس SnackBarالأداة، MaterialBannerلا تقوم الأداة بإغلاق نفسها تلقائيًا، ولكن يمكن تكوينها للقيام بذلك. دعنا نبدأ بعرض MaterialBanner.
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: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () => ScaffoldMessenger.of(context).showMaterialBanner(
const MaterialBanner(
content: Text('You have a new message.'),
actions: [
SizedBox.shrink(),
],
),
),
child: const Text('Show banner'),
),
),
);
}
}
في مقتطف الكود أعلاه، استبدلنا SnackBarالأداة بأداة MaterialBannerأخرى. وبدلاً من استدعاء showSnackBarالدالة على ScaffoldMessengerالمثيل، نستخدم showMaterialBannerالدالة الآن.
داخل MaterialBannerالأداة، قمنا بتعيين كل من المتطلبات contentوالسمات actions. contentتعرض السمة رسالتنا، بينما actionsتسمح لنا السمة بتضمين أدوات إضافية، مثل الأزرار. في الوقت الحالي، نستخدمها SizedBox.shrink()كعلامة نائبة، لأن actionsالسمة لا يمكن أن تكون فارغة.
عند استخدام ScaffoldMessengerالأداة، قد تواجه الخطأ No ScaffoldMessenger widget found. إذا حدث هذا، فراجع المقالة التالية: لم يتم العثور على أداة ScaffoldMessenger لحل الخطأ.
رفض MaterialBanner
عادةً، تتوقع أن تختفي الرسائل المنبثقة تلقائيًا، لكن MaterialBannerالأداة تتصرف بشكل مختلف ولا تغلق نفسها تلقائيًا. ومع ذلك، يمكننا تنفيذ هذه الوظيفة بأنفسنا.
الفصل التلقائي
لجعل MaterialBannerالأداة تقوم بإغلاق نفسها تلقائيًا، يمكننا استخدام delayedمنشئ فئة Flutter Future.
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: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
final scaffoldMessenger = ScaffoldMessenger.of(context);
scaffoldMessenger.showMaterialBanner(
const MaterialBanner(
content: Text('You have a new message.'),
actions: [
SizedBox.shrink()
],
),
);
Future.delayed(
const Duration(seconds: 2),
() => scaffoldMessenger.hideCurrentMaterialBanner(),
);
},
child: const Text('Show banner'),
),
),
);
}
}
في مقتطف التعليمات البرمجية أعلاه، قمنا بتغيير الوظيفة المعينة لخاصية onPressedمن ElevatedButtonدالة سهمية إلى دالة عادية. داخل هذه الوظيفة، نقوم أولاً بإنشاء scaffoldMessengerمتغير يحمل مثيلًا للفئة ScaffoldMessenger.
نستخدم بعد ذلك هذا المتغير لاستدعاء showMaterialBannerالدالة، التي تعرض الشعار MaterialBannerعلى الشاشة. بعد عرض الشعار، نستخدم Future.delayedالمنشئ بمدة 2ثوانٍ لاستدعاء hideCurrentMaterialBannerالدالة على ScaffoldMessengerالمثيل، مما يتسبب في إغلاق الشعار تلقائيًا.
زر الرفض
بالإضافة إلى الرفض التلقائي، يمكننا أيضًا توفير طريقة لرفض MaterialBannerالأداة يدويًا من خلال تضمين زر رفض.
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: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () => ScaffoldMessenger.of(context).showMaterialBanner(
MaterialBanner(
content: const Text('You have a new message.'),
actions: [
TextButton(
onPressed: () =>
ScaffoldMessenger.of(context).hideCurrentMaterialBanner(),
child: const Text('DISMISS'),
),
],
),
),
child: const Text('Show banner'),
),
),
);
}
}
في مقتطف التعليمات البرمجية أعلاه، قمنا بإرجاع onPressedوظيفة back ElevatedButtonإلى وظيفة سهم. داخل MaterialBanner، قمنا باستبدال عنصر واجهة المستخدم النائب في actionsالسمة بـ TextButton. عند TextButtonالضغط على ، يتم استدعاء hideCurrentMaterialBannerالوظيفة لإلغاء MaterialBanner.
تصميم MaterialBanner
يقدم MaterialBannerالكثير من خيارات التخصيص لجعله يتناسب مع موضوع تطبيقك.
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: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () => ScaffoldMessenger.of(context).showMaterialBanner(
MaterialBanner(
backgroundColor: Colors.orange,
content: const Text('You have a new message.'),
contentTextStyle: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
),
elevation: 1,
leading: const Icon(
Icons.notifications_active,
color: Colors.white,
),
actions: [
TextButton(
onPressed: () =>
ScaffoldMessenger.of(context).hideCurrentMaterialBanner(),
child: const Text(
'DISMISS',
style: TextStyle(color: Colors.white),
),
),
],
),
),
child: const Text('Show banner'),
),
),
);
}
}
في مقتطف الكود أعلاه، قمنا بتغيير MaterialBannerلون الأداة إلى البرتقالي باستخدام backgroundColorالسمة. وقمنا بتعديل نمط النص باستخدام السمة contentTextStyle. elevationتم ضبط السمة على 1لضمان MaterialBannerعدم دفع الأدوات الموجودة أسفلها إلى الأسفل. وأخيرًا، استخدمنا leadingالسمة لإضافة أيقونة إشعار أمام النص.
استخدام حزمة Top Snackbar Flutter
بدلاً من استخدام أدوات ووظائف Flutter المضمنة، يمكننا أيضًا استخدام حزمة خارجية لعرض رسائل الإشعار في الجزء العلوي من الشاشة. لا تسمح لك حزمة Top Snackbar Flutter بعرض رسائل الإشعار في الجزء العلوي فحسب، بل توفر أيضًا رسائل إشعار مصممة مسبقًا.
قم بتثبيت حزمة Top Snackbar Flutter
flutter pub add top_snackbar_flutter
بمجرد تنفيذ الأمر، تأكد من فحص ملفك pubspec.yamlبحثًا عن التبعيات المضافة. يجب أن ترى حزمة Top Snackbar Flutter مضمنة في قسم التبعيات، مثل هذا:
dependencies:
top_snackbar_flutter: ^3.1.0
تنفيذ حزمة Top Snackbar Flutter
إن تنفيذ حزمة Top Snackbar Flutter بسيط للغاية. دعنا نلقي نظرة على المثال أدناه.
import 'package:flutter/material.dart';
import 'package:top_snackbar_flutter/top_snack_bar.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
child: const Text('Show Top Snackbar'),
onPressed: () => showTopSnackBar(
Overlay.of(context),
Card(
color: Colors.orange,
child: Container(
margin: const EdgeInsets.only(left: 20),
height: 50,
child: const Align(
alignment: Alignment.centerLeft,
child: Text(
'You have a new message.',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: Colors.white,
),
),
),
),
),
displayDuration: const Duration(seconds: 2),
),
),
),
);
}
}
في مقتطف التعليمات البرمجية أعلاه، نبدأ باستيراد حزمة Top Snackbar Flutter. تحتوي الحزمة على showTopSnackBarدالة قمنا بتعيينها لخاصية onPressedعنصر واجهة المستخدم الخاص بنا ElevatedButton. داخل الدالة، يتعين علينا توفير مثيل للفئة Overlay. نقوم بذلك باستخدام Overlay.of(context)للحصول على التراكب الحالي. بخلاف Overlayالمثيل، نحتاج أيضًا إلى توفير عنصر واجهة المستخدم الذي نريد عرضه.
في هذه الحالة، قمنا بتوفير Cardأداة لعرض شيء مشابه لأداة MaterialBannerand SnackBar. لسوء الحظ، ليس من الممكن استخدام a SnackBarأو MaterialBannerداخل showTopSnackBarالدالة.
باستخدام هذه الحزمة، يمكنك أيضًا عرض رسائل الإشعار في أسفل الشاشة عن طريق إضافة snackBarPosition: SnackBarPosition.bottomالسمة إلى showTopSnackBarالوظيفة.
استخدم فئة CustomSnackBar الخاصة بالحزمة
بدلاً من إنشاء أداة خاصة بنا، يمكننا استخدام CustomSnackBarفئة حزمة Top Snackbar Flutter. توفر هذه الفئة العديد من المنشئين برسائل إشعار مصممة مسبقًا.
import 'package:flutter/material.dart';
import 'package:top_snackbar_flutter/custom_snack_bar.dart';
import 'package:top_snackbar_flutter/top_snack_bar.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () => showTopSnackBar(
Overlay.of(context),
const CustomSnackBar.success(
message: 'You have a new message.',
),
),
child: const Text('Show Top Snackbar'),
),
),
);
}
}
في مقتطف التعليمات البرمجية أعلاه، نبدأ باستيراد الفصل CustomSnackBar. ثم استبدلنا Cardالأداة بالمنشئ CustomSnackBar.successلإرجاع رسالة تنبيه مصممة مسبقًا.
بالإضافة إلى successالمنشئ، يمكنك أيضًا استخدام المنشئين errorأو info، والذي سيعرض بشكل افتراضي رسالة تنبيه باللون الأحمر أو الأزرق.
تخصيص فئة CustomSnackBar
في القسم السابق، بدأنا في استخدام منشئي الفئة CustomSnackBarلعرض رسائل الإشعارات المصممة مسبقًا. يمكن تخصيص هذه الرسائل لتتناسب مع سمة تطبيقك.
import 'package:flutter/material.dart';
import 'package:top_snackbar_flutter/custom_snack_bar.dart';
import 'package:top_snackbar_flutter/top_snack_bar.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () => showTopSnackBar(
Overlay.of(context),
const CustomSnackBar.success(
message: 'You have a new message.',
backgroundColor: Colors.orange,
textStyle: TextStyle(fontSize: 17, color: Colors.white, fontWeight: FontWeight.bold),
icon: Icon(
Icons.notifications_active,
size: 80,
color: Colors.white60,
),
iconPositionLeft: -4,
),
displayDuration: const Duration(seconds: 2),
),
child: const Text('Show Top Snackbar'),
),
),
);
}
}
في مقتطف الكود أعلاه، قمنا بتغيير لون الخلفية من الأخضر إلى البرتقالي باستخدام backgroundColorالسمة. كما استخدمنا السمة textStyleلإنشاء نص أبيض غامق. وبدلاً من عرض أيقونة ابتسامة، نعرض الآن أيقونة إشعار وقمنا بتعديل موضعها قليلاً باستخدام iconPositionLeftالسمة.
ما هو الحل الأمثل لإظهار رسائل الإشعارات في أعلى الشاشة
ستمنحك جميع الحلول التي تمت مناقشتها أعلاه نتائج مماثلة. وفي رأيي، MaterialBannerتعد الأداة المساعدة هي الطريقة الأكثر مباشرة لعرض رسائل الإشعارات في الجزء العلوي من الشاشة إذا كنت تفضل عدم استخدام حزم الجهات الخارجية.
ومع ذلك، Top Snackbar Flutterتتميز الحزمة بتقديم رسائل ترحيبية مصممة مسبقًا ويسهل تخصيصها.
يُعد هذا SnackBarالنهج أيضًا خيارًا قابلاً للتطبيق، ولكنه قد يبدو صعبًا بعض الشيء. بالإضافة إلى ذلك، نظرًا لأنه يتعين عليك ضبط ارتفاع الشاشة يدويًا، فقد تواجه مشكلات في الاستجابة على أحجام شاشات مختلفة.
في هذه التدوينة، ناقشنا ثلاث طرق لعرض رسائل التنبيه في أعلى الشاشة في Flutter. أولاً، استخدمنا الأداة SnackBar، وقمنا بتعديل موضعها لتطفو وضبط الهامش السفلي. بعد ذلك، استخدمنا MaterialBannerالأداة، التي تعرض الرسائل في الأعلى بشكل افتراضي. وأخيرًا، قمنا بتغطية الحزمة Top Snackbar Flutterلعرض رسائل التنبيه في أعلى الشاشة.
