همانظور که می دانید در تولید صفحات گوشی در برندهای مختلفت نوع استفاده از محل قرارگیری دوریبین یا سنسور های با یکدیگر متفاوت است برای مثال دو برند شاخص بازار سامسونگ و اپل رو بررسی میکنیم.
در فریمورک فلاتر برای پوشش این مشکل و قرارگیری درست آبجکتها در نرم افزار بدون درگیری با این گزینه از ویجت SafeArea استفاده می شود.
ویجت SafeArea
در فریمورک فلاتر یک ویجت بسیار مفید است که به برنامهنویسان اجازه میدهد محتوای یک صفحه را در داخل محدودهای ایمن و مناسب برای نمایش بگذارند.
این ویژگی به خصوص برای تلفنهای همراه با نوچهها یا فضای نمایش محدود مفید است، زیرا بهطور خودکار از نوچهها و قسمتهای سیستمی دیگر که ممکن است بر روی صفحه از دسترسی محتوا جلوگیری کنند، خودداری میکند.
SafeArea یک ویجت مهم و مفید در فلاتر است که رابط کاربری را پویا و سازگار با طیف گسترده ای از دستگاه ها می کند.
به عبارت ساده، SafeArea اساساً یک ویجت padding است که بر اساس دستگاهی که روی آن اجرا می شود، هر گونه padding لازم را به برنامه اضافه می کند.
اگر ویجتهای برنامه شما بر روی هر یک از ویژگیهای سیستم مانند بریدگیها، نوار وضعیت، سوراخهای دوربین یا هر ویژگی دیگری از این قبیل قرار دارند، SafeArea در صورت لزوم، paddingرا در اطراف برنامه اضافه میکند.
SafeArea از MediaQuery داخلی برای بررسی ابعاد صفحه نمایش استفاده میکند و در صورت نیاز دارای padding اضافی است.
SafeArea({
Key key,
left: true,
top: true,
right: true,
bottom: true,
EdgeInsets minimum: EdgeInsets.zero,
bool maintainBottomViewPadding: false,
@required Widget child}
)
همانطور که در بالا می بینید Constructor که برای safeArea طراحی شده به کاربر اجازه میده اون رو به حالت سفارشی در بیاره و اجازه گسترش در یک جهت خواص رو بده .که این موارد با مقدار دهی به چهار گزینه left: ,top , right: ,bottom , که یک مقدار bool رو دریافت میکنند مقدار دهی می شود.
گزینه بعدی در این آپشن ها EdgeInsets minimum است که به ویجت اعلام میکند که حداقل فاصله مناسب از اطراف رو بگیره که اگر همانطور در قسمت قبل توضیح داده شد اگر مقدار جهت ها Falseبود در اون مسیر این محدودیت اعمال نخواهد شد.
گزینه بعدی maintainBottomViewPadding است که به ویجت اعلام میکند که باید گزینه padding رو ارجع قرار بده یا گزینه ViewPadding .که یک مقدار bool رو قبول می کند.
و در پایان یک قسمت کد کامل و نحوه استفاده از SafeArea رو بیان می کنیم.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
left: true,
top: true,
right: true,
bottom: true,
EdgeInsets minimum: EdgeInsets.zero,
maintainBottomViewPadding: false,
child: Scaffold(
body: Text(
'This is an example explaining use of SafeArea in flutter-learn.ir',
style: TextStyle(color: Colors.green, fontSize: 20),
),
),
),
);
}
}
}
در کد بالا، صفحهای ایجاد میشود که عنوان آن در نوار بالا نمایش داده میشود و محتوای متنی در داخل SafeArea
وسط صفحه قرار دارد.
با استفاده از SafeArea
، مطمئن میشویم که محتوای متنی داخل داخل ناچ یا نوار اطلاعات سیستمی قرار نگیرد و بصورت ایمن نمایش داده شود.
بسیار عالی
پیشنهاد می کنید کلیه صفحات در قالب SafeArea باشد؟
سلام
ویجت اولیه برنامه داخل SafeArea باشه کافی هست