چگونه از حالت‌های System UI در Flutter برای تجربه کاربری بهتر استفاده کنیم

سلام دوستان چطورید امدم SystemUiMode در فلاتر براتون بگم و اینگه چطئر برای تجربه کاربری بهتر استفاده کنیم.

میخوایم نوار وضعیت Status Bar و Navigation Bar رو مدیریت کنیم که چطور نمایش داده بشه.

اول از هرچیزی قبل runApp کد زیر مینویسیم

WidgetsFlutterBinding.ensureInitialized();

وضعیت edgeToEdge

اگر بخوایم یه تجربه کاربری تمام صفحه ایجاد کنیم برای کاربرامون از edgeToEdge استفاده میکنیم

نوار وضعیت و نوار ناوبری شفاف میشن و محتوای برنامه زیر اونها نمایش داده میشه.

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  runApp(const MyApp());
}

وضعیت immersive

• نوار وضعیت و نوار ناوبری کاملاً مخفی میشه و فقط با کشیدن انگشت از لبه صفحه ظاهر میشه.
• این حالت تمرکز کامل روی محتوای برنامه را فراهم میکنه.

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
  runApp(const MyApp());
}

وضعیت immersiveSticky

• مشابه حالت immersive، اما نوارهای وضعیت و ناوبری پس از ظاهر شدن با کشیدن انگشت، به‌طور خودکار دوباره مخفی می‌شوند.
• نیازی به تعامل بیشتر برای ناپدید شدن مجدد نیست.

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  runApp(const MyApp());
}

وضعیت manual

( تنظیم شده فقط Navigation Bar نمایش داده نشه )

• کنترل کامل بر نمایش یا مخفی‌سازی نوار وضعیت و ناوبری را فراهم می‌کند.
• شما باید به‌صورت دستی مشخص کنید که کدام یک از نوارها نمایش داده شوند (با استفاده از overlays).

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  SystemChrome.setEnabledSystemUIMode(     
   SystemUiMode.manual, 
    overlays: [SystemUiOverlay.bottom],
   );
  runApp(const MyApp());
}

وضعیت leanBack

نوار وضعیت و نوار ناوبری مخفی می‌شوند، اما به محض تعامل کاربر (مثلاً لمس صفحه)، دوباره ظاهر می‌شوند.

• نوارها تا زمانی که تعامل بیشتری وجود نداشته باشد، نمایش داده می‌شوند.

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);
  runApp(const MyApp());
}