آموزش ویجت SafeArea در فلاتر

همانظور که می دانید در تولید صفحات گوشی در برندهای مختلفت نوع استفاده از محل قرارگیری دوریبین یا سنسور های با یکدیگر متفاوت است برای مثال دو برند شاخص بازار سامسونگ و اپل رو بررسی میکنیم.

در فریمورک فلاتر برای پوشش این مشکل و قرارگیری درست آبجکتها در نرم افزار بدون درگیری با این گزینه از ویجت SafeArea استفاده می شود.

SafeArea یک ویجت مهم و مفید در Flutter است که رابط کاربری را پویا و سازگار با طیف گسترده ای از دستگاه ها می کند.

به عبارت ساده، 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

همانطور که در بالا می بینید 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),
          ),
        ),
      ),
    );
  }
}
}