ما الجديد في Flutter 2؟

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

في ذلك الوقت ، لم يكن فريق Flutter يعتبر دعم Flutter للمنصات غير المحمولة مستقرًا وجاهزًا للإنتاج ، لكن الأمور تغيرت الآن.

رفرفة 2 هنا

في الثالث من مارس ، عقدت Google حدث Flutter Engage ، حيث تم إطلاق Fluter 2.0. هذا الإصدار هو حقًا إصدار 2.0 مناسب ، مع العديد من التغييرات الواعدة لجعل Flutter جاهزًا حقًا لتجاوز تطوير تطبيقات الأجهزة المحمولة.

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

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

إعلان آخر مثير للاهتمام - يُظهر هذا الإعلان مدى سرعة تحسن Flutter باعتباره SDK عبر الأنظمة الأساسية - هو إعلان Canonical أنه بالإضافة إلى تطوير مُثبِّت Ubuntu الجديد باستخدام Flutter ، سيستخدمون أيضًا Flutter كخيارهم الافتراضي لبناء تطبيقات سطح المكتب.

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

دعنا نلقي نظرة على بعض التغييرات التقنية التي تم إجراؤها على Flutter والتي دخلت القناة الثابتة مع الإصدار 2.0 وقم ببناء مثال بسيط للغاية لتطبيق سطح المكتب باستخدام Flutter قبل أن نستخلص بعض الاستنتاجات حول أنواع المشاريع المحددة التي يمكننا استخدام Flutter من أجلها ولا يمكننا استخدامها اعتبارًا من حاليا.

تغييرات الاستخدام العامة للأجهزة الأكبر حجمًا

وفقًا للإعلان ، تم إجراء العديد من التغييرات على Flutter لتقديم دعم أفضل للأجهزة غير المحمولة.

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

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

يبدو أيضًا أنه في مرحلة ما ، سيعرض Flutter تلقائيًا أشرطة تمرير مناسبة عندما يكون محتوى التطبيق قابلاً للتمرير.

في هذه الأثناء ، يمكنك فقط التفاف أي عرض قابل للتمرير باستخدام عنصر واجهة مستخدم شريط التمرير الذي تختاره وإنشاء ScrollController لإضافته كوحدة controller لكل من شريط التمرير والأداة القابلة للتمرير (في حالة عدم استخدام ScrollController ، فأنت تستخدمه تمامًا مثل TextEditingController TextField ). يمكنك مشاهدة مثال على استخدام شريط تمرير المواد العادي في أسفل هذه المقالة قليلاً في مثال تطبيق سطح المكتب.

تغييرات الويب Flutter

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

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

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

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

هذه في الواقع ليست إضافة إلى Flutter نفسها ، ولكنها إضافة حديثة إلى حزمة url_launcher من Google. يمكنك العثور على وصف كامل وأمثلة لاستخدام فئة Link في مرجع API الرسمي.

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

ومع ذلك ، لا يزال اختيار النص ليس من الدرجة الأولى لأنه لا يمكن تحديد النص عبر عناصر واجهة SelectableText المختلفة ولا يزال النص القابل للتحديد غير افتراضي ، لكننا سنتحدث عن هذا بالإضافة إلى عيوب ويب Flutter البارزة الأخرى (نقص دعم تحسين محركات البحث (SEO)) ، أولاً وقبل كل شيء) في ختام هذه المقالة.

تغييرات Flutter Desktop

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

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

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

مثال على تطبيق سطح مكتب مصمم برفرفة

أصبح دعم Flutter لسطح المكتب الآن مستقرًا تمامًا وقابل للاستخدام ، وسيتحسن بالتأكيد في المستقبل تمامًا كما تحسن Flutter بالكامل حتى الآن ، لذلك دعونا نحاول رؤيته أثناء العمل ! يمكنك تنزيل مثال الكود بالكامل على GitHub repo.

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

أول شيء تفعله هو معرفة التبعيات الخاصة بك .

بادئ ذي بدء ، يجب تمكين تطوير Flutter لسطح المكتب باستخدام الأمر

 flutter config --enable-${OS_NAME}-desktop

حيث يمكنك استبدال ${OS_NAME} بنظام تشغيل سطح المكتب الذي تختاره ، إما windows أو linux أو macos . في هذا المثال ، سأستخدم Linux نظرًا لأننا سنستخدم سمة Ubuntu.

هناك أيضًا تبعيات أخرى مطلوبة لإنشاء تطبيقات أصلية لكل نظام أساسي ، على سبيل المثال في Windows تحتاج إلى Visual Studio 2019 ، على نظام macOS تحتاج إلى Xcode و CocoaPods ويمكنك العثور على قائمة محدثة من تبعيات Linux على موقع Flutter الرسمي.

ثم قم بإنشاء مشروع Flutter ، وتشغيل:

 flutter create flutter_ubuntu_desktop_example

بعد ذلك ، يجب أن نحصل على السمة نفسها (التبعية الوحيدة لتطبيقنا) عن طريق إضافة yaru إلى dependencies تطبيقك في pubspec.yaml (في جذر شجرة المصدر):

 dependencies: yaru: ^0.0.0-dev.8 flutter: sdk: flutter

بعد ذلك ، دعنا ننتقل إلى lib/main.dart ، حيث توجد شفرة تطبيقنا.

أولاً ، نقوم باستيراد الأشياء التي نحتاجها. في هذه الحالة ، سنقوم فقط باستيراد مكتبة Flutter Material Design العادية وموضوع Yaru (سنستخدم سمة الإضاءة فقط لهذا المثال ، لذا show هذا الكائن فقط في حزمة Yaru):

 import 'package:flutter/material.dart'; import 'package:yaru/yaru.dart' show yaruLightTheme;

بدلاً من الحصول على فئة تطبيق منفصلة ، سنقوم باستدعاء مُنشئي MaterialApp بشكل main عند استدعاء runApp ، لذلك قمنا بتعيين سمة التطبيق ، والتي ستكون سمة Yaru ، وبشكل أكثر تحديدًا موضوع الضوء المسمى yaruLightTheme :

 void main() => runApp(MaterialApp( theme: yaruLightTheme, home: HomePage(), ));

ستكون HomePage الرئيسية عبارة عن أداة StatefulWidget ، تحتوي على البيانات التي سنعرضها نظرًا لأنها غير قابلة للتغيير (تذكر أن الأدوات دائمًا غير قابلة للتغيير ، ويتم التعامل مع قابلية التغيير في State StatefulWidget ):

 class HomePage extends StatefulWidget { final dataToShow = { "First example data": [ "First string in first list item", "Second in first", "Example", "One" ], "Second example": [ "This is another example", "Check", "It", "Out", "Here's other data" ], "Third example": [ "Flutter is", "really", "awesome", "and", "it", "now", "works", "everywhere,", "this", "is", "incredible", "and", "everyone", "should", "know", "about", "it", "because", "someone", "must", "be", "missing", "out", "on", "a lot" ] }.entries.toList(); @override createState() => HomePageState(); }

HomePageState هو المكان الذي نحدد فيه واجهة مستخدم التطبيق وسلوكه. بادئ ذي بدء ، دعنا ننظر إلى شجرة الأدوات التي نريد بناءها (تم استبعاد عناصر القائمة والشبكة وأدوات التباعد):

سنقوم بتقييد Column على اليسار (العمود الذي يعرض عناصر التحكم الخاصة بعناصر واجهة المستخدم لتظهر على الجانب الأيمن من التطبيق) بعرض معين (400 بكسل على سبيل المثال) باستخدام Container ، بينما يجب على GridView على اليمين يتم Expanded لملء العرض.

على الجانب الأيسر من Row (داخل Column ) ، يجب أن ListView عرض القائمة لملء المساحة الرأسية أسفل Row الأزرار في الأعلى. داخل Row في الأعلى ، نحتاج أيضًا إلى توسيع TextButton (زر إعادة الضبط) لملء الفراغ على يمين الشيفرة الأيمن IconButton s.

HomePageState الناتج الذي يقوم بكل ذلك ، جنبًا إلى جنب مع المنطق الضروري لإظهار العناصر الصحيحة على اليمين اعتمادًا على ما يختاره المستخدم على اليسار ، هو التالي:

 class HomePageState extends State<HomePage> { int selected = 0; ScrollController _gridScrollController = ScrollController(); incrementSelected() { if (selected != widget.dataToShow.length - 1) { setState(() { selected++; }); } } decrementSelected() { if (selected != 0) { setState(() { selected--; }); } } @override Widget build(BuildContext context) { return Scaffold( body: Row( children: [ Container( color: Colors.black12, width: 400.0, child: Column( children: [ Row( children: [ IconButton( icon: Icon(Icons.chevron_left), onPressed: decrementSelected, ), IconButton( icon: Icon(Icons.chevron_right), onPressed: incrementSelected, ), Expanded( child: Center( child: TextButton( child: Text("Reset"), onPressed: () => setState(() => selected = 0), ), )) ], ), Expanded( child: ListView.builder( itemCount: widget.dataToShow.length, itemBuilder: (_, i) => ListTile( title: Text(widget.dataToShow[i].key), leading: i == selected ? Icon(Icons.check) : Icon(Icons.not_interested), onTap: () { setState(() { selected = i; }); }, ), ), ), ], )), Expanded( child: Scrollbar( isAlwaysShown: true, controller: _gridScrollController, child: GridView.builder( controller: _gridScrollController, itemCount: widget.dataToShow[selected].value.length, gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( maxCrossAxisExtent: 200.0), itemBuilder: (_, i) => Container( width: 200.0, height: 200.0, child: Padding( padding: const EdgeInsets.all(8.0), child: Card( child: Center( child: Text(widget.dataToShow[selected].value[i])), ), ), )), ), ), ], ), ); } }

وانتهينا!

ثم تقوم ببناء تطبيقك باستخدام

 flutter build ${OS_NAME}

حيث ${OS_NAME} هو اسم نظام التشغيل الخاص بك ، وهو نفس الاسم الذي استخدمته سابقًا لتمكين تطوير Flutter لسطح المكتب باستخدام flutter config .

سيكون الملف الثنائي المترجم لتشغيل تطبيقك

 build/linux/x64/release/bundle/flutter_ubuntu_desktop_example

على Linux و

 build\windows\runner\Release\flutter_ubuntu_desktop_example.exe

على Windows ، يمكنك تشغيل ذلك وستحصل على التطبيق الذي عرضته عليك في بداية هذا القسم.

في نظام macOS ، تحتاج إلى فتح macos/Runner.xcworkspace في Xcode ثم استخدام Xcode لإنشاء تطبيقك وتشغيله.

تغييرات رفرفة أخرى

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

الميزة التي أرادها الكثير منا ، مطورو Flutter ، هي تقديم دعم أفضل لإعلانات Admob ، وهي الآن مدرجة أخيرًا في حزمة google_mobile_ads الرسمية. واحد آخر هو autocomplete ؛ هناك عنصر واجهة مستخدم لمواد Autocomplete ، بالإضافة إلى عنصر واجهة مستخدم RawAutocomplete أكثر قابلية للتخصيص.

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

تغييرات لغة Dart الأخيرة

من المهم أن تكون على دراية بالتغييرات التي تم إجراؤها على لغة Dart والتي تؤثر على تطوير تطبيق Flutter.

على وجه الخصوص ، جلبت Dart 2.12 دعم قابلية التشغيل البيني للغة C (موصوف بالتفصيل ومع تعليمات لمنصات مختلفة على موقع Flutter الرسمي) ؛ أيضًا ، تمت إضافة null-safety الصوت إلى قناة إطلاق Dart المستقرة.

null-safety

كان أكبر تغيير تم إجراؤه على Dart هو إدخال null-safety التي تحصل على المزيد والمزيد من الدعم من حزم الجهات الخارجية بالإضافة إلى المكتبات والحزم التي طورتها Google.

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

في الوقت الحالي ، قد لا يكون هذا خيارًا لك لأن جميع حزم Pub ليست آمنة تمامًا وهذا يعني أنه إذا كنت بحاجة إلى إحدى هذه الحزم لتطبيقك ، فلن تتمكن من الاستفادة من المزايا الموجودة على لاغية السلامة.

جعل تطبيقك null-safe

إذا سبق لك العمل مع Kotlin ، فسيكون نهج Dart الخاص بالسلامة الفارغة مألوفًا لك إلى حد ما. ألق نظرة على دليل Dart الرسمي حوله للحصول على دليل أكثر اكتمالاً null-safety .

جميع الأنواع التي تعرفها ( String ، و int ، و Object ، و List ، والفئات الخاصة بك ، وما إلى ذلك) أصبحت الآن غير قابلة للإلغاء: لا يمكن أبدًا أن تكون قيمتها null .

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

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

 int? a = 1

في أي وقت ، يمكنك ضبطه على null ولن يبكي المترجم عليه.

الآن ، ماذا لو كان لديك قيمة لاغية واستخدمتها لشيء يتطلب قيمة غير قابلة للإلغاء؟ للقيام بذلك ، يمكنك ببساطة التحقق من أنه ليس فارغًا:

 void function(int? a) { if(a != null) { // a is an int here } }

إذا كنت تعرف على يقين 100٪ أن المتغير موجود وليس فارغًا ، يمكنك فقط استخدام ! عامل مثل هذا:

 String unSafeCode(String? s) => s!;

استنتاجات الرسم: ماذا يمكننا أن نفعل مع Flutter 2؟

مع استمرار تطور Flutter ، هناك المزيد والمزيد من الأشياء التي يمكننا فعلها به ، ولكن لا يزال من غير المعقول القول إنه يمكن استخدام Flutter في أي مشروع تطوير تطبيق من أي نوع.

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

من ناحية أخرى ، الويب وسطح المكتب غير موجودان تمامًا بعد.

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

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

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

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

مصادر إضافية

• Keynote (Flutter Engage) ، يوتيوب
• الجديد في Flutter 2، Flutter، Medium
• فهم null safety ، Dart.dev
• تطوير الويب وسطح المكتب سريع الاستجابة مع مجلة Flutter، Smashing
• حل المشكلات المشتركة بين الأنظمة الأساسية عند العمل مع Flutter، Smashing Magazine