main.dart

A main.dart fájl az alkalmazás legfontosabb állománya. Ez a belépési pont az alkalmazásba.

A main.dart fájlba Dart kódokat írunk, amit az Android és iOS eszközök nem értenek meg. Tehát nem a dart kód fog a telókra másolódni és futni rajtuk.

Ehelyett az történik, hogy a Dart végigfut a kódon felülről lefelé, elolvassa a kódot, értelmezi azt. Ez az első lépés. A kódunk értelmezve, analizálva lesz a Dart által.

A következő lépés, hogy a kód egy olyan formátumra fordítódik (Compile), amit már megértenek a telók is. Gyakorlatilag a dart kód, natív Android vagy iOS gépi kódra fordítódik.

Aztán végül ez a kód fut majd az okos eszközökön.

Lépésről-lépésre

Ahhoz, hogy megértsük a main.dart működését, a legjobb, ha mi magunk építjük újra a nulláról.

runApp() függvény

Ezt a függvényt a Flutter keretrendszer biztosítja. Feladata, hogy elindítsa az appot, illetve egészen pontosan megjelenít egy felhasználói felületet a képernyőn.

Önmagában a

runApp();

futtatása még kevés lesz és a VSCode hibát is jelez:

Létre kell hozni egy olyan függvényt, ami ezt a runApp függvényt tartalmazza:

void main() {
  runApp();
}

A VSCode egy újabb hibát jelez:

Vagyis nincs a runApp függvény definiálva. Érti ugyan a Flutter, hogy meg akarunk hívni egy függvényt, de ezt a függvényt nem találja sehol. Meg kell neki tehát mondani azt, hogy honnan vegye a függvényt.

Biztosan valamelyik csomagnak a része. A különböző csomagokat, amiket a programban használunk a pubspec.yaml fájl tartalmazza. Ez tárolja a projektünk függőségeit a dependencies szakaszban, az összes harmadik féltől származó csomagot, illetve rendszercsomagot:

dependencies:
  flutter:
    sdk: flutter

A függőségeket importálni kell a kódba:

import 'package:flutter/material.dart';

Az import utasításnál sztringként adjuk meg az útvonalat. Ezen belül a package szó jelöli azt, hogy csomagot importálunk, a kettőspont után adjuk meg a csomag nevét. A csomag neve után pedig perjel után azt a dart fájlt, amiben a runApp függvény benne van.

Hogyan futtatja a Flutter az appot?

Most már a runApp-ot megtalálja a Flutter a material.dart fájlban. Az a kérdés, hogy a main függvény hogyan fut le a kódban?

A függvények hívása a fuggvenyNev() formában történik. Azonban a main egy speciális függvény, amit nem kell így meghívni.

A main függvény a fő belépési pontja a Dart alkalmazásnak. Ezt a Dart fogja automatikusan lefuttatni, amikor az appunk aktív lesz a mobileszközön. Természetesen a parszolás és fordítás után.

runApp paraméterei

A kód még mindig nem fog tudni futni, mert a VSCode is jelzi, hogy a runApp-ot paraméterezni kell:

Ha megnézzük a flutter.dev oldalon a runApp implementációját, akkor azt látjuk, hogy a runApp-nak van egy Widget típusú paramétere:

void runApp(Widget app) {
  WidgetsFlutterBinding.ensureInitialized()
    ..scheduleAttachRootWidget(app)
    ..scheduleWarmUpFrame();
}

Egy Flutter alkalmazásban a user interface widget-ekből épül fel. Az egészet Widget fának nevezzük. Tehát a runApp egy Widget fát vár igazából a paraméterében. A kérdés adott: melyik Widgetet kell a runApp-nak odaadni? És, hogyan adunk hozzá egy widgetet a kódhoz?

Hogy milyen widgeteket lehet használni azt a Flutter Widget katalógusa tartalmazza.

MaterialApp widget

A runApp által használt widgetek egyike a MaterialApp widget. Ez egy alapvető (core) widget, ami a material.dart fájlban található. Ez a widget a belépő widget egy Flutter alkalmazásban. Ez a widget nagyon felhasználói felülettel kapcsolatos beállítást elvégez a háttérben, hogy az jól jelenjen meg.

void main() {
  runApp(MaterialApp());
}

Ugyanakkor önmagában nem jelenít meg semmit a képernyőn, mert nem ez a funkciója. Helyette vár egy másik paramétert, aminek az a feladata, hogy megjelenítsen valamit:

void main() {
  runApp(MaterialApp(
    home: Text('Hello World!'),
  ));
}

Kód futtatása

Elérkezett az idő, hogy a VSCode nem jelez hibát, és az app futtatásra kész.