Zjednodušený úvod do Dart a Flutter

Trochu pozadia

Všetko sa to začalo v roku 2011: Spoločnosť Xamarin, ktorá je teraz spoločnosťou vlastnenou spoločnosťou Microsoft, prišla s riešením pre hybridné mobilné aplikácie prostredníctvom svojho podpisového produktu, Xamarin SDK s C #. A tým sa začala revolúcia hybridných mobilných aplikácií, jednoduchosť písania jednej kódovej základne pre mnoho platforiem.

Ionic sa objavil v roku 2013 prvým uvedením spoločnosti Drifty Co. Ionic pomohol vývojárom webu využiť ich súčasné schopnosti v rastúcom priemysle mobilných aplikácií. V roku 2015 Facebook pomocou React.js znovu objavil vývojárov mobilných aplikácií. Dali nám React Native, úplne základňu kódu JavaScript, ktorá sa spolieha na natívne SDK.

A nie sú to jediné, ale niekoľko z mnohých hybridných mobilných rámcov. Viac informácií nájdete tu.

Teraz môžeme sledovať, ako Google ukazuje, ako dáva prsty do koláče s Flutterom.

Čo je Dart?

Google mal vôbec prvé vydanie Flutter 1.0 minulý rok v decembri, keď bol v beta režime viac ako 18 mesiacov. Šípka je programovací jazyk používaný na kódovanie aplikácií Flutter. Šípka je ďalším produktom spoločnosti Google a v novembri bola vydaná verzia 2.1 pred Flutter. Ako to začína, komunita flutterov nie je taká rozsiahla ako ReactNative, Ionic alebo Xamarin.

Pred časom som objavil záľubu v JavaScripte. Bol som vo vytržení, že som na svojej stáži pracoval na mobilnej aplikácii ReactNative. Baví ma aj programovanie hybridných mobilných aplikácií, takže som chcel vyskúšať Flutter, ako som to urobil už minulý rok v Xamarin.

Pri prvom pohľade na Flutter (a Dart) som sa cítil zmätený a nemohol som nič chápať. Dokonca mali časť o svojich dokumentoch pre vývojárov, ktorí prešli z React Native. Takže som sa pustil do hĺbania všetkých vecí Dart.

Dart vyzerá trochu ako C a je objektovo orientovaný programovací jazyk. Takže ak dávate prednosť jazykom C alebo Java, Dart je ten pravý pre vás a pravdepodobne v nich budete ovládať.

Šípka sa nepoužíva iba na vývoj mobilných aplikácií, ale je aj programovacím jazykom. Schválený ako štandard spoločnosťou Ecma (ECMA-408), používa sa na vytváranie takmer všetkého na webe, serveroch, stolných počítačoch a samozrejme v mobilných aplikáciách (Áno, rovnakí ľudia, ktorí štandardizovali naše obľúbené ES5 a ES6.)

Keď sa šípka používa vo webových aplikáciách, je prevedená do JavaScriptu, aby fungovala vo všetkých webových prehľadávačoch. Inštalácia Dart sa dodáva aj s VM na spustenie súborov .dart z rozhrania príkazového riadku. Súbory Dart použité v aplikáciách Flutter sú kompilované a zabalené do binárneho súboru (.apk alebo .ipa) a nahrané do obchodov s aplikáciami.

Ako vyzerá kódovanie v Dart?

Rovnako ako väčšina jazykov ALGOL (napríklad C # alebo Java):

  1. Vstupným bodom triedy Dart je main()metóda. Táto metóda slúži ako východiskový bod aj pre aplikácie Flutter.
  2. Predvolená hodnota väčšiny typov údajov je null.
  3. Šípkové triedy podporujú iba jedno dedičstvo. Pre konkrétnu triedu môže existovať iba jedna nadtrieda, ale môže mať veľa implementácií rozhraní.
  4. Riadenie toku určitých príkazov, napríklad príkazy if, loops (for, while a do-while), switch-case, break and continue sú rovnaké.
  5. Abstrakcia funguje podobným spôsobom a umožňuje abstraktné triedy a rozhrania.

Na rozdiel od nich (a niekedy trochu ako JavaScript):

  1. Šípka má odvodenie typu. Dátový typ premennej nemusí byť výslovne deklarovaný, pretože Dart „odvodí“, čo to je. V prostredí Java musí byť premenná počas deklarácie výslovne uvedená. Napríklad String something;. Ale v Dart, kľúčové slovo je používaný namiesto toho chcel tak var something;. Tento kód zaobchádza s premennou podľa toho, čo obsahuje, či už je to číslo, reťazec, bool alebo objekt.
  2. Všetky dátové typy sú objekty vrátane čísel. Ak teda zostanú neinicializované, ich predvolená hodnota nie je 0, ale je naopak nulová.
  3. V podpise metódy sa nevyžaduje návratový typ metódy.
  4. Typ numdeklaruje akýkoľvek číselný prvok, skutočný aj celočíselný.
  5. super()Volanie metódy je len na konci konštruktory podtriedy je.
  6. Kľúčové slovo newpoužité pred konštruktorom na vytvorenie objektu je voliteľné.
  7. Podpisy metód môžu obsahovať predvolenú hodnotu odovzdaných parametrov. Pokiaľ teda jeden nie je zahrnutý do volania metódy, použije metóda namiesto toho predvolené hodnoty.
  8. Má nový zabudovaný dátový typ s názvom Runes, ktorý sa zaoberá kódovými bodmi UTF-32 v reťazci. Jednoduchý príklad nájdete v ikonách emodži a podobných ikonách.

A všetkých týchto rozdielov je len niekoľko z mnohých, ktoré nájdete v prehliadke Dart Language Tour, ktorú si môžete pozrieť tu.

Dart má tiež zabudované knižnice nainštalované v Dart SDK, najbežnejšie používané sú:

  1. dart: jadro pre základnú funkčnosť; importuje sa do všetkých súborov so šípkami.
  2. dart: async pre asynchrónne programovanie.
  3. šípka: matematika pre matematické funkcie a konštanty.
  4. dart: convert na konverziu medzi rôznymi reprezentáciami údajov, napríklad JSON na UTF-8.

Viac informácií o knižniciach Dart nájdete tu.

Použitie šípky vo flutteru

Flutter má viac knižníc špecifických pre aplikáciu, častejšie na prvkoch používateľského rozhrania, ako sú:

  1. Widget: bežné prvky aplikácie, napríklad Text alebo ListView.
  2. Materiál: obsahuje prvky nasledujúce po materiálovom dizajne, napríklad FloatingActionButton.
  3. Cupertino: obsahuje prvky zodpovedajúce súčasným dizajnom iOS, napríklad CupertinoButton.

Tu nájdete knižnice špecifické pre Flutter.

Nastavenie flutteru

Ak chcete túto vec zaradiť, postupujte podľa dokumentov Flutter. Poskytuje podrobnosti o inštalácii Flutter SDK a nastavení preferovaného IDE; môj by bol VS kód. Je užitočné nastaviť VS kód s rozšírením Flutter. Dodáva sa s vstavanými príkazmi, na rozdiel od použitia terminálu.

Postupujte znova podľa dokumentov a vytvorte svoju prvú aplikáciu. V mojom prípade spustite príkaz rozšírenia Flutter: New Project. Potom zadajte názov projektu a vyberte cieľový priečinok.

Ak dávate prednosť použitiu terminálu, presuňte sa do cieľového priečinka aplikácie. Potom použite príkazflutter 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.