ورود و عضویت
0
سبد خرید شما خالی است
0
سبد خرید شما خالی است

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

3 دیدگاه
5 دقیقه برای مطالعه

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

سنسور گوشی آیفون
محل قرارگیری سنسورهای گوشی آیفون
سنسور گوشی سامسونگ
محل قرارگیری سنسورهای گوشی سامسونگ

در فریمورک فلاتر برای پوشش این مشکل و قرارگیری درست آبجکتها در نرم افزار بدون درگیری با این گزینه از ویجت 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، مطمئن می‌شویم که محتوای متنی داخل داخل ناچ یا نوار اطلاعات سیستمی قرار نگیرد و بصورت ایمن نمایش داده شود.

3 پاسخ به “آموزش ویجت SafeArea در فلاتر”

  1. محمدحسین فخرآوری گفت:

    بسیار عالی

  2. fakhravari گفت:

    پیشنهاد می کنید کلیه صفحات در قالب SafeArea باشد؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

jamil
20 نوامبر 2021
آموزش فارسی فلاتر
آموزش فارسی flutter