ساخت رابط واکنش‌گرا در فلاتر: از موبایل تا تبلت و دسکتاپ

یک اپ فلاتر ممکن است روی گوشی ۵ اینچی، تبلت، پنجره‌ی ویندوز یا مرورگر باز شود. اگر چیدمان را ثابت بنویسید، یکی از این‌ها حتماً خراب می‌شود. خوشبختانه فلاتر ابزار خوبی برای رابط واکنش‌گرا دارد.

#اندازه‌ی صفحه را بخوانید

برای اندازه‌ی کل پنجره:

final width = MediaQuery.sizeOf(context).width;

ولی گاهی چیدمان باید به فضای والد واکنش نشان دهد، نه کل صفحه؛ آنجا LayoutBuilder بهتر است:

LayoutBuilder(
  builder: (context, constraints) {
    final isWide = constraints.maxWidth >= 840;
    return isWide ? const WideLayout() : const NarrowLayout();
  },
)

#Breakpointها

راهنمای Material این اعداد را پیشنهاد می‌کند و برای شروع خوب‌اند:

• کمتر از ۶۰۰: موبایل (compact)
• ۶۰۰ تا ۸۴۰: تبلت کوچک (medium)
• ۸۴۰ و بیشتر: تبلت بزرگ و دسکتاپ (expanded)

#ناوبری تطبیقی

روی موبایل NavigationBar پایین صفحه و روی صفحه‌ی عریض NavigationRail کنار صفحه تجربه‌ی بهتری می‌دهد:

Widget build(BuildContext context) {
  final wide = MediaQuery.sizeOf(context).width >= 600;
  return Scaffold(
    body: Row(
      children: [
        if (wide) NavigationRail(
          selectedIndex: index,
          onDestinationSelected: onSelect,
          destinations: railItems,
        ),
        Expanded(child: pages[index]),
      ],
    ),
    bottomNavigationBar: wide ? null : NavigationBar(
      selectedIndex: index,
      onDestinationSelected: onSelect,
      destinations: barItems,
    ),
  );
}

#شبکه‌ی خودکار به‌جای تعداد ستون ثابت

GridView.builder(
  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 280,
    mainAxisSpacing: 12,
    crossAxisSpacing: 12,
  ),
  itemBuilder: (context, i) => ProductCard(items[i]),
)

تعداد ستون‌ها خودش با عرض صفحه تنظیم می‌شود.

#محتوا را روی صفحه‌ی بزرگ محدود کنید

یک فرم که روی مانیتور ۲۷ اینچی تمام عرض را بگیرد زشت و ناخوانا است. آن را در ConstrainedBox(constraints: BoxConstraints(maxWidth: 900)) و Center بگذارید.

#اشتباه‌های رایج

• ارتفاع ثابت برای کارت‌هایی که متن دارند: کاربری که اندازه‌ی فونت سیستم را بزرگ کرده سرریز (overflow) می‌بیند. از Expanded، Flexible و محتوای خودکار استفاده کنید.
• فرض‌کردن عرض ثابت: همیشه با چند اندازه (۳۶۰، ۴۱۲، ۸۲۰، ۱۴۴۰) تست کنید.

#پشتیبانی از راست‌به‌چپ (فارسی و عربی)

• به‌جای EdgeInsets.only(left: ...) از EdgeInsetsDirectional.only(start: ...) استفاده کنید.
• به‌جای Alignment.centerLeft از AlignmentDirectional.centerStart استفاده کنید.
• آیکن‌های جهت‌دار (مثل فلش برگشت) را با Directionality بسنجید.

با همین چند اصل، یک کدبیس واحد روی موبایل، وب و دسکتاپ حرفه‌ای دیده می‌شود.