سلام

تو این پست میخوایم در مورد ریسپانسیو و انطباقی کردن پروژه های فلاتر صحبت کنیم؛ که این کار چطور انجام میشه.

۲ تا پکیج خفنم آموزش میدیم واقعا خفنن.

خب شروع میکنیم.

یه اپ اینجوری:)

طراحی انطباقی(Adaptive) چیه؟

تعریف روشنی براش وجود نداره ولی میشه گفت: طراحی واکنش‌‌‌گرا. یه نوع طراحی که بر حسب نوع دستگاه تغییر پیدا کنه. تنها بر حسب نوع دستگاه هم نه. عامل های مختلفی داره. عکس زیر رو ببینید تا کامل متوجه شید:

همونجور که تو عکس می‌بینید. طراحی انطباقی یعنی یه جور طراحی برای تمام افراد با هر نوع دستگاه.

عامل های مختلفی که توی عکس می‌بینید:

1. پلتفرم(اندروید، آی‌او‌اس، مک‌او‌اس، ویندوز، وب و ....)
2. صفحه‌نمایش(سایز، تراکم‌پیکسل، padding، دارک/لایت مود)
3. ورودی(صفحه‌لمسی، کیبورد و موس، صفحه‌خوان)
4. دسترسی(مقیاس‌گذاری متن، کنتراست)
5. کارایی(شبکه، پویا نمایی ها)

پلتفرم

دونستن اینکه سیستم‌عامل کاربر ما چیه باعث میشه ما از قابلیت های خاص اون سیستم‌عامل استفاده کنیم و این کار میتونه رو تجربه کاربر ما تاثیر زیادی داشته باشه.

برای فهمیدن سیستم‌عامل از کلاس Platform استفاده میکنیم. چون تو این کلاس وب نیست مجبوریم که از ثابت kIsWeb استفاده کنیم.

import 'dart:io';
import 'package:flutter/foundation.dart';

@override
Widget build(BuildContext context) {
    if(kIsWeb || Platform.isMacOS || Platform.isLinux ||Platform.isWindows){
        return DesktopLayout();
    }
    
    return MobileLayout();
}

📷فکر کنم بدونید برای آی‌او‌اس و اندروید ویجت های متفاوتی وجود داره. پس اگر کاربرانتون از آی‌او‌اس هم استفاده میکنن سعی کنید براشون از ویجت های Cupertino استفاده کنید تا احساس بهتری حین استفاده از اپ شما داشته باشند.

صفحه‌نمایش

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

MediaQuery

فکر کنم قبلا هنگام توسعه با Flutter از MediaQuery استفاده کردید.حتما به خاطر اینکه به اکثر خصوصیات توصیف کننده دستگاه کاربر دسترسی دارین.

تنها یه کار نیازه، اونم تعریف یه متغیر:

@override
Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    // Rebuilt every time a property of media query changes
    // ...

امیدوارم تا اینجای پست خوشتون اومده باشه؛ ادامه پست رو میتونین اینجا بخونید.