👩‍❤️‍👩 👃🏻 ⛑️ إعلان Flutter 1.22 🤸🏿 ⚙️ 👨🏾‍🤝‍👨🏼

مرحبا! أنا إيفجيني ساتوروف ، رئيس فريق Flutter في Surf . أقدم ترجمة المقالة الرسمية حول تحديث Flutter 1.22 الجديد - كالعادة ، مع استكمالها بتعليقاتي.

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

قدت للتعرف على الإصدار الجديد من Flutter 1.22.

يسرنا أن نعلن عن أحدث إصدار من Flutter مع دعم مكثف لنظامي iOS 14 و Android 11. يبني Flutter 1.22 على الأسس التي وضعتها الإصدارات السابقة ويسمح للمطورين بإنشاء واجهات مستخدم سريعة وجميلة لمنصات متعددة من قاعدة شفرة واحدة. تحتوي إصداراتنا الفصلية المستقرة على ميزات جديدة وأداء محسّن وإصلاحات للأخطاء.

تم إصدار إصدارات جديدة من أنظمة تشغيل الأجهزة المحمولة مؤخرًا. ركزنا على جعل Android 11 و iOS 14 يعملان بشكل جيد في إصدار Flutter هذا.

تحديث Flutter لنظام التشغيل iOS 14 : دعم Xcode 12 الجديد ، والرموز الجديدة ودعم App Clips - نظير التطبيقات الفورية لنظام Android.

تحديث Flutter لنظام Android 11: تم إضافة دعم لأنواع مختلفة من "الانفجارات" للشاشات ، بالإضافة إلى رسوم متحركة أكثر سلاسة عند استدعاء لوحة مفاتيح ناعمة.

يأتي هذا الإصدار بعد شهرين فقط من إصدار الإصدار 1.20 ، ولكن حتى في هذا الوقت القصير أغلقنا 3024 إصدارًا وجمّدنا 1944 PRs من 197 مساهمًا.

التعليق

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

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

استعادة الدولة ،
مادة جديدة من أزرار "الكون" ،
مكتبة جديدة لدعم التعريب والتدويل ، والعمل مع Hot Reload ،
المستكشف الجديد ،
إصدار ثابت لـ Platform Views (قاعدة لخرائط Google ومكونات WebView الإضافية) ،
مفتاح يمكنك إضافته إلى التعليمات البرمجية لتحسين التمرير على الأجهزة ذات شاشات العرض عالية التردد.

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

منصة الهدف IOS 14

في كل مرة يتم الإعلان عن إصدار جديد من نظام تشغيل الهاتف المحمول ، نقوم باختباره بدقة: نبحث عن حالات عدم التوافق أو التغييرات التي قد تؤثر على تشغيل Flutter وأدواتها.

في حالة iOS 14 ، أجرينا بعض التغييرات على Flutter للتأكد من أنه يعمل بالطريقة التي يريدها المطورون بالضبط:

يتطلب Xcode 12 نظام التشغيل iOS 9.0 أو أعلى ، لذلك يحدد نموذجنا الافتراضي الآن 9.0 بدلاً من النظام الأساسي 8.0.
يعمل Flutter 1.22 على إصلاح أعطال iOS 14 ومشكلات عرض الخط.
تم إصلاح مشاكل النشر على الأجهزة المادية (لم يتم تشغيل التطبيق على جهاز - فقط على المحاكي) في Flutter 1.20.4.
, , , Flutter Flutter 1.20.4.
Flutter iOS 14 ( , Flutter-).

خلاصة القول: إذا كان iOS 14 هو النظام الأساسي المستهدف لتطبيق Flutter الخاص بك ، فإننا نوصي بشدة بإعادة بنائه باستخدام Flutter 1.22 ونشره في App Store الآن لتوفير أفضل تجربة مستخدم لمن لديهم iOS 14.

مزيد من المعلومات بما في ذلك للحصول على بعض الأفكار حول إضافة إلى التطبيق والروابط الداخلية والإشعارات ، راجع وثائق iOS 14 على flutter.dev .

بشكل منفصل ، نود أن نتحدث عن الدعم المحدث لخط iOS SF Symbols الجديد ، والذي ألهمنا لقضاء بعض الوقت في تحديث حزمة cupertino_icon . CupertinoIconsسيتم عرض حالات الاستخدام الحالية تلقائيًا في النمط الجديد بمجرد تحديث التبعيةcupertino_iconsإلى الإصدار الرئيسي الجديد 1.0. إذا كنت تستخدم cupertino_iconsالإصدار 1.0 مع Flutter 1.22 ، فستتمكن من الوصول إلى 900 أيقونة جديدة تقريبًا من خلال واجهة برمجة تطبيقات CupertinoIcons .

للحصول على قائمة كاملة من الرموز، راجع cupertino_icons معاينة الصفحة و الهجرة تفاصيل الصفحة في flutter.dev .

ميزة أخرى يمكنك تجربتها مع Flutter على iOS 14 هي App Clips. App Clips هي ميزة جديدة في iOS 14: هذه تطبيقات صغيرة يصل وزنها إلى 10 ميغابايت. إنها تتيح للمستخدم الوصول إلى وظائف معينة دون الحاجة إلى تنزيل التطبيق الكامل من AppStore. يمكن أن يعمل الإصدار Flutter 1.22 مع App Clips في تنفيذ أولي.

مقاطع التطبيق على Flutter

لمزيد من المعلومات حول كيفية إنشاء App Clips للتطبيقات باستخدام Flutter ، راجع الوثائق الموجودة على flutter.dev . انظر أيضا نموذج مشروع بسيط .

تعليق هل

تتذكر التطبيقات الفورية لنظام Android؟ يبدو أن Apple قررت إعادة عام 2017 وقدمت حلاً مشابهًا - App Clips. علاوة على ذلك ، يمكنك تنفيذ App Clips حتى لو لم تكتب تطبيقًا محليًا ، بل تطبيقًا مشتركًا بين الأنظمة الأساسية.

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

أندرويد 11

تم إصدار هذا الإصدار من Flutter بشكل متزامن تقريبًا مع إصدار Android 11. تم تحديث إطار ومحرك Flutter لدعم ميزتين جديدتين تم تقديمهما في أحدث إصدار من Android.

أولاً ، يأخذ Flutter الآن في الاعتبار موقع الانفجارات والقواطع على شاشة هاتف Android ، بالإضافة إلى الحواف الدائرية للشاشة.

باستخدام MediaQuery و SafeArea واجهات برمجة التطبيقات ، هو الآن من السهل لكتابة UI حيث المناطق القابلة للنقر عليها لا تهبط على القواطع وحواف مدورة من الشاشة.

لا يتغير حجم المنطقة المرئية من التطبيق فجأة ، ولكن بسلاسة. سيتم تمرير محتوى التطبيق متزامنًا مع لوحة المفاتيح على الشاشة.

انتبه إلى

إصدار بنك أبوظبي الأول رقم 19279- مشكلة طويلة الأمد حيث لا تتم مزامنة إظهار / إخفاء الرسوم المتحركة على الشاشة مع Flutter inset. تم إصلاح هذا لنظام Android 11.

في السابق ، كانت هناك مشاكل بسبب مكونات Flutter الإضافية عندما تم إدخال رمز Flutter في تطبيق Android أصلي. لقد أعدنا كتابة API لدمج Flutter مع Android وأصدرنا API v2 ، وهو خالٍ من أوجه القصور هذه. بدءًا من الإصدار 1.22 ، نتوقف عن دعم API القديم v1.

إذا واصلت استخدام Android v1 API ، فهذا ما يعنيه لك:

يتم إنشاء المكونات الإضافية الجديدة بدون دعم v1 API.
تمت —no-enable-android-embedding-v2إزالة علامة تكوين أداة Flutter . هذا هو السلوك الافتراضي الآن.
ستعرض التطبيقات القديمة التي لا تزال تستخدم API v1 تحذيرًا بالإيقاف أثناء الإنشاء ، والذي يشير إلى الوثائق الخاصة بدعم واجهات برمجة التطبيقات الإضافية الجديدة لنظام Android .

وفي الوقت نفسه ، إذا كان لا يزال لديك تطبيق Flutter استنادًا إلى الإصدار 1 من واجهة برمجة التطبيقات لنظام Android ، فسيستمر في العمل. ومع ذلك ، قد تبدأ في رؤية المكونات الإضافية الجديدة التي تستهدف API v2. لا يمكن استخدامها بواسطة Android API v1. لمزيد من المعلومات ، راجع وثائق تغيير التغييرات .

, Flutter , . 1.22 , — . App Clips, ( ) , . Android, , , — . .

«»

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

لمواكبة إرشادات المواد ، نقدم "عالمًا" جديدًا من الأزرار في Flutter 1.22.

"الكون" الجديد من أزرار التصميم متعدد

الأبعاد للحاجيات والسمات الجديدة أسماء فئات جديدة. أعدنا تسمية الفئات في Flutter لتتوافق مع مواصفات تصميم المواد .

تتبع السمات الجديدة النمط "الطبيعي" الذي تبناه Flutter مؤخرًا لعناصر واجهة مستخدم المواد الجديدة. النسخة التجريبية على DartPad

هذا ليس تغيير فصل، لأن دلالات FlatButton، OutlineButton،RaisedButton، ButtonBar، ButtonBarThemeو ButtonThemeلن تتغير. يمكنك مزج الأزرار القديمة ومطابقتها مع الأزرار الجديدة.

دعم جديد للتدويل والتعريب

تتوفر الوظيفة الأساسية التي تحتاجها لتدويل (i18n) وتوطين (l10n) تطبيقاتك في Flutter منذ البداية. في هذا الإصدار ، أضفنا دعم إعادة التحميل السريع لتحديث تطبيقك عند إضافة معلومات l10n جديدة.

لمزيد من المعلومات حول دعم Flutter l10n ، بما في ذلك الرسائل المترجمة والرسائل ذات المعلمات والتواريخ والأرقام والعملات ، اقرأ دليل مستخدم Flutter Internationalization .

أيضًا ، إذا كنت مهتمًا بـ i18n و l10n ، فقد تحتاج إلى استخدام سلاسل بأحرف لا تتناسب مع ASCII القديم البسيط - مثل Unicode و emoji. أصدر فريق Dart مؤخرًا حزمة الشخصياتمما يساعد المطورين على العمل مع مجموعات حروف حروف الحروف (المحسّنة) Unicode. تساعد هذه الحزمة في حل مشكلات مثل كيفية تقصير سلسلة بشكل صحيح مثل نص "A [British flag emoji] باللغة الإنجليزية" إلى أول 15 حرفًا. باستخدام الفصل String، سيكون هذا الاختصار عبارة عن نص [رمز تعبيري للعلم البريطاني] ، وهو 12 حرفًا فقط يمكن للمستخدم قراءتها. من ناحية أخرى ، فإن استخدام الحزمة charactersيعطي الاختصار الصحيح "نص [رمز تعبيري العلم البريطاني] باللغة الإنجليزية".

باستخدام هذا العلاقات العامة ، يستخدم Flutter حزمة أحرف للتعامل مع هذه الأحرف المعقدة بشكل صحيح. على سبيل المثال ، عند استخدامها TextFieldمع قيود maxLength، يتم الآن حساب أحرف مثل ‍‍ [عائلة مكونة من ثلاثة رموز تعبيرية] على أنها حرف واحد بشكل صحيح. أيضا ، مع هذا العلاقات العامةتتوفر حزمة الرموز تلقائيًا في مشاريع Flutter ، دون الحاجة إلى إضافتها يدويًا. نأمل أن يسهل هذا العمل مع سلاسل من جميع الأنواع من جميع المناطق. لمعرفة المزيد حول حزمة الرموز ، راجع المقالة الممتازة " معالجة السلاسل المناسبة في Dart ".

يمكن استخدام خرائط Google ومكونات WebView الإضافية في تطبيق الإنتاج

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

عرض المكون الإضافي webview_flutter flutter.dev

في Flutter 1.22 ، أضفنا تطبيق طرق عرض النظام الأساسي البديل الذي يزيل كل ما هو معروفمشاكل لوحة المفاتيح وقضايا الوصول على طرق عرض Android . يعمل هذا مع Android API المستوى 19 والإصدارات الأحدث (المستوى 20 المطلوب سابقًا). لقد أجرينا أيضًا تحسينات على تدفقات iOS التي تجعل عروض النظام الأساسي أكثر كفاءة وموثوقية (ولم تعد تتطلب إضافة علامة io.flutter.embedded_views_previewإلى iOS الخاص بك Info.plist). يدعم

المكون الإضافي webview_flutterوضع Android Platform Views الجديد ، ولكنه يحتاج حاليًا إلى التمكين يدويًا . عندما ينتشر بشكل أكبر في المجتمع ، سنقوم بتمكينه افتراضيًا.

لقد استفادت خرائط Google ومكونات WebView الإضافية بالفعل من التحسينات التي تم إدخالها على طرق عرض النظام الأساسي.

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

التعليق

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

Navigator 2.0

إذا كنت قد استخدمت التنقل في تطبيقات Flutter من قبل ، فربما تكون قد لاحظت أن بنية البيانات الرئيسية ، وهي مجموعة الصفحات التي يتنقلها المستخدم ، مخفية عنك. بدلا من ذلك ، للسيطرة عليه ، اتصل Navigator.pop()أو Navigator.push().

لنفترض أنك تريد عرض قائمة عناصر واجهة المستخدم على صفحتك الرئيسية والسماح للمستخدم بالنقر فوق أحدها للانتقال إلى صفحة تفاصيل هذا اللون المحدد.

يمكن تنفيذ شاشتين على النحو التالي:

class ColorListScreen extends StatelessWidget {
 final List<Color> colors;
 final void Function(Color color) onTapped;
 ColorListScreen({this.colors, this.onTapped});
 
 @override
 Widget build(BuildContext context) => Scaffold(
       appBar: AppBar(title: Text('Colors')),
       body: Column(
         children: [
           // you can see and decide on every color in this list
           for (final color in colors)
             Expanded(
               child: GestureDetector(
                 child: Container(color: color),
                 onTap: () => onTapped(color),
               ),
             )
         ],
       ),
     );
}
 
class ColorScreen extends StatelessWidget {
 final Color color;
 const ColorScreen({this.color});
 
 @override
 Widget build(BuildContext context) => Scaffold(
       appBar: AppBar(title: Text('Color')),
       body: Container(color: color),
     );
}

يتيح لك استخدام أبسط أسلوب Navigator 1.0 التنقل بين الشاشتين. تبدو سهلة للغاية:

class _ColorAppState extends State<ColorApp> {
 List<Color> _colors = [Colors.red, Colors.green, Colors.blue];
 
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: 'Color App',
       home: Builder(
         builder: (context) => ColorListScreen(
           colors: _colors,
           // the Navigator manages the list of pages itself; you can only push and pop
           onTapped: (color) => Navigator.push(
             context,
             MaterialPageRoute(builder: (context) => ColorScreen(color: color)),
           ),
         ),
       ),
     );
}

المكالمة Navigator.push()هي كل ما يتطلبه الأمر لوضع صفحة أخرى أعلى الصفحة الأولى ، مما يؤدي إلى إنشاء مجموعة من صفحتين. ومع ذلك ، بخلاف قائمة الحاويات التي تم إنشاؤها في طريقة الإنشاء ColorListScreen، فإن هذا المكدس مخفي عنك. ونظرًا لأنه مخفي ، فمن الصعب إدارته في سيناريوهات أخرى ، مثل التعامل مع الروابط العميقة للمسار الأولية المقدمة ، على سبيل المثال ، من خلال التضمين الأصلي أو عن طريق عنوان URL من الإنترنت أو نية من Android. من الصعب للغاية أيضًا إدارة التوجيه المتداخل بين الهياكل المختلفة لنفس الصفحة.

يعالج Navigator 2.0 هذه المشاكل وغيرها من خلال جعل حزمة الصفحات مرئية. فيما يلي مثال محدث للانتقال بين نفسه ColorListScreenو ColorScreen:

class _ColorAppState extends State<ColorApp> {
 Color _selectedColor;
 List<Color> _colors = [Colors.red, Colors.green, Colors.blue];
 
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: 'Color App',
       home: Navigator(
           // you can see and decide on every page in this list
         pages: [
           MaterialPage(
             child: ColorListScreen(
               colors: _colors,
               onTapped: (color) => setState(() => _selectedColor = color),
             ),
           ),
           if (_selectedColor != null) MaterialPage(child: ColorScreen(color: _selectedColor)),
         ],
         onPopPage: (route, result) {
           if (!route.didPop(result)) return false;
           setState(() => _selectedColor = null);
           return true;
         },
       ),
     );
}

يقوم التطبيق بشكل صريح بإنشاء Navigatorقائمة بالصفحات التي تمثل الحزمة الكاملة وتزويدها بها. نقوم بإنشاء فارغ _selectedColorللإشارة إلى أن اللون لم يتم تحديده بعد ، لذلك في البداية لا نعرضه ColorScreen. عندما يختار المستخدم لونًا ، فإننا نتصل setState()كالمعتاد لإخبار Flutter أنك تريد استدعاء الطريقة مرة أخرى build()، مما يؤدي الآن إلى إنشاء مكدس في ColorScreenالأعلى.

تقوم بتحديث حالتك في رد الاتصال OnPopPage: على سبيل المثال ، إذا عاد المستخدم إلى الشاشة ، فهذا يعني أنه "ألغى تحديد" اللون الحالي ولم نعد نريد عرض هذه الصفحة.

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

يمكنك الاستمرار في استخدام Navigator 1.0: سيعمل كما كان من قبل. لن نحذفه في أي وقت قريب. ومع ذلك ، نعتقد أنه إذا قمت بتجربة Navigator 2.0 ، فسوف تحبها.

. , . , , , , . .

, . — Flutter. Navigator 2.0 . Remi Rousselet Twitter, . , . — Surf. , , GitHub: , , , .

: Android

الميزة الجديدة التي يمكنك تجربتها في هذا الإصدار هي دعم استعادة الحالة على Android . هذه واحدة من أكثر الميزات المرغوبة لدينا مع 217 تعليقًا!

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

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

إليك مثال بسيط للغاية لاستعادة حالة تطبيق Flutter Counter الافتراضي:

class CounterState extends State<RestorableCounter> with RestorationMixin {
  @override
  String get restorationId => widget.restorationId;

  RestorableInt _counter = RestorableInt(0);

  @override
  void restoreState(RestorationBucket oldBucket) => registerForRestoration(_counter, 'count');

  void _incrementCounter() => setState(() => _counter.value++);

  @override
  Widget build(BuildContext context) => Scaffold(
      body: Center(child: Text('${_counter.value}')),
      floatingActionButton: FloatingActionButton(onPressed: _incrementCounter),
    );
}

باختصار ، تحصل كل عنصر واجهة مستخدم على مقطع تخزين مسجل مع RestorationMixin باستخدام معرف فريد. باستخدام RestorableProperty ( RestorableIntمثل الموجود هنا) لتخزين البيانات الخاصة بواجهة المستخدم وتسجيل تلك البيانات بوظيفة استعادة الحالة ، يتم حفظ البيانات تلقائيًا قبل خروج Android من التطبيق واستعادتها عندما تعود إلى الحياة. وهذا كل شيء. جميع البيانات المخزنة في نوع Restoration*، على سبيل المثال RestorableInt، RestorableStringو RestorableTextEditingController(لدينا عدة) ، سيتم استعادتها. وإذا لم نقم بتغطية جميع الأنواع التي ترغب في استعادتها ، فيمكنك إنشاء نوع خاص بك عن طريق التوسيع قابلة للترميم.

لاختبار استعادة الحالة تلقائيًا ، أضفنا واجهة برمجة تطبيقات إعادة تشغيل واستعادة جديدة إلى WidgetTester . وبالنسبة للاختبار اليدوي ، فإن الأسهل هو:

قم بتشغيل تطبيق Flutter مع تمكين استعادة الحالة على جهاز Android ،
تمكين خيار "عدم حفظ الإجراءات" في إعدادات مطور Android ،
تشغيل تطبيق Flutter ،
ضعها في الخلفية ،
ارجع اليها.

سيقوم Android "بقتل" واستعادة تطبيقك ، وسترى ما إذا كان كل شيء يعمل كما تتوقع.

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

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

— . Flutter- UX. — , (, — -), State . Restorable-, RestorationMixin.

, . : , - , , .

:

من خلال العمل مع شركائنا الداخليين في Google ، أجرى فريق Flutter تحسينات كبيرة في أداء التمرير عندما لا تتطابق معدلات الإدخال والعرض. على سبيل المثال ، يعمل إدخال Pixel 4 عند 120 هرتز ، وتعمل الشاشة عند 90 هرتز. يمكن أن يؤدي عدم الاتساق هذا إلى ضعف أداء التمرير. باستخدام العلم الجديد ، resamplingEnabledيمكنك حل هذه المشكلة:

void main() {
  GestureBinding.instance.resamplingEnabled = true;
  run(MyApp());
}

اعتمادًا على تباينات التردد المعنية ، يمكنك رؤية ما يصل إلى 97٪ أقل من زمن انتقال التمرير إذا قمت بتمكين هذه العلامة. في الإصدارات المستقبلية ، نخطط لتمكين هذه العلامة افتراضيًا.

أداة مطور Dart الموحدة الجديدة

كما هو الحال دائمًا ، لا يتعلق تحديث Flutter بالمحرك والإطار فحسب ، بل بالأدوات أيضًا. يتضمن Flutter 1.22 إصدارًا جديدًا من Dart (2.10) بالإضافة إلى أداة سطر أوامر جديدة dartقد تجدها مفيدة أيضًا.

تاريخياً ، كان لدى Dart العديد من أدوات المطورين الصغيرة (مثل dartfmtالتنسيق dartanalyzerوتحليل الكود). يحتوي Dart 2.10 على أداة تطوير موحدة dartتشبه إلى حد بعيد الأداة flutter.

بدءًا من Flutter 1.22 SDK ، يحتوي المجلد <flutter-sdk>/bin(الذي ربما يكون لديك فيه PATH) على الأمرين flutterو dart. لمزيد من المعلومات ، راجع منشور مدونة Dart 2.10 .

أداة تحليل حجم التطبيق

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

يمكنك استخدام هذه الأداة لجمع البيانات لتحليلها. مرر العلم --analysis-sizeبأي من الأوامر التالية:

flutter build apk
flutter build appbundle
flutter build ios
flutter build linux
flutter build macos
flutter build windows

يوفر استخدام هذا العلم عند إنشاء الأداة المخرجة Flutter ملخصًا لحجم الأداة وتكوينها. وهو يتضمن كودًا أصليًا وموارد وحتى تفصيلًا على مستوى الحزمة لرمز Dart المترجم.

نموذج إصدار APK Flutter Gallery Breakdown

هذا الملخص مفيد للتحليل السريع لحجم البنية وفهم سبب كونها كبيرة جدًا. بالإضافة إلى ذلك ، تتوفر البيانات المجمعة أيضًا كملف JSON يمكن عرضها في Dart DevTools ، مما يسمح لك بفحص محتوى التطبيق الخاص بك بشكل أكبر ، وتحديد مشكلات الحجم ، ورؤية التغييرات بين ملفي JSON مختلفين باتباع الإرشادات الموجودة على flutter.dev . بعد تحميل ملف JSON ، سيكون لديك واجهة تعرض مخططًا شبكيًا بحجم تطبيقك.

مثال على انهيار APK في وثائق Dart DevTools

لأداة تحليل حجم التطبيق على flutter.dev

التعليق

ما كان Android Studio قادرًا منذ فترة طويلة على القيام به بمفرده يمكن الآن تحليله من خلال Dev Tools. هذا أكثر مرونة. يمكنك الآن نشر التقارير في Json مباشرة إلى CI ومراقبة تغييرات حجم التجميع بمرور الوقت.

معاينة: صفحة الشبكة المحدثة في DevTools

ميزة أولية أخرى لـ DevTools في هذا الإصدار: يتم عرض نص الطلب الآن في علامة تبويب الشبكة .

لتمكين هذه الميزة ، تأكد من أنك على قناة Flutter dev عبر flutter channel devو flutter channel upgrade.

بالإضافة إلى ذلك ، بالنسبة للتطبيقات ذات الحجم الكبير لحركة مرور الشبكة ، فقد وفرنا إمكانية البحث والتصفية.

للحصول على وثائق في علامة التبويب الشبكة ، راجع قسم استخدام عرض الشبكة في flutter.dev .

استضافت علامة التبويب DevTools Inspector Tab في IntelliJ

لبعض الوقت الآن لدينا تم الحفاظ على نسختين من بعض أدوات الرفرفة لدينا: على سبيل المثال، المفتش وحة في IntelliJ للو المفتش التبويب في دارت DevTools. يؤدي هذا إلى إبطاء عملنا: فنحن بحاجة إلى الحفاظ على قاعدتي شفرات. أيضًا ، بعض الميزات ليست جزءًا من المكون الإضافي IntelliJ - على سبيل المثال ، Layout Explorer. لمعالجة هذه المشكلات ، قمنا بتمكين القدرة على استضافة علامة التبويب المفتش من Dart DevTools مباشرة داخل IntelliJ.

لتمكين هذا الخيار، انتقل إلى تفضيلات > اللغات وأطر > رفرفة > تمكين جزءا لا يتجزأ من DevTools مفتش .

, . Flutter Dev Podcast Android Studio VS Code.

, … . , IDE. . , Android Studio. .

Visual Studio Code

يتمثل الإجراء الشائع الذي يواجهه جميع مطوري Flutter في الانتقال من تتبعات مكدس الأخطاء في الجهاز إلى الموقع في كود المصدر حيث حدث الخطأ. في أحدث إصدار من ملحق Flutter لـ Visual Studio Code ، تم تحليل هذه الروابط الآن بشكل صحيح: يمكنك النقر عليها والانتقال إلى المكان المطلوب في الكود الذي حدث فيه الانهيار.

يبدو أنه شيء صغير ، لكن التعليقات الأولية على هذه الميزة إيجابية للغاية بالفعل.

كما هو الحال دائمًا ، هناك الكثير من قائمة تغييرات الأداة هنا ، لكنني أوصي بمراجعة الإعلانات التالية:

التركيز على العملاء: EasyA

EasyA هو تطبيق قائم على الاشتراك حيث يدرس الطلاب مع مدرسين لامعين عبر الرسائل الفورية. التطبيق مكتوب في Flutter. قامت Apple مؤخرًا بوضع علامة عليه باعتباره تطبيق اليوم .

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

فيل كووك ، الشريك المؤسس لشركة EasyA

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

كما هو الحال دائمًا ، نحاول تقليل عدد التغييرات المتقطعة إلى الحد الأدنى. فيما يلي قائمة من Flutter 1.22:

56413 منع viewport.showOnScreen من التمرير في منفذ العرض إذا كان Rect المحدد معروضًا بالفعل .
62395 [gen_l10n] إنشاء الحزمة الاصطناعية الافتراضي.
62588 قم ببناء مسارات أقل.

قد يكون الإصدار الثابت من Flutter 1.22 قد ظهر بسرعة كبيرة بعد الإصدار 1.20 ، ولكن هناك الكثير من الميزات الجيدة فيه بحيث لا يمكننا ذكر كل شيء هنا. نأمل أن يساعدك هذا الإصدار في إنشاء تطبيقات رائعة لنظامي التشغيل iOS و Android ، ولا ننتظر بفارغ الصبر لمعرفة ما سيحدث في المتاجر! نشكرك على دعمك: نحن نبني Flutter من أجلك.

إعلان Flutter 1.22