O introducere simplificată la Dart și Flutter

Un pic de fundal

Totul a început în 2011: Xamarin, acum o companie deținută de Microsoft, a venit cu o soluție pentru aplicații mobile hibride prin produsul său de semnătură, Xamarin SDK cu C #. Și astfel a început revoluția aplicațiilor mobile hibride, ușurința în scrierea unei baze de cod pentru multe platforme.

Ionic a apărut în 2013 cu prima sa versiune de Drifty Co. Ionic a ajutat dezvoltatorii web să își folosească abilitățile existente în industria de aplicații mobile în creștere. În 2015, Facebook a folosit React.js pentru a-l reinventa pentru dezvoltatorii de aplicații mobile. Ne-au oferit React Native, o bază de cod complet JavaScript bazată pe SDK-uri native.

Și acestea nu sunt singurele, ci câteva dintre multele cadre mobile hibride. Mai multe informații pot fi găsite Aici.

Acum putem urmări rândul Google când își pune degetele în plăcintă cu Flutter.

Ce este Dart?

Google a avut prima lansare a Flutter 1.0 în decembrie anul trecut, după ce a avut-o în modul beta timp de peste 18 luni. Dart este limbajul de programare folosit pentru codificarea aplicațiilor Flutter. Dart este un alt produs de Google și a lansat versiunea 2.1, înainte de Flutter, în noiembrie. Pe măsură ce începe, comunitatea Flutter nu este la fel de extinsă ca ReactNative, Ionic sau Xamarin.

Cu ceva timp în urmă, am descoperit că îmi place JavaScript. Eram extaziat să lucrez la o aplicație mobilă ReactNative pentru stagiul meu. Îmi place și să codez aplicații mobile hibride, așa că am vrut să încerc Flutter, așa cum făcusem Xamarin cândva anul trecut.

La prima mea privire de Flutter (și Dart), m-am simțit nedumerit și nu am putut să înțeleg nimic. Au avut chiar o secțiune în documentele lor pentru dezvoltatorii care trec de la React Native. Așadar, am început să sap mai adânc pe toate lucrurile Dart.

Dart arată un pic ca C și este un limbaj de programare orientat pe obiecte. Deci, dacă preferați limbajele C sau Java, Dart este cel pentru dvs. și probabil veți fi priceput în ea.

Dart nu este folosit doar pentru dezvoltarea aplicațiilor mobile, ci este un limbaj de programare. Aprobat ca standard de Ecma (ECMA-408), este folosit pentru a construi aproape orice pe web, servere, desktop și, bineînțeles, aplicații mobile (Da, aceiași oameni care au standardizat preferințele noastre ES5 și ES6.)

Dart, atunci când este utilizat în aplicații web, este transpus în JavaScript, deci rulează pe toate browserele web. Instalarea Dart vine și cu o mașină virtuală pentru a rula fișierele .dart dintr-o interfață din linia de comandă. Fișierele Dart utilizate în aplicațiile Flutter sunt compilate și ambalate într-un fișier binar (.apk sau .ipa) și încărcate în magazinele de aplicații.

Cum arată codarea în Dart?

La fel ca majoritatea limbajelor ALGOL (cum ar fi C # sau Java):

1. Punctul de intrare al unei clase Dart este main() metodă. Această metodă acționează și ca punct de plecare pentru aplicațiile Flutter.
2. Valoarea implicită a majorității tipurilor de date este null.
3. Clasele de săgeți acceptă doar moștenirea unică. Poate exista o singură superclasă pentru o anumită clasă, dar poate avea multe implementări de interfețe.
4. Controlul fluxului anumitor instrucțiuni, cum ar fi dacă condițiile, buclele (for, while și do-while), switch-case, break și continuare sunt aceleași.
5. Abstracția funcționează într-un mod similar, permițând clase și interfețe abstracte.

Spre deosebire de ele (și uneori cam ca JavaScript):

1. Dart are inferență de tip. Tipul de date al unei variabile nu trebuie să fie declarat în mod explicit, deoarece Dart va „deduce” ce este. În Java, o variabilă trebuie să aibă tipul său specific dat în timpul declarației. De exemplu, String something;. Dar în Dart, cuvântul cheie este folosit în schimb, așa, var something;. Codul tratează variabila în funcție de orice conține, fie că este un număr, șir, bool sau obiect.
2. Toate tipurile de date sunt obiecte, inclusiv numere. Deci, dacă nu este inițializată, valoarea lor implicită nu este 0, ci este nulă.
3. Un tip de returnare a unei metode nu este necesar în semnătura metodei.
4. Tipul num declară orice element numeric, atât real cât și întreg.
5. super() apel metoda este doar la sfârșitul constructorului unei subclase.
6. Cuvântul cheie new utilizat înainte ca constructorul pentru crearea obiectelor să fie opțional.
7. Semnăturile metodei pot include o valoare implicită a parametrilor trecuți. Deci, dacă unul nu este inclus în apelul metodei, metoda folosește valorile implicite.
8. Are un nou tip de date încorporat numit Runes, care se ocupă de punctele de cod UTF-32 dintr-un șir. Pentru un exemplu simplu, consultați emoji-uri și pictograme similare.

Și toate aceste diferențe sunt doar câteva dintre multele pe care le puteți găsi în turneul Dart Language, pe care îl puteți verifica Aici.

Dart are, de asemenea, biblioteci încorporate instalate în Dart SDK, cele mai utilizate fiind:

1. dart: nucleu pentru funcționalitatea de bază; este importat în toate fișierele de săgeți.
2. dart: asincron pentru programare asincronă.
3. dart: matematică pentru funcții și constante matematice.
4. dart: convertiți pentru conversia între diferite reprezentări de date, cum ar fi JSON în UTF-8.

Puteți găsi mai multe informații despre bibliotecile Dart Aici.

Folosind Dart in Flutter

Flutter are mai multe biblioteci specifice aplicațiilor, mai des pe elemente de interfață cu utilizatorul, cum ar fi:

1. Widget: elemente comune ale aplicației, cum ar fi Text sau ListView.
2. Material: conține elemente care urmează proiectarea materialului, cum ar fi FloatingActionButton.
3. Cupertino: conține elemente care urmează proiectelor iOS actuale, cum ar fi CupertinoButton.

Puteți găsi biblioteci specifice Flutter Aici.

Configurarea Flutter

Deci, pentru a pune acest lucru în viteză, urmați Flutter docs. Oferă detalii despre instalarea Flutter SDK și configurarea IDE-ului preferat; al meu ar fi cod VS. Configurarea codului VS cu extensia Flutter este utilă. Vine cu comenzi încorporate, spre deosebire de utilizarea terminalului.

Urmați din nou documentele pentru a crea prima aplicație. În cazul meu, executați comanda de extensie Flutter: New Project. Apoi, tastați numele proiectului și alegeți folderul de destinație.

Dacă preferați să utilizați terminalul, treceți la folderul de destinație al aplicației. Apoi utilizați comanda flutter create <app_naeu> pentru a crea folderul aplicației. Aceasta generează întregul dosar al aplicației, inclusiv dosarul proiectului Android și iOS. Pentru a deschide aceste foldere, utilizați Android Studio și XCode, pentru a construi aplicația.

În rădăcina proiectului, găsiți pubspec.yaml. Acest fișier conține dependențele aplicației. Aceasta include atât biblioteci / module externe, cât și materiale precum imagini și fișiere de configurare. Funcționează ca un package.json, care conține toate modulele externe ale aplicației. Pentru a instala aceste pachete, introduceți numele și versiunea pachetului în dependencies: secțiunea din pubspec.yaml. Rulați comanda flutter packages get. Includeți activele aplicației în interiorul fișierului flutter: secțiunea aceluiași fișier.

Punctul de intrare al aplicației este main.dart, găsit în dosarul lib. Acest folder conține, de asemenea, toate clasele Dart (pagini de aplicații sau componente reutilizabile). La crearea aplicației, fișierul main.dart fișierul vine cu un cod simplu pre-scris. Înainte de a rula acest cod, un dispozitiv este fie conectat la computer, cu depanarea USB activată. Apoi, executați comanda flutter run pe terminal.

O primă privire asupra aplicației Flutter

În prezent, aplicația arată astfel:

Construirea interfeței de utilizare a unei aplicații Flutter folosește Widgets.

Widgeturile funcționează în mod similar cu React. Un widget folosește diferite componente pentru a descrie cum ar trebui să arate interfața de utilizare. Ele pot fi fie de stat sau apatrizi. În componentele Stateful, widgetul se reconstruiește din cauza modificărilor de stare, pentru a se potrivi noului stat.

Când ne uităm la codul curent pentru pagina principală, vedem că este o pagină cu stare. Dacă variabila contor crește, cadrul încearcă să găsească cel mai puțin costisitor mod de redare a paginii. În acest caz, găsiți diferența minimă între descrierea curentă a widgetului și cea viitoare. Se ia în considerare starea modificată.

Clasa Scaffold este o structură de proiectare a materialului și este containerul principal pentru pagina principală. AppBar, de asemenea, un element de design al materialului este bara de titlu găsită în partea de sus a paginii. Toate celelalte componente, cum ar fi butonul flotant și două etichete text, se încadrează sub corpul paginii. Clasa Center este o clasă de aspect care își centrează componentele copil pe verticală și orizontală.

Clasa Column, un alt widget de aspect, listează fiecare element copil pe verticală. Fiecare dintre elementele sale copil este adăugat la o matrice și plasat sub secțiunea copii:.

Cele două texte vorbesc de la sine. Primul afișează textul „Ai împins”. Al doilea afișează valoarea curentă în _counter variabil.

FloatingActionButton face parte din widget-urile de proiectare Material. Afișează o pictogramă + și declanșează creșterea _counter variabil.

Reîncărcare la cald

Un alt punct plus al utilizării Flutter este caracteristica de reîncărcare la cald. Vă permite să vedeți modificările aduse codului în timp real, fără a reporni procesul de compilare. Tastați „r” pe aceeași consolă pe care ați rulat-o flutter run comanda.

Modificarea codului curent

După cum putem vedea, când faceți clic pe buton, valoarea variabilei _counter crește. Aceasta redă pagina și noua valoare este afișată pe corpul paginii.

Voi schimba asta puțin. Pentru fiecare clic pe buton, vom afișa o componentă personalizată a cardului cu numărul articolului.

Crearea componentei de card personalizate

Deci, pentru a începe, creăm un nou fișier .dart în folderul lib. Am creat-o pe a mea într-un subfolder commonComponents și l-a numit customCard.dart.

import 'package:flutter/material.dart';

class CustomCard extends StatelessWidget {  CustomCard({@required this.index});
	final index;
    
    @override  
    Widget build(BuildContext context) {    
    	return Card(      
        	child: Column(        
            	children: <Widget>[Text('Card $index')],      
            )    
        );  
    }
}

Această componentă va fi un widget fără stare și va afișa doar valoarea pe care i-o trimitem în widgetul Text.

Afișarea unei liste de carduri personalizate

Importați componenta de mai sus în main.dart ca astfel:

import 'commonComponents/customCard.dart';

Înlocuiesc apoi codul corpului paginii de pornire, de la cel de mai sus la acesta:

body: Center(  
	child: Container(    
    	child: ListView.builder(      
        	itemCount: _counter,      
            itemBuilder: (context, int index) {        
            	return CustomCard(          
                	index: ++index,        
                );      
            },    
        )  
    ),
),

Afișează acum o listă de CustomCard elemente, până la numărul de clicuri pe buton. itemCount este utilizat pentru a defini numărul de elemente ListView trebuie să afișeze. itemBuilder returnează elementul real care este afișat.

Și acesta este un exemplu simplu de utilizare a Flutter.

In concluzie…

Înainte ca interesul meu să se îndrepte spre JavaScript, am lucrat cu Java. Dacă l-aș fi întâlnit pe Dart în acel moment, aș fi putut să-l înțeleg mai ușor decât am făcut-o acum. Una peste alta, nu a fost prea dificil, dar a durat puțin timp pentru a obține atenția. M-am putut vedea folosindu-l la timp.

Găsiți codul repo, Aici.

Găsiți commitul pentru această postare, Aici.