#development

Flutter 2.0 - die zukunftsträchtigste Technologie in der Software-Welt?

March 28, 2021
Gastbeitrag von
Daniel Lampl

Durch die Unterstützung von Web und Desktop in Version 2.0 eröffnen sich völlig neue Möglichkeiten wobei Kosten und Aufwand drastisch gesenkt werden. Egal ob App im App Store oder PWA im Browser, Flutter bietet eine Vielzahl an Möglichkeiten um eine Idee oder ein Produkt einer breiten Masse an Usern bereitzustellen und die User Experience zu verbessern.

Daniel Lampl

Als UI Framework für mobile iOS und Android Anwendungen bekannt hat Google Flutter bereits für viel Aufmerksamkeit gesorgt. Doch das Ziel war nie nur diese beiden Plattformen zu bedienen, sondern die Möglichkeit zu schaffen, auch andere, nicht mobile Geräte zu unterstützen. Mit Version 2.0 kommt Flutter diesem Ziel einen riesigen Schritt näher und bringt enorme Mehrwerte, vor allem die Ergänzung mit Flutter Web ist ein vielversprechender Schritt in Richtung einer gemeinsamen Code-Base für alle Endgeräte.

Welchen großen Mehrwert bietet die Google Technologie?

Mit Flutter 2.0 wurden nach mehreren Jahren Entwicklungszeit der Support für Web und Desktop Geräte veröffentlicht. Das bedeutet, dass mit ein und dem selben Programmcode eine Applikation sowohl als iOS und Android App als auch als Web-App und Anwendung für Windows, Linux und Mac OS Betriebssysteme erstellt werden kann.

Es ist nun also technisch möglich eine bereits bestehende mobile Flutter App für den Browser oder Desktop zu optimieren und mit relativ wenig zusätzlichem Aufwand zwei weitere, große Benutzer-Quellen zu bedienen. Somit ist man nicht mehr nur von den Download-Zahlen des Play und App Stores abhängig, sondern kann sein Produkt zusätzlich einer weitaus breiteren Maße bereitstellen. Ein Mehrwert, den bislang noch keine Technologie so unkompliziert und performant geschaffen hat.

Mit Flutter 2.0 behält man sich zukünftige Entscheidungen offen, ohne alles wieder neu umsetzen zu müssen. Man kann mit einer Web-App starten und diese in weiterer Folgen als App in die beiden Stores bringen. Das minimiert Risiko und Kosten und bietet zusätzlich einen großen Mehrwert bei der Entwicklung der Applikation.

Was ändert sich für die Software-Entwickler?

Nachdem wir mit Flutter nun die Möglichkeit haben mit einer gemeinsamen Codebasis mehrere Plattformen bedienen zu können, ist die Unterteilung in Technologie-abhängigen Teams nicht mehr notwendig. Die Entwickler im Projekt arbeiten alle im selben Team und minimieren somit Ressourcen, die für eine rasche Weiterentwicklung dringend benötigt werden.

Aus einem iOS, Android und Web-Team wird ein großes "Frontend"-Team, dass theoretisch in der selben Zeit den dreifachen Progress liefern kann. Zusätzlich müssen diese 3 Teams nicht mehr untereinander "synchronisiert" werden. Das iOS-Team muss also nicht mehr auf die Änderungen des Android- oder Web-Teams warten um neue Features veröffentlichen zu können.

Natürlich muss der gemeinsame Code an die unterschiedlichen Plattformen angepasst werden. Das Design muss an die Displaygrößen adaptiert werden, manche Funktionalitäten, wie der Zugriff auf die Bluetooth-Komponente des Geräts muss anders konfiguriert und umgesetzt werden und das Ausrollen von neuen Version funktioniert jeweils anders. Der Aufwand ist dennoch um ein vielfaches geringer als die App für jede Plattform einzeln umzusetzen.

Flutter Web - was ist möglich und was nicht?

Mit Flutter ist im Web noch nicht alles, aber sehr viel möglich. Die Web-Unterstützung durch Version 2.0 ist auf folgende Use Cases ausgelegt:

  • Progressive Web App (PWA) - Web-Apps die aussehen wie mobile Apps und über den Browser am Gerät installiert werden. Diese sind weniger performant als Android oder iOS Apps, da sie auf Web-Technologien basieren und nicht wie Flutter den Code in Maschinencode für die unterstützen Plattformen umwandelt.
  • Existierende mobile Flutter Anwendungen - Mobile Flutter Apps können für den Browser und Desktop-Betriebsysteme erstellt werden.
  • Single Page Application - Anwendung die nur im Browser gerendert werden.

Web-Apps, die mit Flutter entwickelt wurden, funktionieren wesentlich anders als konventionelle Anwendungen im Web. Anstatt die einzelnen Elemente mittels HTML im Browser darzustellen, "zeichnet" Flutter die Grafikelement auf ein leeres Canvas (Zeichenfläche). Das bietet den Vorteil, über jeden einzelnen Pixel am Bildschirm die vollste Kontrolle zu haben.

Jedoch bringt es den Nachteil, dass (vorerst) kein SSR (Server-Side-Rendering) mit Flutter möglich ist. Das bedeutet, dass die Anwendung immer erst im Browser des Benutzers gerendert  und nicht schon am Server vorgeladen wird. Eine wesentliche Funktionalität, die gegeben sein muss um von Suchmaschinen wie Google gefunden werden zu können. SEO ist also bei diesen Apps nicht möglich. Das Flutter-Team arbeitet jedoch bereits daran, dies auch zu ermöglichen.

Wie kann so eine Flutter-App aussehen?

Einen perfekten Use Case zeigt uns Spotify. Zwar wurde Spotify nicht mit Flutter entwickelt, doch bieten Sie ihren Benutzern eine wichtige Funktionalität, die nun ebenso mit Flutter umsetzbar ist - eine PWA. Dadurch ist es möglich, mit anderen einen Song zu teilen, ohne die App aus dem App oder Play Store herunterladen zu müssen. Das Lied wird direkt im Browser des Geräts geöffnet und kann von dort unkompliziert abgespielt werden.

Spotify-Song in der Web App

Spotify hat hier eine sehr wichtige Funktionalität in den Browser gebracht. Somit ist es auch für Benutzer möglich, die Spotify nicht am Gerät installiert haben, die Musik im Browser abspielen zu können.

Wer setzt bereits auf Flutter?

Ein Vielzahl von namhaften Unternehmen setzen bereits auf die Vorteile von Flutter und dessen Plattform-Unabhängigkeit.

iRobot

Bekannt für ihre Staubsauger-Roboter schuf iRobot eine App, mit der Kinder spielerisch Softwareentwicklung lernen können, indem sie per Drag-and-Drop Befehle aneinanderreihen, die ein Saugroboter ausführt. Mit Flutter ursprünglich für iOS und Android Geräte entwickelt, veröffentlichte iRobot die selbe Anwendung nun fürs Web.

https://edu.irobot.com/what-we-offer/irobot-coding

Toyota

Der größte Auto-Hersteller der Welt hat das Potential von Flutter erkannt und arbeitet momentan an einem neuen Infotainment-System für deren Autos. Mittels der Flutter Embedder API und der grundlegenden Architektur von Flutter ist es möglich, Anwendungen für nahezu jedes Gerät zu entwickeln und Hardware-Komponenten anzusteuern.

Toyota entschied sich für Flutter sowohl aufgrund der Performance und den bereits existierenden Optimierungen für Touch-Geräte, als auch für die Möglichkeit schnell und einfach das Programm testen zu können, ohne das finale Gerät des Autos bei sich zu haben. Die Anwendung kann ja auch im Web oder als Tablet-App getestet werden. Das ermöglicht ein schnelles Einarbeiten von Feedback und liefert eine erhöhte Produktivität in der Entwicklung.

Ubuntu

Cannonical, das Team hinter einem der größten Linux-Distributionen (Ubuntu), entschied sich ihren zukünftigen Ubuntu Desktop Installer mit Flutter neu zu implementieren. Sie empfehlen bereits, Ubuntu-Anwendungen mit Flutter zu entwickeln und bieten zudem die dafür vorgesehenen Grafikelement an.

Microsoft

Obwohl Microsoft mit Xamarin eine eigene Technologie für die Entwicklung iOS und Android Apps im Repertoire hat, setzt das Unternehmen vermehrt auf Flutter.

2020 war das Jahr der faltbaren Smartphones und auch Microsoft beteiligte sich an diesem Trend und veröffentlichten das Microsoft Duo - eine faltbares Android Smartphone. Um die Entwicklung für diesen Formfaktor zu vereinfachen, arbeitete Microsoft gemeinsam mit dem Flutter-Team an der Unterstützung von faltbaren Geräten und wird dies auch in Zukunft weiter verbessern.

Fazit: Flutter gehört Zukunft im App-Bereich

Durch die Unterstützung von Web und Desktop in Version 2.0 eröffnen sich völlig neue Möglichkeiten wobei Kosten und Aufwand drastisch gesenkt werden. Egal ob App im App Store oder PWA im Browser, Flutter bietet eine Vielzahl an Möglichkeiten um eine Idee oder ein Produkt einer breiten Masse an Usern bereitzustellen und die User Experience zu verbessern. Was möglich ist, zeigen namhafte Firmen, die zudem bei der Weiterentwicklung von Flutter mitwirken.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Weitere Beiträge: Das könnte dich interessieren

Alle Posts

Interessant? Wir haben einen Newsletter