Ota yhteyttä

Flutter ohjelmistotuotannossa

Mikä on Flutter?

Flutter on Googlen kehittämä, Dart-ohjelmointikieleen räätälöity ratkaisu monialustaisten sovellusten tekoon.

Se aloitti toimintansa Android- ja iOS sovellusten yhteisenä alustana Facebookin React Nativen tyyliin, mutta ajan edetessä laajeni tukemaan myös PC-käyttöjärjestelmiä (Windows, MacOS, Linux). 

Developereille tehty dokumentaatio on erittäin kattava sekä valmiiden Flutter-toteutusten että Dart-ohjelmointikielen pohjalta. Muista toteutuksista poikkeava ohjelmointikieli luo oman kynnyksensä, mutta dokumentaatio on kilpailijoita parempi.

Ero React Nativeen

Flutter on kaikkea mitä React Native tarjoaa “and then some”. Laajennettu tuki myös x86 käyttöjärjestelmiin tuo sen edun, että ohjelmistotoimisto voi potentiaalisesti tuottaa erillisen Electron.js version sijaan samasta lähdekoodista myös ohjelman työpöytäversion. Tässäkin tapauksessa Flutter sovellus on siis nativi sisäänrakennetulla dart-tulkilla (.NET, GTK, MacOS), tosin kuin Electron.js, josta tuotetaan saumaton verkkoselainikkuna JavaScript-tulkilla.

Flutterissa on työn alla myös tuki Apple Silicon M1 -prosessorille, joka löytyy uusimmista Mac-tietokoneista. Koska kaikki alustat luodaan samasta Dart-lähdekoodista, muuntuu olemassaoleva sovellus myös näille Applen laitteille yhteensopivaksi tulevaisuudessa.

Muita eroja listattuna:

  • Uniikki Javamainen ohjelmointikieli Dart, joka on räätälöity varsinkin Flutterin käyttöön. React Native toimii javascript-tulkilla. Dart-tulkki on argumentoitu olevan “lähempänä rautaa”
  • Valmis backend-tuki Googlen Firebasen kautta. Facebook (React, React Native) tarjoaa GraphQL ohjelmiston tietokantaoperaatioihin, mutta backend-toteutus on ohjelmistotoimiston harteilla edelleen
  • Valmis, sisäänrakennettu UI-framework sekä Googlen Material Designille että Applen lasimaiselle designille (“cupertino”). React Nativessa tulee tyhjät, HTML ulkoasua mukailevat natiivit komponentit valmiina

Google-ekosysteemi

Googlen palvelin- ja ohjelmistoratkaisut tarjoavat täysiverisen ratkaisun Firebasen myötä. Firebase on valmis tietokanta- ja rajapintaratkaisu datan säilyttämiseen, muokkaamiseen ja sen pääsyn autentikointiin. Tämä on kattavasti integroitu Flutterin kanssa. 

Material Design kirjasto Flutterille ja Angularille tarjoavat pitkälle mietityt, valmiit ja simplistiset pelisäännöt käyttöliittymän tekoon. Lisäksi siinä tulee kattava lista kuvakkeita.

https://flutter.dev/docs/development/ui/widgets/material

Flutter kehittäjälle

Javascriptiin tai Javaan / Kotliniin / Swiftiin tottuneet näkevät kaikki jotain tuttua Dartissa. Se tukee javascriptin lupauksia (Promise) Future -muodossa ja asynkronisia funktioita, jotka palauttavat Futuren. Kaikki data pitää joko tyypittää spesifisesti tai tyypittää olemaan “dynamic”, joka vastaa TypeScriptin “any” -tyyppiä. Javassa käytetään tai laajennetaan olemassaolevia oliotyyppejä, sama Dartissa. Myös fetchille on vastaava: flutterin HTTP-kirjasto: https://pub.dev/packages/http. Eli dataa haetaan erittäin samaan tyyliin kuin JavaScriptissä lupauksina, joista saadaan listoja ja/tai objekteja.

Tietoa voi Redux/Zustand storen kaltaisesti liikuttaa ja tallentaa tekemällä tiedon säilytykselle luokan, joka haetaan tarvittavaan paikkaan sisäänrakennetulla Provider.of funktiolla:

https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple

Funktio, joka “fetchaa” paikalliselta palvelimelta jotain tietoa käyttäen Flutterin HTTP:

Future<http.Response> getPosts() async {
  return await http.get('localhost',
    headers: <String, String>{
     'Content-Type':'application/json;'+
     'charset=utf-8',
     'Accept': '*/*',
     'Accept-Encoding': 'gzip, deflate, br',
     'Connection': 'keep-alive'
    },
    body: jsonEncode(<String, String>{
     'scope': 'public',
    }),
  );
}
...
http.Response res = await getPosts();
final responseJson = json.decode(res.body);

Agenda on erittäin valmis tuottamaan Flutter-sovelluksia firmoille, joilla on tarve toistaa esimerkiksi firman dataa mobiilisovelluksessa modernina toteutuksena. Se tuo allekirjoittaneelle developerille mukavaa vaihtelua WordPress-verkkosivujen luonnista 🙂