Clever Geek Handbook

إعلان Flutter 1.20

أداء محسّن ، وإكمال تلقائي ، وأداة جديدة ، والمزيد!



مرحبًا بالجميع ، أنا إيفجيني ساتوروف من Surf. أقدم ترجمة المقال الرسمي حول آخر تحديث لـ Flutter 1.20 مع تعليقاتي. يصبح إطار العمل مصقولًا أكثر فأكثر مع كل إصدار جديد ، واليوم سنلقي نظرة على ما قدمته لنا القناة الثابتة في نهاية الصيف.







مع كل إصدار جديد ، نسعى جاهدين لجعل Flutter أسرع ، وأكثر إرضاء من الناحية الجمالية ، وأكثر إنتاجية ، ولضمان توفرها لكل منصة مدعومة. في الإصدار 1.20 ، والذي كان ، وقت إصدار هذه المقالة ، موجودًا بالفعل في قناتنا المستقرة ، تم تحسين Flutter وفقًا لكل معيار من هذه المعايير.



عند الحديث عن الأداء ، تمكنا من تحسين الأداء على أدنى مستويات محرك العرض وفي لغة Dart نفسها.



لجعل تطبيقات Flutter أكثر جمالية، لقد أضفنا العديد من تحسينات واجهة المستخدم إلى هذا الإصدار ، بما في ذلك دعم الإكمال التلقائي الذي طال انتظاره ، وطريقة جديدة لتحريك عناصر واجهة المستخدم وقياسها ، ودعم مؤشر الماوس ، وأدوات تحديد المواد المحدثة (مثل أدوات منتقي التاريخ والوقت) ، وصفحة جديدة سريعة الاستجابة مع تراخيص نافذة "حول" ، لتطبيقات سطح المكتب والأجهزة المحمولة Flutter.



لمساعدتك على زيادة إنتاجيتك ، قمنا بتحديث ملحق Flutter لـ Visual Studio Code :

  • يسمح لك باستخدام Dart DevTools في IDE الخاص بك ؛
  • الآن يمكنك نقل الملفات حول المشروع ، وسيتم تحديث الواردات تلقائيًا ؛
  • تمت إضافة مجموعة جديدة من البيانات الوصفية حتى تتمكن من كتابة أدواتك الخاصة.


بفضل انفتاح Flutter ومساهميه في مجتمع Flutter المذهل ، يتضمن هذا الإصدار 3029 طلب سحب مسرب و 5485 مشكلة مغلقة من 359 مساهمًا حول العالم ، بما في ذلك 270 مساهمًا من مجتمع Flutter. علاوة على ذلك ، يعد هذا رقمًا قياسيًا للمساهمين الذي كان لدينا في وقت الإصدار التالي. نود أن نعرب عن شكر خاص للمساهمين في CareF لـ 28 طلب سحب ، و AyushBherwani1998 لـ 26 (بما في ذلك 10 عينات من Google Summer of Code) ، و a14nلـ 13 طلب سحب ، اعتمدنا الكثير منها أثناء العمل على سلامة فارغة في Flutter (سنكتب المزيد عن هذا قريبًا). لم يكن بإمكاننا بناء Flutter بدون هذا الدعم المجتمعي الضخم. شكرا لمساهمتك!



مع كل إصدار جديد من Flutter ، نرى عدد المستخدمين ينمو بسرعة. في أبريل وحده ، كتبنا أن عدد تطبيقات Flutter على Google Play بلغ 50 ألفًا. خلال فترة الذروة ، كان النمو 10 آلاف طلب جديد شهريًا. الآن ، بعد ثلاثة أشهر فقط ، تم نشر أكثر من 90 ألفًا على Google Play.



تطبيقات الرفرفة. نحن نشهد أكبر نمو في الهند ، والتي أصبحت المنطقة الأولى لمطوري Flutter. على مدى الأشهر الستة الماضية ، تضاعف عددهم ، وهو نتيجة مباشرة لـزيادة استثمارات Google في المنطقة. أخيرًا ، لن يكون Flutter هو Flutter إذا لم يكن لـ Dart. من الجيد أن ترى Dart تحتل المرتبة 12 في أفضل 50 لغة برمجة من قبل مجلة IEEE Spectrum ، بزيادة أربعة مراكز عن العام الماضي.



تحسينات في الأداء لـ Flutter و Dart



نحن في Flutter نبحث دائمًا عن طرق جديدة لتقليل الحجم وتسريع تطبيقاتك. على سبيل المثال ، في هذا الإصدار ، أصلحنا مشكلة في الأداء تتعلق بإزالة رمز الخط عند اهتزاز الشجرة ، كما قمنا بتمكين هذا السلوك افتراضيًا عند إنشاء تطبيقات بخلاف تطبيقات الويب. تؤدي التحسينات المذكورة أعلاه إلى إزالة الخطوط غير المستخدمة وتقليل حجمها. اختبرنا ذلك على تطبيق Flutter Gallery - تم تقليل حجمه بمقدار 100 كيلوبايت . هذا هو السلوك الافتراضي الآن لإصدارات الإصدارات. في الوقت الحالي ، يعمل هذا فقط مع خطوط TrueType ، ولكن ستتم إزالة هذا القيد في الإصدارات المستقبلية.



تحسين الأداء الآخر هو تقليل خشونة الرسوم المتحركة عند العرض الأول خلال مرحلة الإحماء. شاهد كيف زادت نعومة الرسوم المتحركة (تم إبطاء التسجيل مرتين من أجل الوضوح).





مقارنة الرسوم المتحركة قبل وبعد تقديم التحمية SkSL



في حالة عرض تطبيق Flutter رسوم متحركة خشنة أثناء التشغيل الأول ، يمكن تصحيح ذلك باستخدام Skia Shading Language. عند التجميع المسبق في مرحلة بناء التطبيق ، يمكنه تسريع الرسوم المتحركة بأكثر من مرتين. إذا كنت ترغب في الاستفادة من هذه الوظيفة ، فانتقل إلى صفحة الإحماء SkSL على flutter.dev.







, Flutter- . ? - Flutter - . 1.20 . , , .



-, Apple (, ) — - Metal. OpenGL.



-, . , flutter build. , . , .


أخيرًا ، بينما نقوم بالتحسين لأجهزة سطح المكتب ، نواصل العمل على دعم الماوس. في هذا الإصدار ، أعدنا صياغة نظام اختبار إصابة الماوس لتوفير عدد من المزايا المعمارية التي لم تكن متاحة بسبب مشكلات الأداء. أدت عملية إعادة البناء هذه إلى تحسين الأداء 15 مرة في علاماتنا الدقيقة على الويب: سيحصل المستخدمون على مدقق نتائج أفضل وأكثر اتساقًا وأكثر دقة دون التضحية بالأداء.



بالإضافة إلى اختبار النتائج المحسّن ، أضفنا دعمًا لمؤشرات الماوس ، وهي واحدة من أكثر الميزات المطلوبة لأجهزة كمبيوتر سطح المكتب. سيعرض عدد قليل من الأدوات المصغّرة الأكثر استخدامًا المؤشرات التي تتوقعها افتراضيًا. أو يمكنك اختيار آخر من قائمة المؤشرات المدعومة.







- Flutter for Web . 1.20, . , .




مؤشرات الماوس الجديدة في عناصر واجهة المستخدم على Android



يعتمد هذا الإصدار من Flutter على Dart 2.9 ويتضمن وحدة فك ترميز UTF-8 جديدة ثنائية المرور. إنه مستند إلى الحالة ويحتوي على أساسيات فك التشفير المحسّنة في الجهاز الظاهري Dart والاستفادة من تعليمات SIMD جزئيًا.



UTF-8 هو أكثر طرق ترميز الأحرف شيوعًا على الإنترنت. تلعب القدرة على فك التشفير بسرعة دورًا مهمًا في الحصول على استجابات شبكة كبيرة. في معاييرنا لفك ترميز UTF-8 ، لاحظنا تحسينات في جميع المجالات. كانت الزيادة في السرعة تقريبًا 200٪ للغة الإنجليزية وما يصل إلى 400٪ للنصوص الصينية على أجهزة ARM منخفضة الأداء.



الإكمال التلقائي لتطبيقات Flutter



لطالما كان دعم الإكمال التلقائي لحقول النص في تطبيقات Flutter على Android و iOS أحد أكثر الميزات المرغوبة. يسعدنا أن نعلن أنه بعد طلب السحب 52126 ، لم تعد مضطرًا إلى مطالبة المستخدمين بإعادة إدخال البيانات التي جمعها نظام التشغيل بالفعل لهم.





الإكمال التلقائي قيد العمل



علاوة على ذلك ، فقد بدأنا بالفعل في تكييف هذه الوظيفة للويب.



عنصر واجهة مستخدم جديد لإجراءات القالب



في هذا الإصدار قمنا بإضافة عنصر واجهة مستخدم جديد - InteractiveViewer. تم تصميم InteractiveViewer لتنفيذ إجراءات نموذجية في تطبيقك ، مثل التحريك والتوسيع والسحب والإفلات ، والتي تعمل حتى عند تغيير حجمها. إليك كيفية عمل هذه الأداة لمثال اللوحة في Go .





التحجيم والتحريك وتغيير الحجم والسحب والإفلات باستخدام InteractiveViewer



لدمج InteractiveViewer في تطبيقك ، راجع وثائق API . يمكنك أيضًا تجربتها عمليًا في DartPad. إذا كنت مهتمًا بمعرفة المزيد حول تطوير InteractiveViewer ، فراجع هذا العرض التقديمي على قناة Chicago Flutter على YouTube .



في الإصدار الجديد ، أضفنا أيضًاالمزيد من الخيارات للسحب والإسقاط . على سبيل المثال، إذا كنت بحاجة إلى أن نعرف بالضبط أين حدث انخفاض على القطعة الهدف (كان هذا الخيار متاحة في السابق إلا لل القابل للسحب وجوه )، والآن يمكنك الحصول على هذه البيانات باستخدام DragTarget onAcceptDetails طريقة .





onAcceptDetails قيد التشغيل



تحقق من هذا المثال لمعرفة المزيد حول هذه الميزة. في الإصدار التالي من Flutter ، ستتوفر هذه المعلومات أيضًا أثناء السحب والإفلات ، مما يسمح لـ DragTarget بتحديث حالته المرئية في الوقت المناسب.







InteractiveViewer , , . , : — Justin McCandless. , Flutter. Justin ChicagoFlutter , Transform GestureDetector InteractiveViewer, .


Material- Slider, RangeSlider, TimePicker DatePicker



إلى جانب الأدوات الجديدة ، يحتوي هذا الإصدار على عدد من عناصر واجهة المستخدم المحدثة بما يتماشى مع مبادئ تصميم المواد الجديدة . سلايدر و RangeSlider على وجه التحديد. لمزيد من المعلومات ، راجع ما الجديد في عنصر واجهة المستخدم Slider؟ ...







تم تحديث شريط تمرير





المواد ، نطاق المواد المحدث ، شريط التمرير يحتوي



منتقي التاريخ على تصميم مضغوط جديد ودعم للنطاقات الزمنية.





تم تحديث منتقي التاريخ



أخيرًا ، قمنا بإعادة تصميم منتقي الوقت بالكامل.





تم تحديث TimePicker



يمكنك اختبار TimePicker الجديد في هذا العرض التوضيحي Flutter .



صفحة التراخيص المستجيبة



لقد أنشأنا صفحة ترخيص جديدة سريعة الاستجابة متوفرة في AboutDialog. تم تحديث





صفحة جديدة تحتوي على تراخيص ،



طلب سحب 57588 من المساهم  TonicArtos وفقًا لمبادئ تصميم المواد. لم يجعل هذا الأداة أكثر جمالًا فحسب ، بل أدى أيضًا إلى تحسين التنقل: أصبح من السهل الآن استخدامها على الأجهزة اللوحية وأجهزة الكمبيوتر المكتبية والهواتف الذكية. أشكر TonicArtos بالنظر إلى أن كل تطبيق Flutter يجب أن يعرض تراخيص الحزم التي يستخدمها ، فقد جعلت جميع تطبيقات Flutter أفضل!



تنسيق pubspec.yaml جديد لنشر المكونات الإضافية



بالطبع ، لا يقتصر Flutter على الأدوات فقط. هم أيضا أدوات. هناك الكثير من التحديثات في هذا الإصدار ، لذلك دعونا نتحدث عن أبرزها.



لنبدأ بإعلان لمؤلفي إضافات Flutter: لم يعد تنسيق pubspec.yaml القديم مدعومًا عند نشر المكونات الإضافية. إذا حاولت استخدامه ، فسوف تحصل على خطأ عند تنفيذ pub publish.





حدث خطأ أثناء نشر مكون إضافي بتنسيق pubspec قديم.



لم يكن التنسيق القديم يدعم تحديد الأنظمة الأساسية التي تعمل المكونات الإضافية عليها. لقد تم إهماله منذ Flutter 1.12. مطلوب الآن تنسيق pubspec.yaml الجديد لنشر المكونات الإضافية الجديدة أو المحدثة .



لا يزال بإمكان مستخدمي البرنامج المساعد استخدام تنسيق pubspec القديم. ستواصل جميع المكونات الإضافية الموجودة على pub.dev التي تستخدم pubspec.yaml المتوقفة العمل مع تطبيقات Flutter في المستقبل المنظور.



معاينة Dart DevTools المضمنة في Visual Studio Code



أكبر تحديث للأدوات في هذا الإصدار هو Visual Studio Code ، مع معاينة لميزة جديدة تجلب Dart DevTools مباشرة إلى مساحة التطوير.





معاينة مستكشف التخطيط في Visual Studio Code قم



بتمكين هذه الميزة باستخدام الإعداد dart.previewEmbeddedDevTools الجديد . تُظهر لقطة الشاشة أعلاه أداة Flutter Widget Inspector المضمنة في Visual Studio Code. باستخدام هذا الإعداد ، يمكنك تعيين صفحة مفضلة في قائمة Dart DevTools الموجودة على شريط الحالة.





تسمح لك هذه القائمة باختيار الصفحات المراد عرضها ،





ولا تزال هذه الميزة قيد المعاينة. اتصل بنا إذا كان لديك أي مشاكل في ذلك







— , , , Flutter-, VS Code ! , — -. , - , — . : VS Code. Android Studio .




يأتي أحدث إصدار من Dart DevTools مزودًا بإصدار محدث من أداة الشبكة المساعدة التي تتيح لك ملف تعريف طلبات الويب.





Dart DevTools



Network Page Dart DevTools مدة الصفحة والحالة ونوع المحتوى لاتصالات المقبس تضيف صفحة الشبكة الآن معلومات التوقيت إلى مكالمات الشبكة من التطبيق الخاص بك - إلى جانب البيانات الأخرى مثل الحالة ونوع المحتوى. تم إجراء تحسينات إضافية على واجهة تفاصيل الطلب ، والتي تعرض الآن البيانات من مقبس ويب أو طلب http. لدينا المزيد من الخطط لهذه الصفحة ، على سبيل المثال ، نريد إضافة عرض نص طلب واستجابة HTTP ، بالإضافة إلى مراقبة حركة مرور gRPC.



تحديث الواردات عند إعادة تسمية الملفات



ميزة أخرى جديدة في Visual Studio Code هي أنه يتم تحديث الواردات عند نقل الملفات أو إعادة تسميتها.





تحديث ملفات Dart أثناء التنقل تعمل



هذه الميزة حاليًا مع الملفات الفردية فقط ، ولكننا سنضيف قريبًا دعمًا لملفات أو مجلدات متعددة.



تعليق



Android Studio ، الآن إذا كنت مكانك ، فسأشعر بقلق شديد. واحدة من أكثر الميزات دقة ، ولكنها مهمة للغاية لـ IDE المحبوب الخاص بك الآن على VS Code. الآن يمكنك إعادة تسمية الملفات بقدر ما تريد! لا يتعين عليك تعديل جميع عمليات الاستيراد يدويًا (نعم ، أعلم أننا جميعًا مررنا بهذا). أوه ، كم ساعة عمل أنقذنا تحديث البرنامج المساعد VS Code. سيكون من المثير للاهتمام معرفة ما هي ميزات إعادة البناء المتقدمة الأخرى التي تستخدمها في VS Code؟ اكتب في التعليقات.



أدوات البيانات الوصفية



تحديث آخر للأشخاص الذين يقومون ببناء أدوات Flutter. لقد أنشأنا مشروعًا جديدًا على GitHub: هناك سنجمع البيانات الوصفية حول الإطار نفسه وننشرها. ستجد فيه ملفات قابلة للقراءة آليًا تحتوي على هذه البيانات:



هذه هي البيانات الوصفية التي نستخدمها بأنفسنا لملحقات Android Studio / IntelliJ و VS Code. اعتقدنا أنها قد تكون مفيدة عند إنشاء أدوات جديدة. في تطبيقات عائلة IntelliJ ، تسمح لك هذه البيانات الوصفية بتمكين عرض اللون المستخدم في رمز Flutter الخاص بك.







ترتبط بهذا ميزة جديدة في IntelliJ و Android Studio تعرض المربعات الملونة لـ Color.fromARGB () و Color.fromRGBO ().







نود أن نعرب عن شكر خاص لـ dratushnyy على GitHub للمساهمة في تحسين معاينات الألوان في IntelliJ!



قنوات منصة آمنة من النوع للاتصال عبر الأنظمة الأساسية



في استجابة لطلب من شعبية البرنامج المساعد الكتاب، قررنا أن تجربة كيفية جعل التواصل بين الرفرفة ومنصة أكثر أمنا وأسهل لل الإضافات و -إضافة إلى التطبيقات . للقيام بذلك ، أنشأنا Pigeon ، وهي أداة سطر أوامر تستخدم بناء جملة Dart لإنشاء رمز آمن من النوع أعلى أنابيب النظام الأساسي بدون تبعيات إضافية لوقت التشغيل. يسمح لك Pigeon باستدعاء أساليب Java / Objective-C / Kotlin / Swift وتمرير كائنات غير بدائية عن طريق استدعاء طرق Dart مباشرة (والعكس صحيح) بدلاً من مطابقة أسماء الطرق يدويًا في أنابيب النظام الأساسي وتسلسل الوسائط.







على الرغم من حقيقة أن Pigeon لا تزال في حالة ما قبل الإصدار ، فقد تطورت بدرجة كافية بحيث يمكننا استخدامها في المكون الإضافي video_player الخاص بنا . إذا كنت ترغب في محاولة حمامة على المشروع الخاص بك، وتحقق من تحديث وثائق قناة منصة و هذا المثال .







Pigeon. , . Mobius GDG DevParty, Flutter- . «» , . -. Pigeon — .





أثناء إنتاج Flutter 1.20 ، تلقت الأدوات العديد من التحديثات الرائعة التي لا يمكننا سردها جميعًا هنا. ومع ذلك ، سوف تكون مهتمًا بالتأكيد بإلقاء نظرة عليها:





كسر التغييرات



كما هو الحال دائمًا ، نحاول الحفاظ على كسر التغييرات إلى الحد الأدنى. فيما يلي قائمة بهذه التغييرات في Flutter 1.20.





ملخص



هذا هو أكبر إصدار من Flutter حتى الآن. في هذه المقالة ، تطرقنا فقط إلى أهم الأدوات وتحسينات الأداء وتحدثنا عن أكثر الأدوات الذكية إثارة للاهتمام ، الجديدة والمحدثة.



نخطط لإضافة دعم للأمان الفارغ (راجع مقالة Bob Nystrom التفصيلية فهم السلامة الفارغة ) ، وإصدار إصدارات جديدة من الإعلانات والخرائط ومكونات WebView ، وتوسيع دعم الأداة.



كيف يمكنك تطبيق ميزات Flutter الجديدة على مشروعك؟


More articles:


All Articles