Platform – iOS vagy Android?

Esetenként szükség lehet arra, hogy eldönthessük, hogy melyik platformon vagyunk éppen. Vajon iOS, vagy Android telefont használunk?

Alapból igaz az a mondás, hogy használhatjuk ugyanazokat a widgeteket és stílusokat, függetlenül attól, hogy melyik platformon vagyunk. Ennek ellenére vannak esetek, amikor szeretnénk egy kicsit eszköz (platform) közelibb, natívabb megjelenést. Olyan megjelenést, ami sokkal közelebb áll az adott platformhoz.

Példa

Legyen az a konkrét példa, hogy szeretnénk Androidon és iOS-en is a rendszernek megfelelő Alert ablakot felhozni.

Ahhoz, hogy tudjuk, hogy iOS vagy Android telefonon fut az alkalmazásunk, először is importálni kell a Dart io csomagját:

import 'dart:io';

Ebben lesz majd az a Platform objektum, ami segít meghatározni a futtató eszköz típusát, platformját.

Induljunk ki abból, hogy van egy már mindkét platformon megjelenő alert doboz:

      showDialog(
        context: context,
        builder: (ctx) => AlertDialog(
          title: const Text('Invalid input'),
          content: const Text(
              'Please make sure a valid title, amount, date and category was entered.'),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.pop(ctx);
              },
              child: const Text('Okay'),
            ),
          ],
        ),
      );

A showDialog-nak megvan az iOS megfelelője, ami a showCupertinoDialog. Ha ezt a metódust akarjuk használni, akkor importálni kell a Flutternek a cupertino.dart csomagját:

import 'package:flutter/cupertino.dart';

A Cupertino tulajdonképpen a az iOS stílus vagy dizájn nyelvének a neve. Tehát valahányszor csak találkozunk a cupertino-val egy Flutter alkalmazáson belül, akkor ott tutira valami iOS specifikus dolog lesz.

A showCupertinoDialog egyébként tök ugyanúgy működik, mint a showDialog. Szóval erre most külön nem térek ki, mert a Dialógus ablakok posztban erről részletesen írtam.

A különbség, hogy itt nem az AlertDialog widgetet használjuk, hanem a CupertinoAlertDialog widgetet. A CupertinoAlertDialog-nak ugyanazok a paraméterei megvannak, mint az AlertDialog-nak, így simán kopizhatunk mindent:

      showCupertinoDialog(
        context: context,
        builder: (ctx) => CupertinoAlertDialog(
          title: const Text('Invalid input'),
          content: const Text(
              'Please make sure a valid title, amount, date and category was entered.'),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.pop(ctx);
              },
              child: const Text('Okay'),
            ),
          ],
        ),
      );

Mivel természetesen egyszerre a két dialógus ablak nem jeleníthető meg, ezért célszerű egy külön megjelenítő függvénybe ezeket áthelyezni.

  void _showDialog() {}

És ebben a függvényben fogjuk a Platform objektum alapján kiválasztani a megfelelőt.

Platform objektum

A Platform objektumnak elérhető számos tulajdonsága, amivel meg tudjuk határozni, hogy milyen eszközzel van dolgunk:

Ez alapján egy egyszerű feltétel lesz a barátunk:

void _showDialog() {
    if (Platform.isIOS) {
      showCupertinoDialog(
        // ...
      );
    } else {
      showDialog(
        // ...
      );
    }
  }

Androidon ez jelenik meg például a AlertDialog-gal:

iOS-en pedig a CupertinoAlertDialog-gal mondjuk ez: