Shahpasand
Shahpasand
خواندن ۳ دقیقه·۴ سال پیش

چطور اپلیکیشن های کاراتری با فلاتر بنویسیم؟

پس از یادگیری مقدمات ساخت اپلیکیشن با فلاتر، اولین قدم برای اینکه اپلیکیشن های حرفه ای تری بنویسید، توجه به کارایی ویجت هایی است که برای پیاده سازی UI انتخاب می کنید. به طور کلی اپلیکیشن های فلاتر در حالت پیش فرض کارا هستند بنابراین نیازی نیست که از ابزارهای پیچیده برای تشخیص میزان کارایی اپ خود استفاده کنید. تنها باید از یک سری نکات ساده پیروی کنید. رعایت این نکات به شما کمک می کند که اپلیکیشنی با حداکثر کارایی ممکن بنویسید.

هزینه متد ()build را کنترل کنید.

یک نکته کلیدی در حفظ کارایی و سرعت اپلیکیشن فلاتر، پرهیز از بیلد کردن های غیرضروری است. از قرار دادن کدهای پرهزینه در متد ()build پرهیز کنید، چون این متد مکررا و با فراخوانی ویجت در هر بیلد اجرا خواهد شد.

استفاده از ویجت هایی مانند ()Column و ()ListView با لیستی طولانی از فرزندان که اکثر آنها در صفحه قابل مشاهده نیستند هزینه متد ()build را بالا می برد.

سعی کنید متد ()build را تا جایی که ممکن است کوچک نگه دارید. می توانید آن را بر مبنای کپسوله سازی به ویجت های کوچکتری بشکنید اما توجه داشته باشید که ویجت ها چطور تغییر می کنند:

وقتی در یک state مشخص ()setState را فراخوانی می کنید، تمام ویجت های فرزند ویجت اصلی ریبیلد
خواهند شد. بنابراین ()setState را دقیقا در بخشی از زیردرخت فراخوانی کنید که UI آن نیاز به تغییر دارد.
اگر تغییر به بخش کوچکی از درخت مرتبط است از فراخوانی ()setState در نودهای بالاتر درخت ویجت
خودداری کنید.

از افکت ها در حد ضرورت استفاده کنید.

استفاده از افکت ها می تواند هزینه بالایی داشته باشد. برخی از افکت ها در پشت صحنه ()saveLayer را فراخوانی می کنند که عملی هزینه بر است. هنگام به کارگیری افکت ها این قوانین را به خاطر داشته باشید:

  • از ویجت Opacity در هنگام ضرورت استفاده کنید. جایگزین های دیگری به جای استفاده مستقیم از ویجت Opacity وجود دارند. برای مثال کد زیر بدون استفاده از این ویجت، opacity برابر با 0.5 ایجاد می کند
Container(color: Color.fromRGBO(255, 0, 0, 0.5))

و بسیار سریع تر از کد زیر است:

Opacity(opacity: 0.5, child: Container(color: Colors.red))
  • کلیپ (Clip) کردن، متد ()saveLayer را فراخوانی نمی کند و بنابراین به اندازه Opacity پرهزینه نیست اما هنوز گران است و باید با دقت بیشتری آن را استفاده کنید.
  • ویجت های دیگری هم وجود دارند که ممکن است در شرایطی ()saveLayer را فراخوانی کنند و به همین دلیل پتانسیل پرهزینه بودن را دارند:
  • ShaderMask
  • ColorFilter
  • Chip:

اگر disabledColorAlpha != 0xff باشد ()saveLayer را فراخوانی می کند.

  • Text:

اگر از overflowShader استفاده کند باعث فراخوانی ()saveLayer می شود.

چند توصیه دیگر برای اجتناب از فراخوانی های رایج ()saveLayer وجود دارد:

  • برای ایجاد تصویر با افکت محو (Fade) می توانید به جای Opacity از ویجت FadeInImage استفاده کنید.
  • برای ایجاد مستطیل با گوشه های گرد به جای استفاده از Cliping rectangle از خصیصه borderRadius که بسیاری از کلاس های ویجت آن را در اختیار می گذارند استفاده کنید.

لیست ها و grid ها را به صورت lazy ایجاد کنید.

استفاده از ویجتی مثل ListView.builder که یک متد callback برای ساختن آیتم های لیست از شما دریافت می کند باعث می شود در ابتدا تنها بخشی از لیست که قابل نمایش در صفحه است ساخته شود.

با دقت بیشتری از انیمیشن استفاده کنید.

وقتی از AnimatedBuilder استفاده می کنید ویجت هایی در زیردرخت ویجت که به انیمیشن ارتباط ندارند را در builder قرار ندهید. این ویجت ها به ازای هر تیک انیمیشن مجددا بیلد می شوند. به جای این کار بخشی از زیردرخت را که باید انیمیشن روی آن اعمال شود به عنوان پارامتر child به AnimatedBuilder پاس بدهید.

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

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