Pe măsură ce cadrul de dezvoltare a aplicațiilor mobile Flutter devine din ce în ce mai popular, multe companii aleg să o folosească pentru proiectele lor.

Mulți dezvoltatori apreciază capacitatea sa de a dezvolta aplicații cu interfețe UI perfecte pentru pixeli utilizând o structură simplă de widgeturi. Cred că Flutter este viitorul dezvoltării aplicațiilor mobile datorită simplității sale în dezvoltarea interfețelor UI și a capacității sale de a alimenta logica caracteristicilor folosind limbajul de programare Dart.

Acest tutorial se concentrează în principal pe învățarea noțiunilor de bază ale cadrului Flutter prin crearea unei aplicații simple Calculator sfaturi. Vom acoperi modelele de codare standard, inclusiv clasele de widgeturi Stateful și Stateless și unele dintre widgeturile pe care le veți folosi cel mai mult în timpul dezvoltării aplicației Flutter.

Ideea aici este de a începe prin configurarea unui proiect Flutter de pornire. Apoi, vom trece la implementarea UI generală și a funcționalității de bază.

Deci sa începem!

Cum să vă configurați proiectul Flutter

Pentru a crea un nou proiect Flutter, trebuie să aveți Flutter SDK instalat pe sistemul dvs. Pentru un proces de instalare simplu și rapid, puteți urma oficialul documentație flutter.

Rețineți că necesită și Android Studio și Android SDK dacă dezvoltați o aplicație pentru platforma Android.

După ce totul este configurat cu succes, urmând documentația, puteți continua și rula următoarea comandă Flutter în terminal:

flutter create tipCalculator

Această comandă va descărca și configura automat proiectul dvs. Flutter de pornire pentru dvs. Acum puteți deschide proiectul în IDE-ul Visual Studio Code.

Dacă aveți un simulator de dispozitiv sau un dispozitiv smartphone conectat, puteți rula pur și simplu următoarea comandă pentru a lansa aplicația:

flutter run

Alternativ, puteți apăsa „F5” pe tastatură, care va declanșa o opțiune de meniu în VSCode. Din meniul respectiv, puteți selecta dispozitivul în care doriți să lansați aplicația.

Rețineți că trebuie să vă aflați în fișierul cu extensie .lance pentru a rula cu succes această comandă.

Construiți și rulați folosind comanda de mai sus sau F5 pentru a obține următorul șablon de pornire în emulatorul / dispozitivul real:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/155af4bd-4619-45ad-8739-726b85bc7131/tip1.jpg

Acum ar trebui să aveți aplicația Flutter funcțională.

Haideți să intrăm mai puțin în detaliu despre ceea ce se întâmplă în fișierul principal al proiectului, main.dart.

În main.dart fișier, avem două obiecte de clasă. Una se extinde la widget-urile Stateful și cealaltă la widget-urile fără stat. Deci, ce înseamnă asta?

  • Widget de stare: clasa care găzduiește stările aplicației. Stările pot modifica și declanșa redarea widgeturilor din această clasă de widget-uri de stare. Contribuie la schimbări dinamice de stare.
  • Widget fără stat: această clasă nu găzduiește niciun stat. Reprezintă vizualizarea widget care nu se schimbă. Nu contribuie la nicio modificare dinamică a stării.

Fișierul main.dart găzduiește și fișierul main() funcție care apelează MyApp clasa din interiorul runApp pentru a declanșa lansarea aplicației Flutter în dispozitiv.

Cum să construiți interfața de utilizare a Calculatorului de sfaturi

Pentru a începe implementarea UI-ului nostru, trebuie să ștergem tot ceea ce este prezent în interiorul MyHomePageState clasă în mod implicit.

După ce l-am eliminat, vom returna un simplu Scaffold widget din interiorul funcției de construire.

Scaffold widget oferă proprietățile pentru a adăuga fișierul appBar la fel de bine ca body. Deocamdată, vom adăuga o simplă bară de aplicații. Puteți vedea implementarea generală în fragmentul de cod de mai jos:

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text('Tip Calculator', style: TextStyle(color: Colors.black87),),
      ),
      body: Container()
    );
  }
}

Construiți-l și rulați-l după adăugarea appBar folosind AppBar widget cu title proprietate. Veți obține următorul rezultat în ecranul emulatorului:

1611507669 493 Cum se foloseste Flutter pentru a construi un calculator de

Rețineți că Flutter are reîncărcare la cald în timp ce salvați fișierul Dart. Deci, de fiecare dată când salvați orice modificare în fișierul Dart al proiectului dvs., modificările se reflectă automat în emulator.

Pasul 1: Proiectați bara de aplicații

Aici, vom modifica fișierul AppBar widget folosind diverse proprietăți pe care le oferă. Puteți vedea codul modificat în fragmentul de mai jos:

appBar: AppBar(
  title: Text('Tip Calculator', style: TextStyle(color: Colors.black87),),
  centerTitle: true,
  elevation: 0.0,
  backgroundColor: Colors.white70,
),

Construiți-l și rulați-l și veți obține următorul rezultat în ecranul emulatorului:

1611507669 152 Cum se foloseste Flutter pentru a construi un calculator de

Aici, am folosit câteva dintre elementele de bază AppBar proprietăți widget, cum ar fi

  • elevation, care ne permite să controlăm efectul de umbră în bara de aplicații similar cu indexul z,
  • centerTitle pentru a centraliza titlul,
  • și am schimbat și culoarea de fundal în alb.

Pasul 2: Proiectați corpul eșafodului

Până în acest moment, am avut doar un gol Container widget în body proprietate. Acum, vom adăuga câteva proprietăți și widget-uri copil la Container widget conform instrucțiunilor din fragmentul de cod de mai jos:

body: Container(
  color: Colors.white70,
  padding: const EdgeInsets.all(16.0),
  child: Center(
    child: Form(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
        ],
      ),
    ),
  ),

Construiți-l și rulați-l și veți obține următorul rezultat în ecranul emulatorului:

1611507670 481 Cum se foloseste Flutter pentru a construi un calculator de

După cum puteți vedea în captura de ecran de mai sus, am schimbat culoarea de fundal a corpului în alb. De asemenea, am adăugat câteva padding impreuna cu Center widget ca un widget copil care va centraliza întreaga interfață de utilizare în corp.

Center widgetul are un Form widget (unul dintre copiii săi) pentru care vom crea un formular simplu cu câmpuri de text.

Și cel mai important, avem Column widget ca un widget copil al Form. Column widget ne oferă cu children proprietate matrice widget în care putem integra orice număr de widget-uri care vor apărea pe ecran pe verticală.

Pasul 3: definiți constante și variabile

Înainte de a implementa elementele formularului (inclusiv câmpurile de text), trebuie să definim câteva constante pentru a gestiona intrările din câmpurile de intrare.

Puteți vedea constantele și variabilele necesare în fragmentul de cod de mai jos:

// This is the default bill amount
  static const defaultBillAmount = 0.0;

  // This is the default tip percentage
  static const defaultTipPercentage = 15;

  // This is the TextEditingController which is used to keep track of the change in bill amount
  final _billAmountController =
      TextEditingController(text: defaultBillAmount.toString());

  // This is the TextEditingController which is used to keep track of the change in tip percentage
  final _tipPercentageController =
      TextEditingController(text: defaultTipPercentage.toString());

  // This stores the latest value of bill amount calculated
  double _billAmount = defaultBillAmount;

  // This stores the latest value of tip percentage calculated
  int _tipPercentage = defaultTipPercentage;

În fragmentul de cod de mai sus, puteți vedea că folosim TextEditingController metodă. Această metodă de controler ne permite să gestionăm intrările de text din TextFormField widget ulterior care este inițializat la valorile implicite.

Pasul 4: Adăugați câmpuri de formular de intrare

Acum, vom adăuga două câmpuri de formular de intrare folosind TextFormField widget.

În timpul utilizării acestui widget, trebuie să atribuim obligatoriu proprietatea controlerului cu variabilele controlerului pe care le-am definit anterior. Puteți vedea implementarea generală de codificare a widgetului în fragmentul de cod de mai jos:

body: Container(
        color: Colors.white70,
        padding: const EdgeInsets.all(16.0),
        child: Center(
          child: Form(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                TextFormField(
                  key: Key("billAmount"),
                  controller: _billAmountController,
                  keyboardType: TextInputType.numberWithOptions(decimal: true),
                  decoration: InputDecoration(
                      hintText: 'Enter the Bill Amount',
                      labelText: 'Bill Amount',
                      labelStyle: TextStyle(
                        fontSize: 25,
                        letterSpacing: 1,
                        fontWeight: FontWeight.bold
                      ),
                      fillColor: Colors.white,
                      border: new OutlineInputBorder(
                        borderRadius: new BorderRadius.circular(20.0),
                      ),
                    ),
                ),
                SizedBox(height: 25,),
                TextFormField(
                  key: Key("tipPercentage"),
                  controller: _tipPercentageController,
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(
                    hintText: 'Enter the Tip Percentage',
                    labelText: 'Tip Percentage',
                    labelStyle: TextStyle(
                      fontSize: 25,
                      letterSpacing: 1,
                      fontWeight: FontWeight.bold
                    ),
                    fillColor: Colors.white,
                    border: new OutlineInputBorder(
                      borderRadius: new BorderRadius.circular(20.0),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),

Aici, am atribuit keyboardType proprietate care ne permite să afișăm tipul de tastatură necesar atunci când utilizatorul atinge câmpul de introducere.

De asemenea, avem proprietăți de decorare cu care ne putem stiliza câmpurile de introducere folosind InputDecoration widget.

În InputDecoration widget, avem mai multe proprietăți care ne ajută să afișăm textul substituent, precum și eticheta deasupra intrării. De asemenea, am aplicat border proprietate pentru a afișa un chenar contur curbat.

Construiți-l și rulați-l și veți obține următorul rezultat în ecranul emulatorului:

1611507670 360 Cum se foloseste Flutter pentru a construi un calculator de

Pasul 5: Adăugați funcții și ascultători de evenimente

Întrucât vom calcula suma tipului de îndată ce utilizatorul introduce suma sau procentul facturii, trebuie să ascultăm modificările din câmpurile de introducere a textului.

Pentru aceasta, trebuie să adăugăm ascultătorii de evenimente la controlerele care utilizează addListener metodă.

Acum, imediat ce apar modificări în câmpul de introducere, dorim să declanșăm o anumită funcție pentru a actualiza suma facturii și procentul de bacșiș.

Pentru aceasta, vom folosi funcțiile necesare cu setState metodă care ne ajută să redăm întreaga interfață de utilizare imediat ce apar unele modificări.

Rețineți că setState metoda declanșează relansarea fișierului build metodă.

Puteți vedea implementarea generală a codificării în fragmentul de cod de mai jos:

@override
void initState() {
  super.initState();
  _billAmountController.addListener(_onBillAmountChanged);
  _tipPercentageController.addListener(_onTipAmountChanged);
}

_onBillAmountChanged() {
  setState(() {
    _billAmount = double.tryParse(_billAmountController.text) ?? 0.0;
  });
}

_onTipAmountChanged() {
  setState(() {
    _tipPercentage = int.tryParse(_tipPercentageController.text) ?? 0;
  });
}

Iată, avem initState metoda de asemenea. Această metodă rulează imediat ce intrăm în acest ecran al aplicației. Așadar, adăugăm ascultătorii evenimentului imediat ce intrăm pe ecran.

Pasul 6: Adăugați secțiunea Sume

Acum reveniți la widgeturile UI. Vom adăuga secțiunea Sume chiar sub câmpurile de intrare din widgetul Coloană.

Aici vom folosi și fișierul SizedBox widget care ne permite să oferim o anumită distanță între widgeturi. Puteți vedea implementarea codării secțiunii Sume în fragmentul de cod de mai jos:

),
SizedBox(height: 20,),
Container(
  margin: EdgeInsets.all(15),
  padding: EdgeInsets.all(15),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(15),
    ),
    border: Border.all(color: Colors.white),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        offset: Offset(2, 2),
        spreadRadius: 2,
        blurRadius: 1,
      ),
    ],
  ),
  child: Column(
    children: [
      Text("Tip Amount"),
      Text("Total Amount")
    ],
  ),
),

Aici avem un Container cu unele decorațiuni de stil necesare. child proprietatea găzduiește alta Column widget cu două Text widgeturi dispuse vertical.

Construiți-l și rulați-l și veți obține următorul rezultat în ecranul emulatorului:

1611507671 652 Cum se foloseste Flutter pentru a construi un calculator de

Pasul 7: Creați un widget separat fără stat pentru a afișa sumele

Din moment ce dorim să arătăm Cantitatea Sfatului și Suma Totală cu un pic de stil. Nu va conține nicio stare, dar va depinde de valoarea transmisă din widgetul Stateful.

Puteți vedea implementarea generală de codificare a AmountText clasa de widget-uri fără stat în fragmentul de cod de mai jos:

class AmountText extends StatelessWidget {
  final String text;

  const AmountText(
    this.text, {
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      child: Text(text.toUpperCase(),
          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blueAccent, fontSize: 20)),
    );
  }
}

Aici, am folosit clasa constructor pentru a obține valoarea textului real care trebuie afișat. Metoda de construire a acestei clase returnează Container widget cu simplu padding si Text widget ca un widget copil.

Din moment ce a noastră AmountText widgetul este gata, acum putem apela widgetul în widgetul Stateful.

Vom adăuga widgetul în interiorul Column widget pe care l-am definit mai devreme cu simplu Text widgeturi. Trebuie doar să înlocuim widgetul Text cu AmountText widget și treceți valorile de text necesare.

Puteți vedea implementarea codării în fragmentul de cod de mai jos:

Container(
  margin: EdgeInsets.all(15),
  padding: EdgeInsets.all(15),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(15),
    ),
    border: Border.all(color: Colors.white),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        offset: Offset(2, 2),
        spreadRadius: 2,
        blurRadius: 1,
      ),
    ],
  ),
  child: Column(
    children: [
      AmountText(
        'Tip Amount: ${_getTipAmount()}',
        key: Key('tipAmount'),
      ),
      AmountText(
        'Total Amount: ${_getTotalAmount()}',
        key: Key('totalAmount'),
      ),
    ],
  ),
),

Aici, am trecut funcția în interiorul AmountText widget. Funcția returnează valoarea respectivă a Sfatului și valorile Sumei totale, după cum puteți vedea în fragmentul de cod de mai jos:

  _getTipAmount() => _billAmount * _tipPercentage / 100;

  _getTotalAmount() => _billAmount + _getTipAmount();

În cele din urmă, trebuie să terminăm controlerele la ieșirea din vizualizare. Pentru asta, trebuie să folosim dispozitivul încorporat dispose funcţie. Această funcție rulează în timp ce ieșim de pe ecranul curent.

În interiorul acestei metode, trebuie să apelăm controlerele cu dispose metode pentru a termina controlerele de text de intrare. Acest lucru va determina controlerul să nu mai asculte modificările din câmpurile de intrare.

Puteți vedea funcția de eliminare în fragmentul de cod de mai jos:

@override
void dispose() {
  // To make sure we are not leaking anything, dispose any used TextEditingController
  // when this widget is cleared from memory.
  _billAmountController.dispose();
  _tipPercentageController.dispose();
  super.dispose();
}

Construiți-l și executați-l pentru a obține rezultatul final al implementării noastre a Calculatorului de sfaturi, pe care îl puteți vedea în demo-ul de mai jos:

Cum se foloseste Flutter pentru a construi un calculator de

Veți observa că valoarea ambelor sume se modifică pe măsură ce schimbăm intrările din câmpurile de intrare.

Am ajuns la sfârșitul acestui tutorial. Ați implementat cu succes un calculator simplu de sfaturi folosind cadrul Flutter și Dart.

Unde să plec de aici?

Scopul principal al acestui tutorial a fost de a vă învăța modele de programare de bază în cadrul de dezvoltare a aplicației Flutter prin construirea unui calculator de sfaturi simplu.

Există multe alte widget-uri și adăugiri interesante pe care le puteți explora. Puteți modifica interfața de utilizare a aplicației, păstrând în același timp componentele funcționale.

În ansamblu, Flutter simplifică designul UI complex cu modelul widget. Puteți crea pur și simplu o interfață de utilizare excelentă doar stivuind widgeturile împreună folosind proprietățile lor copil.

Un pas următor ar putea fi utilizarea mecanismelor de navigare Flutter pentru a naviga către diferite ecrane. Flutter simplifică, de asemenea, adăugarea de meniuri personalizate pentru sertare și file de jos.

Acesta este doar punctul de plecare al dezvoltării Flutter. Este mai mult decât pare. Trebuie doar să continuăm explorarea și codificarea.

Demo-ul întregului proiect este disponibil în Codepen.

Vă puteți inspira pentru Flutură aplicație de la alții care sunt deja acolo.

Codificare fericită!