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

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

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

کاربرد ویجت 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

همانطور که در بالا می بینید 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 وسط صفحه قرار دارد.

آموزش استایل دهی به سبک CSS با کتابخانه division

با استفاده از SafeArea، مطمئن می‌شویم که محتوای متنی داخل داخل ناچ یا نوار اطلاعات سیستمی قرار نگیرد و بصورت ایمن نمایش داده شود.