Ce este nou în Flutter 2?

Anul trecut, am scris două articole aici pe Smashing Magazine despre utilizarea Flutter pe platformele web și desktop. Primul articol a fost o introducere generală în dezvoltarea web și desktop și s-a concentrat pe construirea unei interfețe de utilizare receptive; al doilea articol a fost despre provocările pe care le-ați putea confrunta atunci când încercați să dezvoltați o aplicație Flutter care rulează pe mai multe platforme.

Pe atunci, suportul Flutter pentru platformele non-mobile nu era considerat stabil și pregătit pentru producție de către echipa Flutter, dar lucrurile s-au schimbat acum.

Flutter 2 este aici

Pe 3 martie, Google a organizat evenimentul Flutter Engage, unde a fost lansat Fluter 2.0. Această versiune este într-adevăr o versiune 2.0 adecvată, cu multe modificări care promit să facă Flutter cu adevărat pregătit pentru a merge dincolo de dezvoltarea aplicațiilor mobile.

Schimbarea care este esențială pentru a înțelege de ce contează Flutter 2.0 este că dezvoltarea web este acum oficial parte a canalului stabil, iar suportul desktop va urma în curând și pe canalul stabil. De fapt, este activat în prezent într-o formă asemănătoare lansării candidate ca un instantaneu beta de lansare timpurie pe canalul stabil.

În anunț, Google nu a oferit doar un indiciu despre cum va fi viitorul Flutter. Au existat, de asemenea, exemple reale despre modul în care companiile mari lucrează deja la aplicațiile Flutter pentru a-și înlocui aplicațiile existente cu altele care au performanțe mai bune și le permit dezvoltatorilor să fie mai productivi. De exemplu, cel mai mare producător de mașini din lume, Toyota, va construi acum sistemul de infotainment pe mașinile lor folosind Flutter.

Un alt anunț interesant – acesta arată cât de repede se îmbunătățește Flutter ca SDK multiplatformă – este anunțul Canonical că, pe lângă dezvoltarea noului lor program de instalare Ubuntu folosind Flutter, vor folosi și Flutter ca opțiune implicită pentru a crea aplicații desktop.

Ei au lansat, de asemenea, o versiune Flutter a temei Yaru de la Ubuntu, pe care o vom folosi mai târziu în articol pentru a construi o aplicație desktop Flutter care arată perfect ca acasă pe desktopul Ubuntu, folosind, de asemenea, câteva dintre noile funcții Flutter. Puteți arunca o privire la anunțul Google Flutter 2 pentru a obține o imagine mai completă.

Să ne uităm la unele dintre modificările tehnice aduse Flutter care au ajuns pe canalul stabil cu versiunea 2.0 și să construim un exemplu de aplicație desktop foarte simplu cu Flutter înainte de a trage câteva concluzii cu privire la tipurile de proiecte specifice pentru care am putea și nu am putea folosi Flutter de acum. acum.

Modificări generale de utilizare pentru dispozitive mai mari

Potrivit anunțului, Flutter au fost făcute multe modificări pentru a oferi un suport mai bun pentru dispozitivele care nu sunt dispozitive mobile.

De exemplu, un exemplu evident de ceva care era necesar pentru aplicațiile web și desktop și până acum trebuia făcut folosind pachete terțe sau implementându-l singur este o bară de defilare .

Acum există o bară de Scrollbar încorporată care se poate încadra direct în aplicația dvs., uitându-se exact cum ar trebui să arate o bară de derulare în platforma specifică: cu sau fără o pistă, cu posibilitatea de a derula făcând clic pe pistă, de exemplu, care este uriaș dacă doriți ca utilizatorii dvs. să se simtă ca acasă de la început atunci când utilizați aplicația Flutter. De asemenea, îl puteți tema și personaliza.

De asemenea, se pare că, la un moment dat, Flutter va afișa automat barele de defilare adecvate atunci când conținutul aplicației poate fi derulat.

Între timp, puteți pur și simplu să includeți orice vizualizare care poate fi derulată cu widget-ul bară de derulare la alegere și să creați un ScrollController pe care să îl adăugați ca controller atât pentru bara de defilare, cât și pentru widget-ul care poate fi derulat (în cazul în care nu ați folosit niciodată un ScrollController , îl utilizați exact ca un TextEditingController pentru un TextField ). Puteți vedea un exemplu de utilizare a unei bare de defilare Material obișnuite puțin mai jos în acest articol, în exemplul aplicației desktop.

Schimbări Flutter Web

Flutter pentru web era deja într-o formă destul de utilizabilă, dar au existat probleme de performanță și de utilizare, ceea ce însemna că nu a fost niciodată la fel de șlefuit ca Flutter mobil. Odată cu lansarea Flutter 2.0, au fost multe îmbunătățiri ale acestuia, mai ales când vine vorba de performanță .

Ținta de compilare, anterior foarte experimentală și dificil de utilizat pentru a vă reda aplicația (cu WebAssembly și Skia) se numește acum CanvasKit . A fost rafinat pentru a oferi o experiență consistentă și performantă atunci când treceți de la rularea nativă a unei aplicații Flutter pe dispozitive mobile la rularea acesteia într-un browser.

Acum, în mod implicit, aplicația dvs. va reda folosind CanvasKit pentru utilizatorii de web desktop și cu redarea implicită HTML (care a avut și îmbunătățiri, dar nu este la fel de bună ca CanvasKit) pentru utilizatorii de web mobil.

Dacă ați încercat să utilizați Flutter pentru a crea aplicații web, poate ați observat că nu a fost deosebit de intuitiv să aveți ceva la fel de simplu ca un hyperlink. Acum, cel puțin, puteți crea hyperlinkuri un pic mai mult ca atunci când utilizați HTML, folosind clasa Link .

Aceasta nu este de fapt o completare la Flutter în sine, ci o adăugare recentă la pachetul url_launcher de la Google. Puteți găsi o descriere completă și exemple de utilizare a clasei Link în referința oficială API.

Selectarea textului a fost îmbunătățită, deoarece acum punctul de pivotare corespunde locului în care utilizatorul a început să selecteze text și nu marginea din stânga a textului SelectableText în cauză. De asemenea, acum există opțiuni Copy/Cut/Paste și funcționează corect.

Cu toate acestea, selectarea textului încă nu este de top, deoarece nu este posibil să selectați text în diferite widget-uri SelectableText , iar textul selectabil încă nu este implicit, dar vom vorbi despre acest lucru, precum și despre alte dezavantaje remarcabile Flutter web (lipsa suportului SEO , în primul rând) în încheierea acestui articol.

Schimbări Flutter Desktop

Când am scris despre dezvoltarea web și desktop cu Flutter anul trecut, m-am concentrat mai ales pe construirea de aplicații web cu Flutter, având în vedere că dezvoltarea desktopului era încă considerată foarte experimentală (nici măcar pe canalul beta ). Acum însă, suportul pentru desktop Flutter urmează să urmeze în curând suportul web și va fi stabil.

Performanța și stabilitatea au fost îmbunătățite destul de mult, iar îmbunătățirile în utilizarea generală pentru dispozitivele mai mari operate cu mouse și tastatură, care beneficiază atât de mult aplicațiile web, înseamnă, de asemenea, că aplicațiile desktop Flutter sunt acum mai utilizabile.

Există încă o lipsă de instrumente pentru aplicațiile desktop și există încă multe erori restante destul de grave, așa că nu încercați să le utilizați pentru următorul proiect de aplicație desktop destinat distribuției publice.

Exemplu de aplicație desktop creată cu Flutter

Suportul pentru desktop Flutter este acum destul de stabil și utilizabil, totuși și cu siguranță se va îmbunătăți în viitor, la fel de mult cum s-a îmbunătățit în întregime Flutter până acum, așa că hai să încercăm să -l vedem în acțiune ! Puteți descărca întregul exemplu de cod pe un depozit GitHub.

Aplicația pe care o vom construi este următoarea aplicație foarte simplă. Avem o bară de navigare laterală împreună cu câteva elemente de conținut pentru fiecare dintre secțiunile de navigare.

Primul lucru de făcut este să vă dați seama de dependențele dvs.

În primul rând, trebuie să aveți activată dezvoltarea pentru desktop Flutter, folosind comanda

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

unde ai înlocui ${OS_NAME} cu sistemul de operare desktop ales, fie windows , linux sau macos . Pentru acest exemplu, voi folosi Linux, având în vedere că vom folosi tema Ubuntu.

Există și alte dependențe necesare pentru a construi aplicații native pentru fiecare platformă, de exemplu pe Windows aveți nevoie de Visual Studio 2019, pe macOS aveți nevoie de Xcode și CocoaPods și puteți găsi o listă actualizată a dependențelor Linux pe site-ul oficial Flutter.

Apoi creați un proiect Flutter, rulând:

 flutter create flutter_ubuntu_desktop_example

Apoi, trebuie să obținem tema în sine (singura dependență a aplicației noastre) adăugând yaru la dependencies aplicației dvs. în pubspec.yaml (în rădăcina arborelui sursă):

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

Apoi, să trecem la lib/main.dart , unde se află codul aplicației noastre.

În primul rând, importăm lucrurile de care avem nevoie. În acest caz, vom importa doar biblioteca obișnuită Flutter Material Design și tema Yaru (vom folosi doar tema ușoară pentru acest exemplu, așa că vom show doar acel obiect din pachetul Yaru):

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

În loc să avem o clasă de aplicație separată, vom apela constructorii MaterialApp direct în main atunci când apelăm runApp , așa că acolo vom seta tema aplicației, care va fi tema Yaru, mai precis tema ușoară numită yaruLightTheme :

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

Pagina de HomePage va fi un StatefulWidget , deținând datele pe care le vom arăta, având în vedere că este imuabilă (rețineți, widget-urile sunt întotdeauna imuabile, mutabilitatea este gestionată în State unui 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 este locul în care definim interfața de utilizare și comportamentul aplicației. În primul rând, să ne uităm la arborele widget-urilor pe care vrem să-l construim (excluse articolele din listă și grilă și widgeturile de spațiere):

Vom restricționa Column din stânga (cea care arată comenzile pentru ca widget-urile să se afișeze în partea dreaptă a aplicației) la o anumită lățime (400 pixeli, de exemplu) folosind un Container , în timp ce GridView din dreapta ar trebui să restricționăm. fi Expanded pentru a umple vizualizarea.

În partea stângă a Row (în cadrul Column ), ListView ar trebui să se extindă pentru a umple spațiul vertical de sub Row de butoane din partea de sus. În Row din partea de sus, trebuie să extindem și TextButton (butonul de resetare) pentru a umple spațiul din dreapta IconButton din stânga și din dreapta.

Rezultatul HomePageState care face toate acestea, împreună cu logica necesară pentru a afișa lucrurile potrivite în dreapta, în funcție de ceea ce selectează utilizatorul în stânga, este următorul:

 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])), ), ), )), ), ), ], ), ); } }

si am terminat!

Apoi îți construiești aplicația cu

 flutter build ${OS_NAME}

unde ${OS_NAME} este numele sistemului de operare, același pe care l-ați folosit mai devreme pentru a activa dezvoltarea desktop Flutter folosind flutter config .

Binarul compilat pentru a rula aplicația dvs. va fi

 build/linux/x64/release/bundle/flutter_ubuntu_desktop_example

pe Linux și

 build\windows\runner\Release\flutter_ubuntu_desktop_example.exe

pe Windows, puteți rula asta și veți obține aplicația pe care v-am arătat-o ​​la începutul acestei secțiuni.

Pe macOS, trebuie să deschideți macos/Runner.xcworkspace în Xcode și apoi să utilizați Xcode pentru a crea și rula aplicația.

Alte modificări Flutter

Au existat, de asemenea, câteva modificări care afectează și dezvoltarea mobilă cu Flutter, iar aici este doar o scurtă selecție a unora dintre ele.

O caracteristică pe care o doream mulți dintre noi, dezvoltatorii Flutter, este o mai bună asistență pentru reclamele Admob , iar acum este inclusă în sfârșit în pachetul oficial google_mobile_ads . Un altul este autocomplete ; există un widget de material Autocomplete pentru acesta, precum și un widget RawAutocomplete mai personalizabil.

Adăugarea Link -ului despre care am discutat în secțiunea despre dezvoltarea web se aplică de fapt pentru toate platformele , chiar dacă efectele sale vor fi resimțite cel mai mult de cei care lucrează la proiectele web Flutter.

Modificări recente ale limbajului Dart

Este important să fiți conștienți de modificările aduse limbajului Dart care afectează dezvoltarea aplicației Flutter.

În special, Dart 2.12 a adus suport pentru interoperabilitatea limbajului C (descris în detaliu și cu instrucțiuni pentru diferite platforme pe site-ul oficial Flutter); de asemenea, a fost adăugată null-safety a sunetului canalului stabil de lansare Dart.

null-safety

Cea mai mare schimbare care a fost făcută pentru Dart este introducerea null-safety care primește tot mai mult suport de la pachete terțe, precum și din bibliotecile și pachetele dezvoltate de Google.

Siguranța nulă aduce optimizări ale compilatorului și reduce șansa de erori de rulare, așa că, chiar dacă acum este opțional să o susțineți, este important să începeți cel puțin să înțelegeți cum să vă faceți aplicația sigură pentru nul.

În acest moment, totuși, aceasta poate să nu fie o opțiune pentru dvs., deoarece nu toate pachetele Pub sunt complet sigure pentru nul și asta înseamnă că, dacă aveți nevoie de unul dintre acele pachete pentru aplicația dvs., nu veți putea profita de beneficiile de pe nulă-siguranță.

Asigurați-vă aplicația null-safe

Dacă ați lucrat vreodată cu Kotlin, abordarea lui Dart față de siguranța nulă vă va fi oarecum familiară. Aruncă o privire la ghidul oficial al lui Dart pentru un ghid mai complet despre null-safety a lui Dart.

Toate tipurile cu care sunteți familiarizat ( String , int , Object , List , propriile clase etc.) sunt acum nenullabile: valoarea lor nu poate fi niciodată null .

Aceasta înseamnă că o funcție care are un tip de returnare care nu poate fi anulată trebuie să returneze întotdeauna o valoare , altfel veți obține o eroare de compilare și trebuie să inițializați întotdeauna variabilele care nu pot fi anulate, cu excepția cazului în care este o variabilă locală căreia i se atribuie o valoare înainte. este folosit vreodată.

Dacă doriți ca o variabilă să poată fi nulă, trebuie să adăugați un semn de întrebare la sfârșitul numelui tipului, de exemplu atunci când declarați un număr întreg ca acesta:

 int? a = 1

În orice moment, îl puteți seta la null și compilatorul nu va plânge din cauza asta.

Acum, ce se întâmplă dacă aveți o valoare nullabilă și o utilizați pentru ceva care necesită o valoare care nu poate fi anulată? Pentru a face asta, puteți pur și simplu să verificați că nu este nul:

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

Dacă știți cu certitudine de 100% că o variabilă există și nu este nulă, puteți utiliza pur și simplu ! operator, astfel:

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

Tragerea concluziilor: ce putem face cu Flutter 2?

Pe măsură ce Flutter continuă să evolueze, există tot mai multe lucruri pe care le putem face cu el, dar încă nu este rezonabil să spunem că Flutter poate fi folosit pentru orice proiect de dezvoltare a aplicațiilor de orice fel.

În ceea ce privește mobilul, este puțin probabil să întâlniți ceva la care Flutter nu este grozav, deoarece a fost susținut de la început și a fost lustruit. Cele mai multe lucruri de care veți avea nevoie vreodată sunt deja acolo.

Pe de altă parte, web și desktop nu sunt încă acolo.

Desktop-ul este încă puțin defect , iar aplicațiile Windows (care sunt o parte importantă a dezvoltării desktopului) necesită încă multă muncă înainte de a arăta bine. Situația este mai bună pe Linux și macOS doar într-o anumită măsură.

Web-ul este într-un loc mult mai bun decât desktopul . Puteți crea aplicații web decente, dar încă sunteți limitat la aplicații cu o singură pagină și la aplicații web progresive. Cu siguranță încă nu vrem să-l folosim pentru aplicații centrate pe conținut, unde sunt necesare indexabilitatea și SEO.

Aplicațiile centrate pe conținut probabil nu vor fi atât de grozave, deoarece selectarea textului încă nu este de top, așa cum am văzut în secțiunea despre starea actuală a Flutter pentru web.

Dacă aveți nevoie de versiunea web a aplicației dvs. Flutter, totuși, Flutter pentru web va fi probabil bine, mai ales că există deja o cantitate imensă de pachete compatibile web și lista este mereu în creștere.

Resurse aditionale

• Keynote (Flutter Engage), YouTube
• Ce este nou în Flutter 2, Flutter, Medium
• Înțelegerea null safety , Dart.dev
• Dezvoltare web și desktop receptivă cu Flutter, Smashing Magazine
• Rezolvarea problemelor comune între platforme atunci când lucrați cu Flutter, Smashing Magazine