Dart ja Flutteri lihtsustatud sissejuhatus

Natuke tausta

Kõik algas 2011. aastal: Xamarin, nüüd Microsofti omanduses olev ettevõte, pakkus hübriidsete mobiilirakenduste jaoks välja lahenduse oma allkirjatoote Xamarin SDK kaudu C # -ga. Nii algas hübriidsete mobiilirakenduste revolutsioon, paljude platvormide jaoks ühe koodibaasi kirjutamise lihtsus.

Ionic tekkis 2013. aastal Drifty Co. esimese väljaandega. Ionic aitas veebiarendajatel kasutada oma olemasolevaid oskusi kasvavas mobiilirakenduste valdkonnas. 2015. aastal kasutas Facebook React.js-d selle mobiilirakenduste arendajatele uuesti leiutamiseks. Nad andsid meile React Native, täiesti JavaScripti koodibaasi, mis tugineb natiivsetele SDK-dele.

Ja need pole ainsad, vaid mõned paljudest hübriidsetest mobiilraamistikest. Lisateavet leiate siit.

Nüüd saame vaadata, kuidas Google on näpuga Flutteriga näppu pistnud.

Mis on Dart?

Google’il oli Flutter 1.0 esimene väljaanne eelmise aasta detsembris pärast seda, kui see oli beetarežiimis olnud üle 18 kuu. Dart on programmeerimiskeel, mida kasutatakse rakenduste Flutter kodeerimiseks. Dart on veel üks Google'i toode ja avaldas novembris enne Flutterit versiooni 2.1. Alustades ei ole Flutteri kogukond nii ulatuslik kui ReactNative, Ionic või Xamarin.

Mõni aeg tagasi avastasin JavaScripti meeldimise. Olin ekstaasis, et töötasin oma praktika jaoks ReactNative'i mobiilirakenduse kallal. Mulle meeldib ka hübriidsete mobiilirakenduste kodeerimine, nii et tahtsin Flutterit proovida, nagu olin Xamarinit teinud eelmisel aastal.

Esimesel pilgul Flutterist (ja Dartist) tundsin, et olen hämmingus ega saanud nagu midagi aru. Neil oli React Native'ist liikuvate arendajate jaoks isegi jaotis nende dokumentide kohta. Niisiis võtsin süvitsi kõik asjad Dart.

Noolemäng näeb natuke välja nagu C ja on objektorienteeritud programmeerimiskeel. Niisiis, kui eelistate C-keelt või Java-d, on Dart teile sobiv ja tõenäoliselt olete selles ka osav.

Noolemängu ei kasutata ainult mobiilirakenduste arendamiseks, vaid see on programmeerimiskeel. Ecma (ECMA-408) on selle standardina heaks kiitnud ja seda kasutatakse veebis, serverites, lauaarvutites ja muidugi ka mobiilirakendustes peaaegu kõigi objektide loomiseks (jah, samad inimesed, kes meie lemmikud ES5 ja ES6 standardiseerisid.)

Dart, kui seda kasutatakse veebirakendustes, tõlgitakse JavaScripti, nii et see töötab kõigis veebibrauserites. Dart-installiga on kaasas ka VM, et käivitada .dart-failid käsurea liideselt. Flutteri rakendustes kasutatavad Dart-failid kompileeritakse ja pakitakse binaarfaili (.apk või .ipa) ning laaditakse üles rakenduste poodidesse.

Kuidas Dartis kodeerimine välja näeb?

Nagu enamik ALGOLi keeli (nagu C # või Java):

  1. Dart-klassi sisenemispunkt on main()meetod. See meetod on lähtepunktiks ka Flutteri rakenduste jaoks.
  2. Enamiku andmetüüpide vaikeväärtus on null.
  3. Noolemängu klassid toetavad ainult ühte pärimist. Konkreetse klassi jaoks võib olla ainult üks superklass, kuid sellel võib olla palju liideste rakendusi.
  4. Teatud lausete voo juhtimine, näiteks kui tingimused, tsüklid (for, while ja do-while), switch-case, break ja jätkavad avaldused on samad.
  5. Abstraktsioon töötab sarnaselt, võimaldades abstraktseid klasse ja liideseid.

Erinevalt neist (ja mõnikord natuke nagu JavaScript):

  1. Dartil on tüübijäreldus. Muutuja andmetüüpi ei pea selgesõnaliselt deklareerima, kuna Dart "järeldab", mis see on. Java-s peab muutuja tüüp olema deklaratsiooni ajal sõnaselgelt antud. Näiteks String something;. Aga Dart märksõna asemel kasutatakse meeldib nii, var something;. Kood käsitleb muutujat vastavalt sellele, mida see sisaldab, olgu see siis number, string, bool või objekt.
  2. Kõik andmetüübid on objektid, sealhulgas arvud. Niisiis, kui see jäetakse algatamata, pole nende vaikeväärtus 0, vaid on selle asemel null.
  3. Meetodi allkirjas pole vaja meetodi tagastustüüpi.
  4. Tüüp numdeklareerib mis tahes arvelemendi, nii reaalse kui täisarvu.
  5. super()Meetod kõne on ainult lõpus alamklass on ehitaja.
  6. newEnne konstruktorit objekti loomiseks kasutatud märksõna on valikuline.
  7. Meetodi allkirjad võivad sisaldada edastatud parameetrite vaikeväärtust. Niisiis, kui meetodi väljakutse hulka ei kuulu, kasutab meetod selle asemel vaikeväärtusi.
  8. Sellel on uus sisseehitatud andmetüüp nimega Runes, mis tegeleb stringi UTF-32 koodipunktidega. Lihtsa näite saamiseks vaadake emotikone ja sarnaseid ikoone.

Ja kõik need erinevused on vaid mõned neist paljudest, mida leiate Dart Language'i tuurilt ja mida saate vaadata siit.

Dartil on Dart SDK-sse installitud ka sisseehitatud teegid, mida kasutatakse kõige sagedamini:

  1. noolemäng: südamik põhifunktsioonide jaoks; see imporditakse kõigis noolemängu failides.
  2. dart: asünkroon asünkroonse programmeerimise jaoks.
  3. noolemäng: matemaatika matemaatiliste funktsioonide ja konstantide jaoks.
  4. dart: teisendamine erinevate andmete esitamise vahel, näiteks JSON UTF-8-ks.

Lisateavet Darti raamatukogude kohta leiate siit.

Dart'i kasutamine lehvides

Flutteril on rohkem rakenduspõhiseid teeke, sagedamini selliste kasutajaliidese elementide kohta nagu:

  1. Vidin: levinud rakenduse elemendid, näiteks Tekst või ListView.
  2. Materjal: sisaldab materjali kujundusele vastavaid elemente, näiteks FloatingActionButton.
  3. Cupertino: sisaldab elemente, mis järgivad praeguseid iOS-i kujundusi, nagu CupertinoButton.

Flutteri spetsiifilised teegid leiate siit.

Flutteri seadistamine

Nii et selle asja käima saamiseks järgige Flutteri dokumente. See annab üksikasju Flutteri SDK installimise ja eelistatud IDE seadistamise kohta; minu oma oleks VS kood. Abiks on VS-koodi seadistamine laiendusega Flutter. Sellel on sisseehitatud käsud, erinevalt terminali kasutamisest.

Esimese rakenduse loomiseks järgige uuesti dokumente. Minu puhul käivitage laienduskäsk Flutter: New Project. Seejärel tippige projekti nimi ja valige sihtkaust.

Kui eelistate terminali kasutamist, liikuge rakenduse sihtkausta. Seejärel kasutage käskuflutter 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.