A Dart and Flutter egyszerűsített bemutatása

Programozás

Egy kis háttér

2011-ben kezdődött az egész: a Xamarin, amely jelenleg a Microsoft tulajdonában van, a hibrid mobilalkalmazások számára megoldást kínált aláírási termékével, a C # -val rendelkező Xamarin SDK-val. Így kezdődött a hibrid mobilalkalmazások forradalma, az egyszerű kódbázis megírása sok platform számára.

Az Ionic 2013-ban lendült fel a Drifty Co. első kiadásával. Az Ionic segített a webfejlesztőknek a növekvő mobilalkalmazás-iparban meglévő képességeik felhasználásában. 2015-ben a Facebook a React.js segítségével újrafeltalálta a mobilalkalmazások fejlesztői számára. Megadták nekünk a React Native programot, egy teljesen JavaScript kódbázist, amely a natív SDK-kra épül.

És nem csak ezek, hanem néhány a sok hibrid mobil keretrendszerből. További információ itt található.

Most figyelhetjük a Google fordulatát, amikor a Flutterrel az ujjait a pitébe rakja.

Mi az a Dart?

A Google tavaly decemberben adta ki a Flutter 1.0 első kiadását, miután több mint 18 hónapig volt béta módban. A Dart a Flutter alkalmazások kódolásához használt programozási nyelv. A Dart a Google másik terméke, és novemberben jelentette meg a 2.1-es verziót a Flutter előtt. Kezdetben a Flutter közösség nem olyan kiterjedt, mint a ReactNative, az Ionic vagy a Xamarin.

Nemrégiben felfedeztem a JavaScript kedvelését. Eksztatikus voltam, hogy a gyakorlatom során egy ReactNative mobilalkalmazáson dolgoztam. Élvezem a hibrid mobilalkalmazások kódolását is, ezért ki akartam próbálni a Fluttert, ahogy a Xamarint is tettem valamikor tavaly.

Flutter (és Dart) első pillantására zavartnak éreztem magam, és úgy tűnt, hogy nem értek semmit. Még egy részük is volt a dokumentumaikról a React Native-ból átköltöző fejlesztők számára. Szóval, mélyebbre ástam magam Dart minden dolgában.

A Dart kissé hasonlít a C-re, és objektum-orientált programozási nyelv. Tehát, ha a C nyelveket vagy a Java-t részesíti előnyben, akkor a Dart az Ön számára, és valószínűleg jártas lesz benne.

A Dart nemcsak mobilalkalmazások fejlesztésére szolgál, hanem programozási nyelv. Az Ecma (ECMA-408) szabványként jóváhagyta, és szinte bármit épít az interneten, a szervereken, az asztali gépeken és természetesen a mobilalkalmazásokban (igen, ugyanazok, akik szabványosították az ES5 és ES6 kedvenceket).

A Dart webalkalmazásokban történő használatakor átkerül a JavaScript-be, így minden webböngészőben fut. A Dart telepítéshez tartozik egy virtuális gép is, amely a .dart fájlokat a parancssori felületről futtatja. A Flutter alkalmazásokban használt Dart fájlokat összeállítják és bináris fájlba (.apk vagy .ipa) csomagolják, és feltöltik az alkalmazásboltokba.

Hogyan néz ki a Dart kódolása?

Mint a legtöbb ALGOL nyelv (például C # vagy Java):

  1. A Dart osztály belépési pontja a main()módszer. Ez a módszer kiindulópontként szolgál a Flutter alkalmazások számára is.
  2. A legtöbb adattípus alapértelmezett értéke null.
  3. A dart osztályok csak az egyszeri öröklést támogatják. Egy adott osztálynak csak egy szuperosztálya lehet, de az interfészek sok megvalósításával rendelkezik.
  4. Bizonyos utasítások folyamatszabályozása, például ha a feltételek, a ciklusok (for, while és do-while), a switch-case, a break és a folytatás utasítások megegyeznek.
  5. Az absztrakció hasonló módon működik, lehetővé téve az absztrakt osztályokat és interfészeket.

Eltérően tőlük (és néha kissé olyan, mint a JavaScript):

  1. A dartnak tipikus következtetése van. Egy változó adattípusát nem kell kifejezetten deklarálni, mivel a Dart „kikövetkezteti”, mi az. A Java-ban a változó típusát kifejezetten meg kell adni a deklaráció során. Például String something;. De a Dart-ban a kulcsszót ehelyett használják, így var something;. A kód a változót annak megfelelően kezeli, legyen az szám, karakterlánc, bool vagy objektum.
  2. Minden adattípus objektum, beleértve a számokat is. Tehát, ha inicializálatlanul hagyjuk, akkor az alapértelmezett értékük nem 0, hanem null.
  3. A metódus visszatérési típusára nincs szükség a metódus aláírásában.
  4. A típus numbármely numerikus elemet deklarál, mind valós, mind egész számot.
  5. A super()metódus hívása csak egy alosztály konstruktorának végén található.
  6. A newkonstruktor előtt az objektum létrehozásához használt kulcsszó nem kötelező.
  7. A metódus-aláírások tartalmazhatnak egy alapértelmezett értéket az átadott paraméterekhez. Tehát, ha az egyik nem szerepel a metódushívásban, akkor a metódus az alapértelmezett értékeket használja.
  8. Új beépített adattípusa van, a Runes nevű, amely az UTF-32 kódpontokkal foglalkozik egy karakterláncban. Egyszerű példa: emojik és hasonló ikonok.

Mindezek a különbségek csak néhány a sok közül, amelyet a Dart Nyelv túrán talál, amelyet itt megnézhet.

A Dart beépített könyvtárakkal is rendelkezik a Dart SDK-ban, amelyek a leggyakrabban használtak:

  1. dart: mag az alapvető funkcionalitáshoz; az összes dart fájlba importálódik.
  2. dart: async az aszinkron programozáshoz.
  3. dart: matematikai függvények és állandók matematikája.
  4. dart: konvertálás különböző adatábrázolások, például JSON, UTF-8 közötti átalakításra.

A Dart könyvtárakról itt talál további információt.

A Dart használata a csapkodásban

A Flutter több alkalmazás-specifikus könyvtárral rendelkezik, gyakrabban a felhasználói felület elemein, például:

  1. Widget: gyakori alkalmazáselemek, például a Szöveg vagy a ListView.
  2. Anyag: az anyag kialakítását követő elemeket tartalmaz, például a FloatingActionButton.
  3. Cupertino: a jelenlegi iOS terveket követő elemeket tartalmaz, például a CupertinoButton.

A Flutter-specifikus könyvtárakat itt találja.

A Flutter beállítása

Tehát, hogy ez a dolog sebességbe kerüljön, kövesse a Flutter dokumentumokat. Részleteket ad a Flutter SDK telepítéséről és a preferált IDE beállításáról; az enyém VS kód lenne. Hasznos a VS kód beállítása a Flutter kiterjesztéssel. Beépített parancsokkal érkezik, szemben a terminál használatával.

Kövesse újra a dokumentumokat az első alkalmazás létrehozásához. Esetemben futtassuk a Flutter: New Project kiterjesztés parancsot. Ezután írja be a projekt nevét, és válassza ki a célmappát.

Ha inkább a terminált használja, lépjen az alkalmazás célmappájába. Ezután használja a parancsotflutter 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:

Original text

Contribute a better translation

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.