Pojednostavljeni uvod u Dart and Flutter

Malo pozadine

Sve je započelo 2011. godine: Xamarin, sada tvrtka u vlasništvu Microsofta, putem svog potpisanog proizvoda, Xamarin SDK sa C #, smislila je rješenje za hibridne mobilne aplikacije. I tako je započela revolucija hibridnih mobilnih aplikacija, jednostavnost pisanja jedne baze koda za mnoge platforme.

Ionic je nastao 2013. godine svojim prvim izdanjem Drifty Co. Ionic je pomogao web programerima da iskoriste svoje postojeće vještine u rastućoj industriji mobilnih aplikacija. 2015. Facebook je koristio React.js kako bi ga izmislio za programere mobilnih aplikacija. Dali su nam React Native, potpuno JavaScript bazu koda koja se oslanja na izvorne SDK-ove.

I to nisu jedini, već nekoliko mnogih hibridnih mobilnih okvira. Više informacija možete pronaći ovdje.

Sada možemo gledati Googleov red na stavljanju prstiju u Flutter.

Što je Dart?

Google je svoje prvo izdanje Fluttera 1.0 objavio prošlog prosinca, nakon što je bio u beta načinu više od 18 mjeseci. Dart je programski jezik koji se koristi za kodiranje aplikacija Flutter. Dart je još jedan Googleov proizvod koji je objavio verziju 2.1, prije Fluttera, u studenom. Kako započinje, zajednica Flutter nije toliko opsežna kao ReactNative, Ionic ili Xamarin.

Prije nekog vremena otkrio sam da volim JavaScript. Bila sam oduševljena radom na mobilnoj aplikaciji ReactNative za moju praksu. Uživam i u kodiranju hibridnih mobilnih aplikacija, pa sam želio isprobati Flutter, kao što sam to učinio Xamarin negdje prošle godine.

Na prvi pogled na Fluttera (i Darta) osjećala sam se zbunjeno i činilo se da ništa ne razumijem. Čak su u svojim dokumentima imali odjeljak za programere koji su prešli iz React Nativea. Dakle, počeo sam dublje kopati po svim stvarima Dart.

Dart pomalo liči na C i objektno je orijentiran programski jezik. Dakle, ako više volite jezike C ili Java, Dart je pravi za vas i vjerojatno ćete ga vješt.

Dart se ne koristi samo za razvoj mobilnih aplikacija, već je programski jezik. Odobren kao standard od strane Ecme (ECMA-408), koristi se za izgradnju gotovo svega na webu, poslužiteljima, radnoj površini i naravno mobilnim aplikacijama (Da, isti oni koji su standardizirali naše omiljene ES5 i ES6.)

Dart, kada se koristi u web aplikacijama, prevodi se na JavaScript tako da radi na svim web preglednicima. Dart instalacija dolazi s VM-om za pokretanje .dart datoteka sa sučelja naredbenog retka. Dart datoteke koje se koriste u aplikacijama Flutter sastavljaju se i spakiraju u binarnu datoteku (.apk ili .ipa) i prenose u trgovine aplikacija.

Kako izgleda kodiranje u Dartu?

Kao i većina jezika ALGOL (poput C # ili Java):

  1. Ulazna točka Dart klase je main()metoda. Ova metoda djeluje kao polazna točka i za Flutter aplikacije.
  2. Zadana vrijednost većine vrsta podataka je null.
  3. Dart klase podržavaju samo jedno nasljeđivanje. Za određenu klasu može postojati samo jedan superrazred, ali može imati mnogo implementacija sučelja.
  4. Kontrola protoka određenih izraza, kao što su uvjeti, petlje (for, while i do-while), preklopni slučaj, prekid i nastavak su isti.
  5. Apstrakcija djeluje na sličan način, dopuštajući apstraktne klase i sučelja.

Za razliku od njih (i ponekad pomalo poput JavaScript-a):

  1. Dart ima zaključak o tipu. Tip podataka varijable ne mora biti izričito deklariran, jer će Dart "zaključiti" o čemu se radi. U Javi, varijabla mora imati svoj tip izričito naveden tijekom deklaracije. Na primjer, String something;. No, u Dart, ključna riječ se koristi umjesto sviđa tako, var something;. Kôd tretira varijablu prema bilo čemu što ona sadrži, bilo da je to broj, niz, bool ili objekt.
  2. Sve su vrste podataka objekti, uključujući brojeve. Dakle, ako se ne inicijaliziraju, njihova zadana vrijednost nije 0, već je nula.
  3. Vrsta povratka metode nije potrebna u potpisu metode.
  4. Tip numdeklarira bilo koji numerički element, i stvaran i cijeli broj.
  5. Poziv super()metode nalazi se samo na kraju konstruktora podklase.
  6. Ključna riječ newkorištena prije konstruktora za stvaranje objekta nije obavezna.
  7. Potpisi metode mogu uključivati ​​zadanu vrijednost za prosljeđene parametre. Dakle, ako jedan nije uključen u poziv metode, metoda umjesto toga koristi zadane vrijednosti.
  8. Ima novi ugrađeni tip podataka nazvan Runes, koji se bavi UTF-32 kodnim točkama u nizu. Za jednostavan primjer pogledajte emojije i slične ikone.

A sve su te razlike samo neke od mnogih koje možete pronaći u turneji Dart Language, koju možete pogledati ovdje.

Dart također ima ugrađene knjižnice instalirane u Dart SDK, a najčešće se koriste:

  1. strelica: jezgra za osnovnu funkcionalnost; uvozi se u sve pikado datoteke.
  2. strelica: asinkronizacija za asinkrono programiranje.
  3. strelica: matematika za matematičke funkcije i konstante.
  4. strelica: pretvori za pretvorbu između različitih prikaza podataka, poput JSON-a u UTF-8.

Više informacija o Dart knjižnicama možete pronaći ovdje.

Korištenje strelice u lepršavu

Flutter ima više biblioteka specifičnih za aplikaciju, češće na elementima korisničkog sučelja poput:

  1. Widget: uobičajeni elementi aplikacije, poput Text ili ListView.
  2. Materijal: sadrži elemente koji slijede dizajn materijala, poput FloatingActionButton.
  3. Cupertino: sadrži elemente koji prate trenutni iOS dizajn, poput CupertinoButton.

Ovdje možete pronaći specifične knjižnice za Flutter.

Postavljanje Fluttera

Dakle, da biste pokrenuli ovu stvar, slijedite dokumente Flutter. Daje detalje o instaliranju Flutter SDK-a i postavljanju željenog IDE-a; moj bi bio VS kod. Postavljanje VS koda s proširenjem Flutter je korisno. Dolazi s ugrađenim naredbama, za razliku od upotrebe terminala.

Slijedite dokumente ponovo da biste stvorili svoju prvu aplikaciju. U mom slučaju pokrenite naredbu za proširenje Flutter: New Project. Nakon toga upišite naziv projekta i odaberite odredišnu mapu.

Ako više volite koristiti terminal, pređite na odredišnu mapu aplikacije. Zatim upotrijebite naredbuflutter create me> to create the app folder. This generates the entire app folder, including the Android and iOS project folder. To open these folders, use Android Studio and XCode, for building the app.

In the root of the project, you find pubspec.yaml. This file contains the app's dependencies. This includes both external libraries/modules and assets like images and config files. It works like a package.json, containing all external modules of the app. To install these packages, enter the package name and version under the dependencies: section of the pubspec.yaml. Run the command flutter packages get. Include the assets of the app inside the flutter: section of the same file.

The entry point of the app is main.dart, found inside the lib folder. This folder also contains all Dart classes (app pages or reusable components). On creation of the app, the main.dart file comes with a simple pre-written code. Before running this code, a device is either connected to the PC, with USB debugging enabled. Afterward, run the command flutter run on the terminal.

A First Look at the Flutter App

The app currently looks like this now:

Building the user interface of a Flutter app makes use of Widgets.

Widgets work in a similar way to React. A widget uses different components to describe what the UI should look like. They can be either Stateful or Stateless. In Stateful components, the widget rebuilds due to state changes, to accommodate the new state.

When we look at the current code for the Home page, we see that it’s a Stateful page. If the counter variable increases, the framework tries to find the least expensive way to re-render the page. In this case, find the minimal difference between the current widget description and the future one. It takes into account the changed state.

The Scaffold class is a material design layout structure and is the main container for the Home page. The AppBar, also a material design element is the title bar found at the top of the page. All other components, like the floating button and two text tags, fall under the body of the page. The Center class is a layout class that centers its child components vertically and horizontally.

The Column class, another layout widget, lists each child element vertically. Each of its child elements is added to an array and put underneath the children: section.

The two texts speak for themselves. The first displays the text ‘You have pushed.’ The second one displays the current value in the _counter variable.

The FloatingActionButton is part of the Material design widgets. It displays a + icon and triggers the increment of the _counter variable.

Hot Reloading

Another plus point of using Flutter is the hot reloading feature. It lets you see changes made to the code in real time, without restarting the build process. Type ‘r’ on the same console that you ran the flutter run command.

Altering the current code

As we can see, when you click the button, the _counter variable value increases. This re-renders the page and the new value is displayed on the body of the page.

I’m going to change that up a bit. For every button click, we will display a custom Card component with the item number.

Creating the Custom Card Component

So, to start off, we make a new .dart file inside the lib folder. I created mine in a subfolder commonComponents and named it 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: [Text('Card $index')], ) ); } }

This component will be a stateless widget and will only display the value that we send to it, in the Text widget.

Displaying a List of Custom Cards

Import the above component to the main.dart like so:

import 'commonComponents/customCard.dart';

I then replace the code of the home page body, from the one above to this:

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

It now displays a List of CustomCard elements, up to the number of times the button is clicked. The itemCount is used to define the number of elements the ListView must display. The itemBuilder returns the actual item that is displayed.

And that’s a simple example of using Flutter.

In conclusion…

Before my interest turned to JavaScript, I worked with Java. If I had encountered Dart around that time, I might have been able to understand it easier than I did now. All in all, It wasn’t too difficult but took a bit of time to get the hang of it. I could see myself using it in time.

Find the code repo, here.

Find the commit for this post, here.