Supaprastinta „Dart and Flutter“ įžanga

Šiek tiek fono

Viskas prasidėjo 2011 m.: „Xamarin“, dabar priklausanti „Microsoft“ kompanijai, pasiūlė hibridinių mobiliųjų programų sprendimą per savo firminį produktą „Xamarin SDK with C #“. Taigi prasidėjo hibridinių mobiliųjų programų revoliucija - paprastumas rašyti vieną kodo bazę daugeliui platformų.

„Ionic“ atsirado 2013 m., Kai pirmą kartą išleido „Drifty Co.“. „Ionic“ padėjo interneto kūrėjams panaudoti turimus įgūdžius augančioje mobiliųjų programų pramonėje. 2015 m. „Facebook“ naudojo „React.js“, kad iš naujo sugalvotų ją mobiliųjų programų kūrėjams. Jie suteikė mums „React Native“, visiškai „JavaScript“ kodų bazę, pagrįstą savaisiais SDK.

Ir tai nėra vieninteliai, bet keli iš daugelio hibridinių mobiliųjų sistemų. Daugiau informacijos rasite čia.

Dabar galime stebėti „Google“ posūkį, kai pirštai dedami į pyragą su „Flutter“.

Kas yra „Dart“?

„Google“ pirmą kartą išleido „Flutter 1.0“ praėjusių metų gruodį, po to, kai buvo beta režimu veikusi daugiau nei 18 mėnesių. „Dart“ yra programavimo kalba, naudojama „Flutter“ programoms koduoti. „Dart“ yra dar vienas „Google“ produktas. Lapkričio mėnesį „Flutter“ išleido 2.1 versiją. Pradžioje „Flutter“ bendruomenė nėra tokia plati kaip „ReactNative“, „Ionic“ ar „Xamarin“.

Kiek vėliau atradau, kad patinka „JavaScript“. Buvau ekstazėje dirbdamas „ReactNative“ programoje, skirtoje praktikai. Man taip pat patinka koduoti hibridines mobiliąsias programėles, todėl norėjau pabandyti „Flutter“, kaip kažkada praėjusiais metais dariau „Xamarin“.

Iš pirmo žvilgsnio Flutter (ir Dart) pajutau pasimetimą ir, atrodo, negalėjau nieko suprasti. Jie netgi turėjo skyrių apie savo dokumentus, skirtus kūrėjams, kurie persikėlė iš „React Native“. Taigi, aš ėmiausi gilintis į visus „Dart“ dalykus.

Smiginis atrodo šiek tiek panašus į C ir yra į objektą orientuota programavimo kalba. Taigi, jei jums labiau patinka C kalbos ar „Java“, „Dart“ yra jums tinkama kalba, ir jūs greičiausiai tai mokėsite.

„Dart“ yra naudojamas ne tik mobiliųjų programų kūrimui, bet ir programavimo kalbai. „Ecma“ (ECMA-408) patvirtinta kaip standartas, ji naudojama kuriant bet ką žiniatinklyje, serveriuose, darbalaukyje ir, žinoma, mobiliosiose programose (taip, tie patys žmonės, kurie standartizavo mūsų mėgstamiausius ES5 ir ES6.)

„Dart“, kai naudojamas žiniatinklio programose, perkeliamas į „JavaScript“, todėl jis veikia visose žiniatinklio naršyklėse. „Dart“ diegimas taip pat yra VM, kad būtų galima paleisti .dart failus iš komandinės eilutės sąsajos. „Flartter“ programose naudojami „Dart“ failai yra surenkami ir supakuojami į dvejetainį failą (.apk arba .ipa) ir įkeliami į programų parduotuves.

Kaip atrodo „Dart“ kodavimas?

Kaip ir dauguma ALGOL kalbų (pvz., C # ar Java):

  1. „Dart“ klasės pradinis taškas yra main()metodas. Šis metodas taip pat yra atspirties taškas ir „Flutter“ programoms.
  2. Numatytoji daugelio duomenų tipų vertė yra null.
  3. Smiginio klasės palaiko tik vieną paveldėjimą. Konkrečiai klasei gali būti tik viena superklasė, tačiau joje gali būti daug sąsajų.
  4. Tam tikrų teiginių srauto valdymas, pvz., Jei sąlygos, ciklai (for, while ir do-while), jungikliai, pertraukos ir tęsiniai yra vienodi.
  5. Abstrakcija veikia panašiai, leidžiant abstrakčias klases ir sąsajas.

Skirtingai nuo jų (o kartais ir šiek tiek panašaus į „JavaScript“):

  1. Smiginis turi tipo išvadą. Kintamojo duomenų tipo nereikia aiškiai deklaruoti, nes Dartas „padarys išvadą“, kas tai yra. „Java“ kintamojo tipas turi būti aiškiai nurodytas deklaruojant. Pavyzdžiui String something;,. Tačiau „Dart“ programoje raktinis žodis naudojamas vietoj panašaus var something;,. Kodas traktuoja kintamąjį pagal tai, kas jame yra, ar tai būtų skaičius, eilutė, talpa ar objektas.
  2. Visi duomenų tipai yra objektai, įskaitant skaičius. Taigi, jei jie nėra inicializuoti, jų numatytoji vertė nėra 0, bet yra nulinė.
  3. Metodo grąžinimo būdas metodo paraše nėra būtinas.
  4. Tipas numdeklaruoja bet kokį skaitinį elementą, tiek realųjį, tiek sveikąjį.
  5. super()Metodas skambutis tik poklasio anketa konstruktorius pabaigoje.
  6. Raktinis žodis, newnaudojamas prieš konstruktorių kuriant objektą, yra neprivalomas.
  7. Metodo parašuose gali būti numatytoji perduotų parametrų vertė. Taigi, jei vienas iš jų nėra įtrauktas į metodo iškvietimą, metodas naudoja numatytąsias reikšmes.
  8. Jis turi naują integruotą duomenų tipą, vadinamą „Runes“, kuris elgiasi su UTF-32 kodo taškais eilutėje. Paprastą pavyzdį žr. Jaustukai ir panašios piktogramos.

Visi šie skirtumai yra tik keli iš daugelio, kuriuos galite rasti „Dart“ kalbos turo metu, kurį galite patikrinti čia.

„Dart“ taip pat turi įmontuotas bibliotekas, įdiegtas „Dart SDK“, dažniausiai naudojamos:

  1. smiginis: pagrindinio funkcionalumo šerdis; jis importuojamas į visus smiginio failus.
  2. „dart“: asinchroninis programavimas.
  3. smiginis: matematikos funkcijų ir konstantų matematika.
  4. „Dart“: konvertuokite konvertuoti tarp skirtingų duomenų vaizdų, pvz., JSON į UTF-8.

Daugiau informacijos apie „Dart“ bibliotekas rasite čia.

Dart naudojimas plazdenime

„Flutter“ turi daugiau konkrečiai programai pritaikytų bibliotekų, dažniau tokių naudotojo sąsajos elementų:

  1. Valdiklis: įprasti programos elementai, pvz., „Tekstas“ arba „ListView“.
  2. Medžiaga: yra elementų, atitinkančių medžiagos dizainą, pvz., „FloatingActionButton“.
  3. „Cupertino“: yra elementų, atitinkančių dabartinius „iOS“ dizainus, pvz., „CupertinoButton“.

Konkrečių „Flutter“ bibliotekų rasite čia.

„Flutter“ nustatymas

Taigi, norėdami pritaikyti šį dalyką, vadovaukitės „Flutter“ dokumentais. Čia pateikiama išsami informacija apie „Flutter SDK“ diegimą ir pageidaujamo IDE nustatymą; mano būtų VS kodas. Naudinga nustatyti VS kodą su „Flutter“ plėtiniu. Jis ateina su įmontuotomis komandomis, o ne terminalo naudojimu.

Dar kartą vykdykite dokumentus, kad sukurtumėte savo pirmąją programą. Mano atveju paleiskite plėtinio komandą „Flutter: New Project“. Vėliau įveskite projekto pavadinimą ir pasirinkite paskirties aplanką.

Jei norite naudoti terminalą, pereikite į programos paskirties aplanką. Tada naudokite komandąflutter 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.