در قسمت قبلی یاد گرفتیم که چطور با پکیج lint در فلاتر کار کنیم و در این مقاله یاد میگیریم که ویجت SafeArea در فلاتر چیست و چه کارهایی انجام میده.
فلاتر، چارچوبی توسعهیافته توسط گوگل، به توسعهدهندگان این امکان را میدهد که برنامههای موبایل زیبا و کارآمدی برای اندروید و iOS ایجاد کنند. یکی از ویجتهای کلیدی در فلاتر که به توسعهدهندگان کمک میکند تا برنامههای خود را با نمایشگرهای مختلف سازگار کنند، ویجت SafeArea است. در این مقاله، به معرفی، کاربردها و مزایای ویجت SafeArea در فلاتر میپردازیم.
ویجت SafeArea در فلاتر برای اطمینان از اینکه محتوای برنامه در نواحی امن صفحهنمایش قرار میگیرد، طراحی شده است. این نواحی امن شامل مناطقی است که توسط عناصر سیستمعامل مانند ناچها (Notches)، گوشههای گرد و نوار وضعیت (Status Bar) اشغال شدهاند. این ویجت به خصوص برای دستگاههای جدیدتر که دارای طراحیهای پیچیدهتر صفحهنمایش هستند، بسیار مفید است.
در دستگاههای موبایل مدرن، طراحیهای صفحهنمایش متنوعی وجود دارد. برخی از دستگاهها دارای ناچها یا برشهایی در بالای صفحه هستند که ممکن است باعث مشکلاتی در نمایش محتوای برنامه شوند. بدون استفاده از ویجت SafeArea، بخشهایی از رابط کاربری برنامه ممکن است در زیر این عناصر سیستمعامل قرار بگیرند و کاربر نتواند به درستی با آنها تعامل کند. ویجت SafeArea این مشکل را حل میکند و اطمینان حاصل میکند که محتوای برنامه در نواحی قابل مشاهده و قابل دسترس قرار میگیرد.
برای استفاده از ویجت SafeArea در فلاتر، تنها کافی است که این ویجت را درخت ویجتهای خود اضافه کنید. به عنوان مثال، اگر میخواهید یک متن ساده را در ناحیه امن نمایش دهید، میتوانید کد زیر را استفاده کنید:
import ‘package:flutter/material.dart’;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Center(
child: Text(‘Hello, SafeArea!’),
),
),
),
);
}
}
در این مثال، ویجت SafeArea دور ویجت Center و متن قرار گرفته است. این تضمین میکند که متن “Hello, SafeArea!” در ناحیهای از صفحهنمایش قرار گیرد که توسط ناچ یا نوار وضعیت اشغال نشده است.
ویجت SafeArea دارای چندین پارامتر است که به شما امکان میدهد رفتار آن را سفارشیسازی کنید:
left: اگر مقدار true داشته باشد، حاشیهای در سمت چپ اضافه میکند.right: اگر مقدار true داشته باشد، حاشیهای در سمت راست اضافه میکند.top: اگر مقدار true داشته باشد، حاشیهای در بالا اضافه میکند.bottom: اگر مقدار true داشته باشد، حاشیهای در پایین اضافه میکند.minimum: حاشیه حداقل برای هر طرف صفحه را مشخص میکند.maintainBottomViewPadding: اگر مقدار true داشته باشد، حاشیه پایین را حتی زمانی که کیبورد باز است حفظ میکند.به طور پیشفرض، تمامی این پارامترها به مقدار true تنظیم شدهاند، اما شما میتوانید آنها را بر اساس نیازهای برنامه خود تنظیم کنید.
اگر میخواهید محتوای برنامه خود را از تمامی جهات در ناحیه امن نمایش دهید، میتوانید از ویجت SafeArea به این شکل استفاده کنید:
import ‘package:flutter/material.dart’;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
left: true,
right: true,
top: true,
bottom: true,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(‘Top SafeArea’),
Spacer(),
Text(‘Bottom SafeArea’),
],
),
),
),
);
}
}
در این مثال، ویجت SafeArea از تمامی جهات استفاده میشود تا اطمینان حاصل شود که متنهای “Top SafeArea” و “Bottom SafeArea” در نواحی امن نمایش داده میشوند.
گاهی اوقات نیاز است که حداقل حاشیه خاصی را برای نواحی مختلف صفحهنمایش تعیین کنید. برای این کار میتوانید از پارامتر minimum استفاده کنید:
import ‘package:flutter/material.dart’;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
minimum: EdgeInsets.all(16.0),
child: Center(
child: Text(‘Hello with minimum padding!’),
),
),
),
);
}
}
در این مثال، حاشیهای به اندازه 16 پیکسل در اطراف محتوای برنامه اضافه میشود تا مطمئن شویم که فاصله مناسبی از لبههای صفحهنمایش حفظ شده است.
استفاده از ویجت SafeArea در فلاتر دارای چندین مزیت مهم است:
ویجت SafeArea یکی از ابزارهای قدرتمند و ضروری در فلاتر است که به توسعهدهندگان کمک میکند تا برنامههای خود را با نمایشگرهای مختلف و طراحیهای پیچیدهتر صفحهنمایش سازگار کنند. با استفاده صحیح از این ویجت، میتوانید اطمینان حاصل کنید که محتوای برنامه شما در نواحی امن و قابل مشاهده قرار میگیرد، تجربه کاربری را بهبود بخشید و از پیچیدگیهای اضافی جلوگیری کنید. امیدواریم که این مقاله به شما کمک کند تا با ویجت SafeArea آشنا شوید و بتوانید از آن به صورت موثر در برنامههای فلاتر خود استفاده کنید.
