بررسی ویژگی های جدید فریمورک فلاتر 3.16 + بررسی کامل

فلاتر 3.16 به تازگی منتشر شده است و در این بخش به بررسی امکانات و ویژگی های که در این نسخه منتشر شده است میپردازیم.

در این ورژن، تم جدید Material 3 به صورت پیشفرض فعال است، پیش‌نمایش Impeller برای اندروید منتشر شده، امکان اضافه کردن افزونه‌ها برای DevTools هم داریم و خیلی چیزهای دیگه! همچنین با به‌روزرسانی‌های مهمی با Flutter Casual Games Toolkit هم هماهنگ شده.

تنها سه ماه از انتشار قبلی ما گذشته و 928 درخواست pull از طرف 145 نفر از جامعه پذیرفته شده، که 40 نفر از اونا برای اولین بار یه کامیت به فلاتر دادن!

فلاتر 3.16

متریال دیزاین

از انتشار ۳.۱۰ فلاتر تا به این نسخه کتابخانه Material به‌روزرسانی شده است تا با آخرین استانداردهای طراحی متریال دیزاین هماهنگ شود.

تغییرات شامل اضافه شدن کامپوننت های جدید و بروزرسانی و تغییر ظاهر کامپوننت های قبلی می‌شود.

قبل از انتشار ۳.۱۶، این تغییرات به صورت “opt-in” با استفاده از ویژگی useMaterial3 اعمال می‌شدند.

از این انتشار به بعد به صورت پیش‌فرض مقدار useMaterial3 به صورت true تنظیم شده است.

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

برای این کار در ویجت MaterialApp از دستور useMaterial3: false استفاده کنید. اما در نهایت این نسخه منسوخ خواهد شد.

همچنین، برخی از ویجت‌ها نمی توانند به سادگی به‌روزرسانی شوند و نیاز به یک پیاده‌سازی کاملاً جدید دارند. به همین دلیل، ممکن است وقتی آن را به عنوان Material 3 اجرا میکنید، رابط کاربری شما کمی عجیب به نظر برسد.

برای رفع این مشکل، به‌صورت دستی به ویجت‌های جدید مهاجرت کنید، مانند NavigationBar.

برای مشاهده کامل ویجت های متریال 3 به لینک گیتهاب مراجعه کنید.

برای کار با نسخه دمو این کامپوننت از این لینک میتوانید استفاده کنید.

ظاهر اجزاي Material 3 اساساً توسط مقادیر برای [ThemeData.colorScheme] و [ThemeData.textTheme] تعیین می‌شود.

بهترین راه برای ایجاد یک طیف رنگی در Material 3 از طریق ColorScheme.fromSeed() است که طیف های رنگی ویژه تم های تاریک و روشنی ایجاد می‌کند که هر دو ظاهر زیبایی دارند و با نیازهای کنتراست مربوط به دسترسی‌پذیری سازگار هستند.

همچنین می‌توانید یک طیف رنگی از رنگ‌های غالب در یک تصویر با ColorScheme.fromImageProvider ایجاد کنید. در این مورد رنگ های مورد استفاده از درون تصویر استخراج میشوند که در دموی قرار داده شده میتوانید این مورد را مشاهده کنید.

پشتیبانی از Material 3 motion

بهبودهای انجام شده در موشن های Material 3 شامل افزودن کلاس‌های Easing و Durations است.

موشن به شما کمک میکند تا رابط کاربری تعاملی تر و ترنزیشن های گوناگونی طراحی کنید. که این کار در نتیجه باعث بهبود انیمیشن های اپلیکیشن میشود.

امکانات جدید Edit menu در iOS

در حالت نیتیو سیستم عامل iOS کاربران میتوانند یک متن را انتخاب کند و پنجره ای از آیتم های یک منو را در اختیار داشته باشند. در این نسخه از فلاتر گزینه های جستجو و به اشتراک گذاری را در اختیار کاربران میتوانید قرار دهید.

پشتیبانی از TextScaler

در اندروید 14 ویژگی جدیدی وجود دارد که کاربران میتوانند اندازه فونت اپلیکیشن ها را متناسب با نیاز خود تا 200% تغییر دهند.

برای استفاده از این ویژگی کلاس TextScalar جایگزین Text.textScaleFactor شده است.

بروزرسانی SelectionArea

SelectionAreaدر Flutter به‌روزرسانی شده است تا حرکات طبیعی مرتبط با یک کلیک یا دوبار کلیک با ماوس و لمس طولانی در دستگاه لمسی را پشتیبانی کند. این حرکات جدید به صورت پیش‌فرض با SelectionArea و SelectableRegion در دسترس هستند.

انیمیشن MatrixTransition

در بحث پیاده سازی اینیمشن ها ویجت جدید MatrixTransition اجازه تغییرات در هنگام ایجاد ترنزیشن های متحرک را فراهم می‌کند. بر اساس مقدار فعلی انیمیشن، شما می‌توانید یک تبدیل ماتریس ارائه دهید که به ویجت فرزند اعمال شده و اثراتی مانند دمو ایجاد کند. (دمو )

کلاس PaintPattern برای پکیج تست

در پکیج فلاتر flutter_test، کلاس جدید PaintPattern به شما این امکان را می‌دهد که فراخوانی های Paint که توسط ویجت‌هایی مانند CustomPainters و Decorations (استفاده شده در تست‌های واحد) به Canvas انجام می‌دهند را اعتبارسنجی کنید.

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

expect(
  find.byType(MyWidget),
  paints
    ..circle(
      x: 10,
      y: 10,
      radius: 20,
      color: const Color(0xFFF44336),
    ),
);
// Multiple paint calls can even be chained together.
expect(
  find.byType(MyWidget),
  paints
    ..circle(
      x: 10,
      y: 10,
      radius: 20,
      color: const Color(0xFFF44336),
    ),
    ..image(
      image: MyImage,
      x: 20,
      y: 20,
    ),
);

بروزرسانی اسکرول فلاتر

پس از انتشار اولیه اسکرول دو بعدی در فلاتر 3.13، این آپدیت شامل ویژگی‌ها و بهبودهای بیشتری برای این مورد میباشد.

با فلاتر 3.16، ویجت اسکرول دو بعدی حالا از ویجت‌های KeepAlive پشتیبانی می‌کند.

 ویجت‌های KeepAlive به شما امکان می‌دهند که برخی از ویجت‌های خود را به صورت خودکار در حافظه نگه دارید، حتی اگر در حال حاضر قابل مشاهده نباشند. این می‌تواند برای بهبود عملکرد و تجربه کاربر مفید باشد.

علاوه بر این موارد focus traversal نیز در اسکرول دو بعدی اضافه شده است که میتوانید با دکمه ها بین آیتم ها حرکت کنید.

تیم توسعه فلاتر روی اسکرول دو بعدی کارهای زیادی انجام داده اند و به عنوان یک ویژگی کاربردی آن را تلقی میکنند. از نسخه قبلی تا در این نسخه امکانات بیشتری به آن اضافه شده و باگ های اصلی نیز بهبود پیدا کرده اند.

هسته فلاتر

Impeller در اندروید

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

در این نسخه از فلاتر موتور گرافیکی Impeller برای استفاده تست و دریافت بازخورد در سیستم عامل اندروید در دسترس است.

از ابتدای امسال توسعه بسیار زیادی روی سیستم Vulkan که Impeller از آن استفاده میکند شده است و همچنان این کار نیز ادامه دارد.

در حال حاضر، انتظار می‌رود که Impeller عملکرد خوبی را در دستگاه‌هایی که امکان پشتیبانی از Vulkan را ندارند، ارائه ندهد.

در ماه‌های آینده، هنگامی که Impeller’s OpenGL backend به میزانی از امکانات مورد نیاز برسد، تیم توسعه قصد دارد در یک نسخه پایدار آینده، بازخورد درباره ویژگی‌های Impeller روی چنین دستگاه‌هایی را بررسی کند.

برنامه نویسان میتوانند در سیستم های اندرویدی که از Vulkan پشتیبانی میکنند این ویژگی را تست کنند. برای اینکار هنگام اجرای پروژه فلاتر از پارامتر — enable-impelle استفاده کنید و یا کد زیر را در AndroidManiest.xml قرار دهید.

<meta-data
  android:name="io.flutter.embedding.android.EnableImpeller"
  android:value="true" />

مشخصات گوشی هوشمند مورد نظر باید استفاده از معماری 64 بیتی و API 29 و یا بیشتر باشد.

Impeller برای ایجاد انیمیشن‌های پیچیده و جذاب از نظر بصری طراحی شده است. از یک سیستم انیمیشن مبتنی بر گرافیک محاسباتی برای انیمیشن‌های دقیق و روان استفاده می‌کند.

Impeller طیف وسیعی از ویژگی‌ها را برای ایجاد انواع مختلف انیمیشن‌ها ارائه می‌دهد، از جمله انیمیشن‌های دو بعدی و سه بعدی، انیمیشن‌های خطی و غیرخطی، انیمیشن‌های همگام‌سازی شده و غیر همگام‌سازی شده و انیمیشن‌های با سرعت متغیر.

عملکرد موتور

برای افزایش عملکرد بهتر در دستگاه‌های با پردازش چندگانه ناهمگن، هسته موتور را به گونه‌ای تغییر داده شده است که که رشته‌های حساس به عملکرد، مانند رشته‌های UI و raster، به هسته‌های قوی‌تر دستگاه متصل شوند.

این تغییر در انواع بنچمارک و دستگاه‌ها تأثیر مثبتی داشته است. در برخی موارد بهبود چشمگیر بوده و زمان فریم 99% یا 90% را نصف یا بهتر کرده است. پیش‌بینی می‌شود که کاربران پس از این تغییر با هر دو موتور گرافیکی Skia و Impeller روی اندروید بهبود های بسیاری را تجربه کنند، حداقل حرکت‌های ناخوشایند (jank) را کمتر متوجه خواهند شد.

این تأثیر در دستگاه‌های iOS کمتر چشمگیر است، جایی که تفاوت کوچکتری بین هسته‌های قوی‌تر و ضعیف‌تر وجود دارد.

بازی

کیت بازی فلاتر

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

ده‌ها هزار بازی با استفاده از Flutter منتشر شده‌اند، از پازل‌های ساده اما سرگرم‌کننده تا بازی‌های آرکید پیچیده‌تر.

برخی از بازی‌های مجبوب در این زمینه عبارتند از Trivia Crack اثر Etermax، 4 Pics 1 Word (بازی حدس کلمه) اثر Lotum، Brick Mania (بازی آرکید) اثر Dong Digital، StopotS (بازی دسته‌ها) اثر Onrizon، بازی پین‌بال قدیمی که برای I/O در Flutter ساختیم و PUBG Mobile که از Flutter در صفحه‌های اجتماعی و منوهای خود استفاده می‌کند.

برای کمک به توسعه‌دهندگان بازی در افزایش بهره‌وری، امروز فلاتر 3.16 یک به‌روزرسانی عمده ای برای کیت ابزارهای توسعه بازی ارائه کرده است.

این مجموعه منابع جدید به شما کمک می‌کند تا از ایده و کانسپت بازی به سوی انتشار بازی با موضوعات خاص مانند بازی کارت، بازی دونده بی‌پایان، حرکت کنید. همچنین امکان ادغام خدماتی مانند Play Games Services، خرید درون‌برنامه‌ای، تبلیغات، دستاوردها، کرش‌لایتیکس و پشتیبانی از بازی چندنفره را در اختیار خواهید داشت.

فلاتر وب

فلاتر تایملاین

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

پشتیبانی از اسکرول چرخ ماوس

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

پشتیبانی از Predictive back

در اندروید 13 ویژگی جدیدی به عنوان Predictive Back معرفی شد که میتوانستید با کشیدن دست از سمت چپ به راست به صفحه قبل برگردید بدون استفاده از دکمه بازگشت. این ویژگی در اندروید 14 همراه با انیمیشن جذابی شده است که هنوز وقتی کشیدن انگشت روی صفحه تکمیل نشده است برنامه کنار میرود و صفحه قبلی نمایش داده میشود. در فلاتر 3.16 پشتیبانی از این قابلیت را خواهید داشت.

App extensions در iOS

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

آموزش نصب فلاتر

این کار برای تمام انواع افزونه‌های اپلیکیشن کار نمی‌کند چرا که ممکن است محدودیت‌هایی در API وجود داشته باشد (به عنوان مثال، ویجت‌های صفحه اصلی) یا محدودیت‌های حافظه.

پکیج های فلاتر

در این بخش تیم توسعه لیستی از پکیج های محبوب را قرار داده است که احتمال بسیار زیاد با آنها آشنا هستید.

 flame, flutter_animate, flutter_rust_bridge, riverpod, video_player, macos_ui و fpdart این پکیج جزوی از اکوسیستم Flutter Favorites میباشد.

شخصی سازی گوگل مپ

پلتفرم گوگل مپ اکنون این امکان و به شما میده که استایل و گرافیک نقشه های گوگل را از طریق کنسول Google Cloud شخصی سازی کنید بدون اینکه نیاز داشته باشید نسخه جدیدی از اپلیکیشن خودتون و منتشر کنید.

برای استفاده از این ویژگی باید آیدی نقشه خودتون و از داخل کنسول به ویجت زیر بفرستید.

GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: const CameraPosition(
          target: _kMapCenter,
          zoom: 7.0,
        ),
        key: _key,
        cloudMapId: _mapId
);

بهبود Camera X

در نسخه پایدار ۳.۱۰، ما پشتیبانی اولیه برای Camera X به پکیج دوربین فلاتر اضافه شد. Camera X یک کتابخانه Jetpack است که امکان افزودن قابلیت‌های دوربین را برای اپلیکیشن اندروید شما را ساده‌تر می‌کند.

در این نسخه، بیشتر ویژگی‌های لازم برای هر اپلیکیشنی که از دوربین استفاده می‌کند، اضافه شده است. CameraX مشکلات زیادی که با اجرای Camera 2 در این افزونه وجود داشت را حل می‌کند.

تیم فلاتر پیشنهاد میکند که از افزونه CameraX استفاده کنید. برای این کار، خط زیر را به فایل pubspec.yaml خود اضافه کنید.

Dependencies:
 camera: ^0.10.4 # Or try the latest camera version
 camera_android_camerax: ^0.5.0

macOS Video Player

خبر خوب برای توسعه دهندگان سیستم عامل مک اضافه شدن پشتیبانی از پکیج  video player plugin برای نمایش ویدیوها در این سیستم عامل میباشد.

بروزرسانی های DevTools

برخی از نکات برجسته برای ابزارهای توسعه (DevTools) در این نسخه عبارتند از:

• افزودن پشتیبانی از افزونه‌های DevTools
• افزودن صفحه جدید “Home” که خلاصه‌ای از اپلیکیشن متصل شما را نشان می‌دهد.
• بهبود کلی عملکرد
• افزایش قدرت Hot restart
• بهبود در انتخاب و رفتار کپی متن
• بهبود در ظاهر مشاهده‌گر پاسخ شبکه (Network profiler response viewer)