Was ist neu in Flutter 2?

Letztes Jahr habe ich hier im Smashing Magazine zwei Artikel über die Verwendung von Flutter auf Web- und Desktop-Plattformen geschrieben. Der erste Artikel war eine allgemeine Einführung in die Web- und Desktop-Entwicklung und konzentrierte sich auf die Erstellung einer responsiven Benutzeroberfläche; Der zweite Artikel befasste sich mit den Herausforderungen, denen Sie möglicherweise gegenüberstehen, wenn Sie versuchen, eine Flutter-App zu entwickeln, die auf mehreren Plattformen ausgeführt werden kann.

Damals wurde die Flutter-Unterstützung für nicht-mobile Plattformen vom Flutter-Team nicht als stabil und produktionsreif angesehen, aber die Dinge haben sich jetzt geändert.

Flutter 2 ist da

Am 3. März veranstaltete Google das Event Flutter Engage, bei dem Fluter 2.0 vorgestellt wurde. Diese Version ist wirklich eine richtige 2.0-Version, mit vielen Änderungen, die versprechen, Flutter wirklich bereit zu machen, um über die Entwicklung mobiler Apps hinauszugehen.

Die Änderung, die für das Verständnis, warum Flutter 2.0 wichtig ist, von zentraler Bedeutung ist, ist, dass die Webentwicklung jetzt offiziell Teil des Stable-Kanals ist und die Desktop-Unterstützung bald auch auf dem Stable-Kanal folgen wird. Tatsächlich ist es derzeit in Release Candidate-ähnlicher Form als Beta-Schnappschuss für die frühe Veröffentlichung im Stable-Kanal aktiviert.

Google hat in der Ankündigung nicht nur einen Hinweis darauf gegeben, wie die Zukunft von Flutter aussehen wird. Es gab auch konkrete Beispiele dafür, wie große Unternehmen bereits an Flutter-Apps arbeiten, um ihre bestehenden Apps durch solche zu ersetzen, die eine bessere Leistung erbringen und es Entwicklern ermöglichen, produktiver zu sein. So wird zB der weltgrößte Autohersteller Toyota jetzt das Infotainment-System mit Flutter in seine Autos einbauen.

Eine weitere interessante Ankündigung – diese zeigt, wie schnell sich Flutter als plattformübergreifendes SDK verbessert – ist die Ankündigung von Canonical, dass sie neben der Entwicklung ihres neuen Ubuntu-Installationsprogramms mit Flutter auch Flutter als Standardoption zum Erstellen von Desktop-Apps verwenden werden.

Sie haben auch eine Flutter-Version von Ubuntus Yaru-Design veröffentlicht, die wir später in diesem Artikel verwenden werden, um eine Flutter-Desktop-App zu erstellen, die sich perfekt in den Ubuntu-Desktop einfügt und auch einige weitere der neuen Flutter-Funktionen verwendet. Sie können sich die Flutter 2-Ankündigung von Google ansehen, um sich ein vollständigeres Bild zu machen.

Schauen wir uns einige der technischen Änderungen an Flutter an, die mit Version 2.0 in den Stable-Kanal kamen, und erstellen wir eine sehr einfache Beispiel-Desktop-App mit Flutter, bevor wir einige Schlussfolgerungen darüber ziehen, für welche spezifischen Projekttypen wir Flutter verwenden konnten und für welche nicht jetzt.

Allgemeine Änderungen der Benutzerfreundlichkeit für größere Geräte

Laut der Ankündigung wurden viele Änderungen an Flutter vorgenommen, um Geräte, die keine Mobilgeräte sind, besser zu unterstützen.

Ein offensichtliches Beispiel für etwas, das für Web- und Desktop-Apps benötigt wurde und bisher mit Paketen von Drittanbietern oder durch eigene Implementierung erledigt werden musste, ist eine Bildlaufleiste .

Jetzt gibt es eine eingebaute Scrollbar , die sich direkt in Ihre App einfügen lässt und genau so aussieht, wie eine Bildlaufleiste auf der jeweiligen Plattform aussehen sollte: mit oder ohne Track, mit der Möglichkeit zum Scrollen, indem Sie beispielsweise auf den Track klicken enorm, wenn Sie möchten, dass sich Ihre Benutzer bei der Verwendung Ihrer Flutter-App von Anfang an wie zu Hause fühlen. Sie können es auch thematisieren und anpassen.

Es sieht auch so aus, als würde Flutter irgendwann automatisch passende Scrollbars anzeigen, wenn der Inhalt der App scrollbar ist.

In der Zwischenzeit können Sie einfach jede scrollbare Ansicht mit dem Bildlaufleisten-Widget Ihrer Wahl umschließen und einen ScrollController erstellen, den Sie als controller sowohl für die Bildlaufleiste als auch für das scrollbare Widget hinzufügen können (falls Sie noch nie einen ScrollController verwendet haben, verwenden Sie ihn genau wie einen TextEditingController für ein TextField ). Ein Beispiel für die Verwendung einer normalen Material-Bildlaufleiste finden Sie etwas weiter unten in diesem Artikel im Beispiel der Desktop-App.

Flutter-Web-Änderungen

Flutter für das Web war bereits in einer recht brauchbaren Form, aber es gab Leistungs- und Benutzerfreundlichkeitsprobleme, die bedeuteten, dass es sich nie so ausgefeilt anfühlte wie Flutter für Mobilgeräte. Mit der Veröffentlichung von Flutter 2.0 wurden viele Verbesserungen vorgenommen, insbesondere in Bezug auf die Leistung .

Das Kompilierungsziel, das zuvor sehr experimentell und schwierig zu verwenden war, um Ihre App (mit WebAssembly und Skia) zu rendern, heißt jetzt CanvasKit . Es wurde verfeinert, um ein konsistentes und leistungsfähiges Erlebnis zu bieten, wenn Sie von der Ausführung einer Flutter-App nativ auf Mobilgeräten zur Ausführung in einem Browser wechseln.

Jetzt wird Ihre App standardmäßig mit CanvasKit für Desktop-Webbenutzer und mit dem Standard-HTML-Renderer (der ebenfalls verbessert wurde, aber nicht so gut wie CanvasKit ist) für mobile Webbenutzer gerendert.

Wenn Sie versucht haben, Flutter zum Erstellen von Web-Apps zu verwenden, ist Ihnen vielleicht aufgefallen, dass es nicht besonders intuitiv war, etwas so Einfaches wie einen Hyperlink zu haben. Zumindest können Sie jetzt Hyperlinks ein bisschen ähnlicher erstellen, wie Sie es bei der Verwendung von HTML tun würden, indem Sie die Link -Klasse verwenden.

Dies ist eigentlich keine Ergänzung zu Flutter selbst, sondern eine neue Ergänzung zu Googles url_launcher -Paket. Eine vollständige Beschreibung und Anwendungsbeispiele der Link -Klasse finden Sie in der offiziellen API-Referenz.

Die Textauswahl wurde verbessert, da der Drehpunkt jetzt dem entspricht, wo der Benutzer mit der Textauswahl begonnen hat, und nicht dem linken Rand des betreffenden SelectableText . Außerdem sind jetzt Optionen zum Kopieren/Ausschneiden/Einfügen vorhanden und funktionieren ordnungsgemäß.

Trotzdem ist die Textauswahl immer noch nicht erstklassig, da es nicht möglich ist, Text über verschiedene SelectableText -Widgets auszuwählen und auswählbarer Text immer noch nicht standardmäßig ist, aber wir werden darüber sowie über andere herausragende Nachteile des Flutter-Webs sprechen (mangelnde SEO-Unterstützung , in erster Linie) am Ende dieses Artikels.

Flutter-Desktop-Änderungen

Als ich letztes Jahr über Web- und Desktop-Entwicklung mit Flutter schrieb, konzentrierte ich mich hauptsächlich auf das Erstellen von Web-Apps mit Flutter, da die Desktop-Entwicklung immer noch als sehr experimentell galt (nicht einmal im beta -Kanal). Jetzt folgt jedoch bald der Flutter-Desktop-Support dem Web-Support und wird stabil bleiben.

Leistung und Stabilität wurden erheblich verbessert, und die Verbesserungen der allgemeinen Benutzerfreundlichkeit für größere Geräte, die mit Maus und Tastatur bedient werden und von denen Web-Apps so sehr profitieren, bedeuten auch, dass Flutter-Desktop-Apps jetzt benutzerfreundlicher sind.

Es gibt immer noch einen Mangel an Werkzeugen für Desktop-Apps und es gibt noch viele ziemlich schwerwiegende ausstehende Fehler, also versuchen Sie nicht, sie für Ihr nächstes Desktop-App-Projekt zu verwenden, das für die öffentliche Verteilung bestimmt ist.

Beispiel für eine mit Flutter erstellte Desktop-App

Die Flutter-Desktop-Unterstützung ist jetzt jedoch ziemlich stabil und brauchbar, und sie wird in Zukunft sicherlich genauso viel besser werden, wie Flutter in seiner Gesamtheit bisher besser geworden ist, also lasst es uns versuchen, es in Aktion zu sehen ! Sie können das gesamte Codebeispiel in einem GitHub-Repository herunterladen.

Die App, die wir erstellen werden, ist die folgende sehr einfache App. Wir haben eine Sidebar-Navigation zusammen mit einigen Inhaltselementen für jeden der Navigationsabschnitte.

Als erstes müssen Sie Ihre Abhängigkeiten herausfinden .

Zunächst müssen Sie die Flutter-Desktop-Entwicklung mit dem Befehl aktiviert haben

 flutter config --enable-${OS_NAME}-desktop

Dabei ersetzen Sie ${OS_NAME} durch das Desktop-Betriebssystem Ihrer Wahl, entweder windows , linux oder macos . Für dieses Beispiel verwende ich Linux, da wir das Ubuntu-Design verwenden werden.

Es sind auch andere Abhängigkeiten erforderlich, um native Apps für jede Plattform zu erstellen, zum Beispiel benötigen Sie unter Windows Visual Studio 2019, unter macOS benötigen Sie Xcode und CocoaPods und Sie finden eine aktuelle Liste der Linux-Abhängigkeiten auf der offiziellen Website von Flutter.

Erstellen Sie dann ein Flutter-Projekt und führen Sie Folgendes aus:

 flutter create flutter_ubuntu_desktop_example

Dann müssen wir das Thema selbst (die einzige Abhängigkeit unserer App) abrufen, indem yaru zu den dependencies Ihrer App in pubspec.yaml (im Stammverzeichnis des Quellbaums) hinzufügen:

 dependencies: yaru: ^0.0.0-dev.8 flutter: sdk: flutter

Wechseln wir dann zu lib/main.dart , wo sich der Code unserer App befindet.

Zuerst importieren wir die Sachen, die wir brauchen. In diesem Fall importieren wir einfach die reguläre Flutter-Materialdesign-Bibliothek und das Yaru-Thema (wir verwenden nur das Light-Thema für dieses Beispiel, also show wir nur dieses eine Objekt im Yaru-Paket):

 import 'package:flutter/material.dart'; import 'package:yaru/yaru.dart' show yaruLightTheme;

Anstatt eine separate App-Klasse zu haben, werden wir die MaterialApp -Konstruktoren beim Aufrufen runApp direkt in main aufrufen, also legen wir dort das Design der App fest, das das Yaru-Design sein wird, genauer gesagt das helle Design namens yaruLightTheme :

 void main() => runApp(MaterialApp( theme: yaruLightTheme, home: HomePage(), ));

Die HomePage wird ein StatefulWidget sein, das die Daten enthält, die wir zeigen werden, da es unveränderlich ist (denken Sie daran, dass Widgets immer unveränderlich sind, die Veränderlichkeit wird im State eines StatefulWidget gehandhabt):

 class HomePage extends StatefulWidget { final dataToShow = { "First example data": [ "First string in first list item", "Second in first", "Example", "One" ], "Second example": [ "This is another example", "Check", "It", "Out", "Here's other data" ], "Third example": [ "Flutter is", "really", "awesome", "and", "it", "now", "works", "everywhere,", "this", "is", "incredible", "and", "everyone", "should", "know", "about", "it", "because", "someone", "must", "be", "missing", "out", "on", "a lot" ] }.entries.toList(); @override createState() => HomePageState(); }

Im HomePageState definieren wir die Benutzeroberfläche und das Verhalten der App. Schauen wir uns zunächst den Baum der Widgets an, die wir erstellen möchten (Listen- und Rasterelemente sowie Abstands-Widgets ausgenommen):

Wir werden die Column auf der linken Seite (diejenige, die die Steuerelemente für die Widgets zeigt, die auf der rechten Seite der App angezeigt werden) mithilfe eines Container auf eine bestimmte Breite (z. B. 400 Pixel) beschränken, während die GridView auf der rechten Seite dies tun sollte Expanded werden, um die Ansicht auszufüllen.

Auf der linken Seite der Row (innerhalb der Column ) sollte die ListView erweitert werden, um den vertikalen Raum unter der Row der Schaltflächen oben auszufüllen. Innerhalb der Row oben müssen wir auch den TextButton (den Reset-Button) erweitern, um den Platz rechts neben dem linken und rechten Chevron IconButton s zu füllen.

Der resultierende HomePageState , der all dies tut, zusammen mit der notwendigen Logik, um die richtigen Dinge auf der rechten Seite anzuzeigen, je nachdem, was der Benutzer auf der linken Seite auswählt, ist die folgende:

 class HomePageState extends State<HomePage> { int selected = 0; ScrollController _gridScrollController = ScrollController(); incrementSelected() { if (selected != widget.dataToShow.length - 1) { setState(() { selected++; }); } } decrementSelected() { if (selected != 0) { setState(() { selected--; }); } } @override Widget build(BuildContext context) { return Scaffold( body: Row( children: [ Container( color: Colors.black12, width: 400.0, child: Column( children: [ Row( children: [ IconButton( icon: Icon(Icons.chevron_left), onPressed: decrementSelected, ), IconButton( icon: Icon(Icons.chevron_right), onPressed: incrementSelected, ), Expanded( child: Center( child: TextButton( child: Text("Reset"), onPressed: () => setState(() => selected = 0), ), )) ], ), Expanded( child: ListView.builder( itemCount: widget.dataToShow.length, itemBuilder: (_, i) => ListTile( title: Text(widget.dataToShow[i].key), leading: i == selected ? Icon(Icons.check) : Icon(Icons.not_interested), onTap: () { setState(() { selected = i; }); }, ), ), ), ], )), Expanded( child: Scrollbar( isAlwaysShown: true, controller: _gridScrollController, child: GridView.builder( controller: _gridScrollController, itemCount: widget.dataToShow[selected].value.length, gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( maxCrossAxisExtent: 200.0), itemBuilder: (_, i) => Container( width: 200.0, height: 200.0, child: Padding( padding: const EdgeInsets.all(8.0), child: Card( child: Center( child: Text(widget.dataToShow[selected].value[i])), ), ), )), ), ), ], ), ); } }

und wir sind fertig!

Dann bauen Sie Ihre App mit

 flutter build ${OS_NAME}

wobei ${OS_NAME} der Name Ihres Betriebssystems ist, derselbe, den Sie zuvor verwendet haben, um die Flutter-Desktop-Entwicklung mit flutter config zu aktivieren.

Die kompilierte Binärdatei zum Ausführen Ihrer App wird sein

 build/linux/x64/release/bundle/flutter_ubuntu_desktop_example

unter Linux u

 build\windows\runner\Release\flutter_ubuntu_desktop_example.exe

Unter Windows können Sie das ausführen und erhalten die App, die ich Ihnen zu Beginn dieses Abschnitts gezeigt habe.

Unter macOS müssen Sie macos/Runner.xcworkspace in Xcode öffnen und dann Xcode verwenden, um Ihre App zu erstellen und auszuführen.

Andere Flatteränderungen

Es gab auch ein paar Änderungen, die sich auch auf die mobile Entwicklung mit Flutter auswirken, und hier ist nur eine kurze Auswahl von einigen davon.

Eine Funktion, die sich so viele von uns Flutter-Entwicklern gewünscht haben, ist eine bessere Unterstützung für Admob-Anzeigen , und sie ist jetzt endlich im offiziellen google_mobile_ads -Paket enthalten. Eine andere ist die autocomplete ; Es gibt ein Autocomplete -Material-Widget dafür sowie ein anpassbareres RawAutocomplete Widget.

Das Hinzufügen des Link , den wir im Abschnitt über die Webentwicklung besprochen haben, gilt tatsächlich für alle Plattformen , auch wenn seine Auswirkungen am stärksten von denen zu spüren sein werden, die an Flutter-Webprojekten arbeiten.

Letzte Dart-Sprachänderungen

Es ist wichtig, sich der Änderungen bewusst zu sein, die an der Dart-Sprache vorgenommen wurden, die sich auf die Entwicklung der Flutter-App auswirken.

Insbesondere brachte Dart 2.12 Unterstützung für die Interoperabilität der Sprache C (detailliert und mit Anweisungen für verschiedene Plattformen auf der offiziellen Flutter-Website beschrieben); Außerdem wurde dem stabilen Dart null-safety hinzugefügt.

null-safety

Die größte Änderung, die an Dart vorgenommen wurde, ist die Einführung einer soliden null-safety , die immer mehr Unterstützung von Paketen von Drittanbietern sowie den von Google entwickelten Bibliotheken und Paketen erhält.

Null-Sicherheit bringt Compiler-Optimierungen und verringert die Wahrscheinlichkeit von Laufzeitfehlern. Auch wenn es derzeit optional ist, sie zu unterstützen, ist es wichtig, dass Sie zumindest anfangen zu verstehen, wie Sie Ihre App null-sicher machen können.

Im Moment ist dies jedoch möglicherweise keine Option für Sie, da nicht alle Pub-Pakete vollständig nullsicher sind. Wenn Sie eines dieser Pakete für Ihre App benötigen, können Sie die Vorteile von nicht nutzen Null-Sicherheit.

Machen Sie Ihre App null-safe

Wenn Sie schon einmal mit Kotlin gearbeitet haben, wird Ihnen Darts Herangehensweise an die Nullsicherheit etwas vertraut sein. Sehen Sie sich den offiziellen Leitfaden von Dart an, um eine vollständigere Anleitung zur null-safety von Dart zu erhalten.

Alle Typen, mit denen Sie vertraut sind ( String , int , Object , List , Ihre eigenen Klassen usw.) sind jetzt nicht nullfähig: Ihr Wert kann niemals null sein.

Das bedeutet, dass eine Funktion mit einem Rückgabetyp ohne Nullwerte immer einen Wert zurückgeben muss , andernfalls erhalten Sie einen Kompilierungsfehler und Sie müssen immer Nicht-Nullwerte-Variablen initialisieren, es sei denn, es handelt sich um eine lokale Variable, der zuvor ein Wert zugewiesen wurde es ist jemals benutzt worden.

Wenn Sie möchten, dass eine Variable nullfähig ist, müssen Sie am Ende des Typnamens ein Fragezeichen hinzufügen, z. B. wenn Sie eine Ganzzahl wie folgt deklarieren:

 int? a = 1

Sie können es jederzeit auf null setzen und der Compiler wird nicht darüber weinen.

Was ist nun, wenn Sie einen Nullable-Wert haben und ihn für etwas verwenden, das einen Nicht-Nullable-Wert erfordert? Dazu können Sie einfach überprüfen, ob es nicht null ist:

 void function(int? a) { if(a != null) { // a is an int here } }

Wenn Sie mit 100%iger Sicherheit wissen , dass eine Variable existiert und nicht null ist, können Sie einfach die ! Operator, etwa so:

 String unSafeCode(String? s) => s!;

Schlussfolgerungen ziehen: Was können wir mit Flutter 2 machen?

Da sich Flutter ständig weiterentwickelt, gibt es immer mehr Dinge, die wir damit machen können, aber es ist immer noch nicht vernünftig zu sagen, dass Flutter für jedes beliebige App-Entwicklungsprojekt verwendet werden kann.

Auf der mobilen Seite ist es unwahrscheinlich, dass Sie auf etwas stoßen, in dem Flutter nicht großartig ist, da es von Anfang an unterstützt und aufpoliert wurde. Die meisten Dinge, die Sie jemals brauchen werden, sind bereits vorhanden.

Auf der anderen Seite sind Web und Desktop noch nicht so weit.

Desktop ist immer noch ein bisschen fehlerhaft und Windows-Apps (die ein wichtiger Teil der Desktop-Entwicklung sind) erfordern immer noch viel Arbeit, bevor sie gut aussehen. Unter Linux und macOS ist die Situation nur bedingt besser.

Das Web ist an einem viel besseren Ort als der Desktop . Sie können anständige Web-Apps erstellen, sind aber immer noch hauptsächlich auf Single-Page-Anwendungen und Progressive-Web-Apps beschränkt. Wir wollen es auf keinen Fall für inhaltsorientierte Apps verwenden, bei denen Indexierbarkeit und SEO erforderlich sind.

Inhaltszentrierte Apps werden wahrscheinlich nicht so toll sein, weil die Textauswahl immer noch nicht erstklassig ist, wie wir im Abschnitt über den aktuellen Stand von Flutter für das Web gesehen haben.

Wenn Sie jedoch die Webversion Ihrer Flutter-App benötigen, ist Flutter für das Web wahrscheinlich in Ordnung, zumal es bereits eine riesige Menge webkompatibler Pakete gibt und die Liste ständig wächst.

Zusätzliche Ressourcen

• Keynote (Flutter Engage), YouTube
• Was ist neu in Flutter 2, Flutter, Medium
• Nullsicherheit verstehen , null safety
• Responsive Web- und Desktop-Entwicklung mit Flutter, Smashing Magazine
• Lösung häufiger plattformübergreifender Probleme bei der Arbeit mit Flutter, Smashing Magazine