map metódus

A map metódus nem térképet fog nekünk létrehozni, hanem a lista típusú adatszerkezetek bejárását teszi lehetővé. Tehát a map metódussal szépen végig tudunk lépkedni egy lista minden elemén. Hogy az elemeken milyen műveletet hajtunk végre, az az adott céltól függ.

List adattípus metódusai

A teljesség kedvvért el kell mondani, hogy a listáknak nem csak a map() az egyedüli metódusuk. Ha a VSCode-ban a lista változó után egy pontot írunk, akkort a VSCode kegyetlen hosszú listát ad nekünk arról hogy milyen egyéb metódusokat tudunk még használni:

A map működése

A legegyszerűbben megfogalmazva, ez a hasznos és gyakran használt metódust arra jó, hogy egy listán belül átalakítsa, transzformálja a lista elemeket más elemekre. És a végén egy új lista keletkezik.

A map metódus egyetlen értéket vár paraméterként. Egészen konkrétan egy függvényt. Ezt a függvényt a Dart automatikusan lefuttatja, minden egyes lista elemen. Vagyis a Dart automatikusan végignyargal a teljes listán és lefuttatja ezt a függvényt minden elemen:

lista.map(() {})

A függvény az aktuális lista elemet kapja meg, aminek a neve lehet bármi. Jelen pillanatban az item nevet kapta.

A függvény törzsében adjuk / kapjuk vissza az átalakított lista elemet:

  currentQuestion.answers.map((item) {
    return ujElem
  })

Példa

Nézzük meg éles bevetésen a map-et! Szándékosan nem a legegyszerűbb példát hoztam, mert ennek kapcsán több lényeges dolgot is meg fogunk érteni. 🙂

A map használata előtt egyszerűen megjelenítettünk négy gombot a következő módon:

          AnswerButton(
            answerText: currentQuestion.answers[0],
            onTap: () {},
          ),
          AnswerButton(
            answerText: currentQuestion.answers[1],
            onTap: () {},
          ),
          AnswerButton(
            answerText: currentQuestion.answers[2],
            onTap: () {},
          ),
          AnswerButton(
            answerText: currentQuestion.answers[3],
            onTap: () {},
          ),

A cél az, hogy mindezt a map segítségével oldjuk meg.

Először is abból indulunk ki, hogy valahol van egy questions lista, ami ilyen QuizQuestion nevű widget-eket tartalmaz:

const questions = [
  QuizQuestion(
    'What are the main building blocks of Flutter UIs?',
    [
      'Widgets',
      'Components',
      'Blocks',
      'Functions',
    ],
  ),
  QuizQuestion('How are Flutter UIs built?', [
    'By combining widgets in code',
    'By combining widgets in a visual editor',
    'By defining widgets in config files',
    'By using XCode for iOS and Android Studio for Android',
  ]),

Minden widget megjelenít / tartalmaz egy kérdést és a kérdéshez tartozó lehetséges válaszok listáját. Van egy currentQuestion változó is, ami a questions lista egy elemét, azaz egy widgetet tárol:

final currentQuestion = questions[0];

Minden egyes választ, egy gomb formájában akarjuk megjeleníteni. Vagyis a map metódussal végig fogunk menni a widgetben található válaszokon, mint listán és minden egyes lépésben „készítünk” egy gombot a válaszokból:

  currentQuestion.answers.map((answer) {
    return AnswerButton();
  })

Mire a map a lista végére ér, létrejön egy új lista, ami gombokat fog tartalmazni. Tehát nagyon fontos, hogy a map metódus nem változtatja meg az eredeti listát, ami esetünkben az answers. Vagyis a map létrehoz egy tök új listát, aminek semmi köze az eredetihez. Mindössze annyi, hogy az új lista az eredeti alapján lett létrehozva.

  currentQuestion.answers.map((answer) {
    return AnswerButton(answerText: answer, onTap: () {});
  })

Az eredmény, ami a return-ból kijön az egy gomb lista lesz.

Abban az esetben, ha nem egy lista kell nekünk, hanem a lista helyett Widget-ek, akkor tudjuk használni a spread operátort.