۱ طاها اسدی مهشاد
برنامه از زیر نویگیشژن بار موبایل شروع میشه
جامعه فلاتر ایجاد شده در ۱۷ اسفند ۱۴۰۴

سلام، برای من برنامه و نوار نویگیشژنش میره زیر نویگیشژن بار خود موبایل، چجوری درستش کنم؟

و اینکه خودکار رنگ بک گراند وقتی کانتینر سفید میذارم این رنگی میشه، دیگ سفید نیست

1000127087-2djo6mc8.jpg

1️⃣ رفتن نوار پایین زیر Navigation Bar گوشی

وقتی UI زیر system navigation bar قرار می‌گیرد یعنی padding سیستم رعایت نشده.

راه حل استاندارد

کل صفحه را داخل SafeArea بگذار.

                                            content_copy                        dartnote_addویرایش با Canvas

SafeArea(
  child: Scaffold(
    body: YourPage(),
  ),
)

یا اگر فقط پایین مشکل دارد:

                                            content_copy                        dartnote_addویرایش با Canvas

SafeArea(
  bottom: true,
  child: YourWidget(),
)

اگر BottomNavigationBar داری

از این استفاده کن:

                                            content_copy                        dartnote_addویرایش با Canvas

Scaffold(
  body: Page(),
  bottomNavigationBar: BottomNavigationBar(
    items: [...],
  ),
)

Flutter خودش padding مناسب را اعمال می‌کند.

اگر خودت Container ساختی برای navbar

باید padding سیستم را بگیری:

                                            content_copy                        dartnote_addویرایش با Canvas

padding: EdgeInsets.only(
  bottom: MediaQuery.of(context).padding.bottom,
)

یا بهتر:

                                            content_copy                        dartnote_addویرایش با Canvas

padding: EdgeInsets.only(
  bottom: MediaQuery.of(context).viewPadding.bottom,
)

2️⃣ سفید نیستن Container‌ها (پس زمینه خاکستری/رنگی میشه)

این معمولاً به خاطر Material background color است.

در Scaffold پیش‌فرض رنگ Theme اعمال می‌شود.

راه حل

                                            content_copy                        dartnote_addویرایش با Canvas

Scaffold(
  backgroundColor: Colors.white,
)

یا اگر از theme استفاده می‌کنی:

                                            content_copy                        dartnote_addویرایش با Canvas

theme: ThemeData(
  scaffoldBackgroundColor: Colors.white,
)

3️⃣ اگر Container سفید می‌ذاری ولی هنوز tint می‌گیرد

در Material 3 یک ویژگی به نام surfaceTintColor وجود دارد.

حل مشکل

                                            content_copy                        dartnote_addویرایش با Canvas

Container(
  color: Colors.white,
)

یا اگر Card یا Material است:

                                            content_copy                        dartnote_addویرایش با Canvas

Card(
  surfaceTintColor: Colors.transparent,
  color: Colors.white,
)

4️⃣ اگر مشکل از Material3 باشد

گاهی تم باعث tint می‌شود:

                                            content_copy                        dartnote_addویرایش با Canvas

theme: ThemeData(
  useMaterial3: false,
)

یا:

                                            content_copy                        dartnote_addویرایش با Canvas

surfaceTintColor: Colors.transparent,

✅ ترکیب پیشنهادی حرفه‌ای

                                            content_copy                        dartnote_addویرایش با Canvas

Scaffold(
  backgroundColor: Colors.white,
  body: SafeArea(
    child: YourPage(),
  ),
)
senator ۱۸ اسفند ۱۴۰۴، ۰۳:۲۳