Flutter für Front-End-Web Entwickler

Ich begann als Front-End-Webentwickler und wurde dann ein Flutter-Entwickler. Ich glaube, es gab einige Konzepte, die mir die Übernahme von Flutter erleichtert haben. Es gab auch einige neue Konzepte, die anders waren.

In diesem Artikel möchte ich meine Erfahrungen teilen und jeden inspirieren, der sich gelähmt fühlt, wenn er sich für ein Ökosystem über das andere entscheiden muss, indem ich zeige, wie Konzepte übertragen werden und neue Konzepte erlernbar sind.

Übertragene Konzepte

Dieser Abschnitt zeigt Stellen, an denen sich die Front-End-Webentwicklung und Flutter ähneln. Er erklärt Fähigkeiten, die Sie bereits haben und die ein Vorteil für Sie sind, wenn Sie mit Flutter beginnen.

1. Implementierung von Benutzeroberflächen (UIs)

Um eine gegebene Benutzeroberfläche in der Front-End-Webentwicklung zu implementieren, setzen Sie HTML-Elemente zusammen und stylen sie mit CSS. Um Benutzeroberflächen in Flutter zu implementieren, setzen Sie *Widgets* zusammen und stylen sie mit *Properties*.

Ähnlich wie CSS funktioniert die `Color`-Klasse in Dart mit "rgba" und "hex". Ebenso wie CSS verwendet Flutter Pixel für Abstands- und Größeneinheiten.

In Flutter gibt es Dart-Klassen und Enums für fast alle CSS-Eigenschaften und deren Werte. Zum Beispiel:

• BorderRadius
• BoxShadow
• FontWeight
• Opacity
• Füllung
• …

Flutter hat auch die Widgets `Column` und `Row`. Diese sind das Flutter-Äquivalent für `display: flex` in CSS. Um die Stile `justify-content` und `align-items` zu konfigurieren, verwenden Sie die Eigenschaften `MainAxisAlignment` und `CrossAxisAlignment`. Um `flex-grow` anzupassen, umschließen Sie das betroffene Kind-Widget (oder die Kinder-Widgets) von `Column`/`Row` mit `Expanded` oder `Flexible`.

Für fortgeschrittene Benutzeroberflächen hat Flutter die Klasse `CustomPaint` – sie ist für Flutter das, was die `Canvas API` für die Webentwicklung ist. `CustomPaint` gibt Ihnen einen Painter, um jede beliebige Benutzeroberfläche zu zeichnen. Sie werden `CustomPaint` normalerweise verwenden, wenn Sie etwas wirklich Komplexes wünschen. `CustomPaint` ist auch die bevorzugte Methode, wenn eine Kombination von Widgets nicht funktioniert.

2. Entwicklung für mehrere Bildschirmauflösungen

Websites laufen in Browsern und mobile Apps auf Geräten. Daher müssen Sie beim Entwickeln für beide Plattformen die Plattform im Auge behalten. Jede Plattform implementiert die gleichen Funktionen (Kamera, Standort, Benachrichtigungen usw.) auf unterschiedliche Weise.

Als Webentwickler denken Sie über die Responsivität Ihrer Website nach. Sie verwenden Media Queries, um zu steuern, wie Ihre Website auf kleineren und größeren Bildschirmen aussieht.

Wenn Sie von der mobilen Webentwicklung zu Flutter wechseln, haben Sie die Hilfsklasse `MediaQuery`. Die Klasse `MediaQuery` gibt Ihnen die aktuelle Geräteausrichtung (Quer- oder Hochformat). Sie gibt Ihnen auch die aktuelle Viewportgröße, die Gerätepixelrate und andere Geräteinformationen. Zusammen geben Ihnen diese Werte Einblicke in die Konfiguration des Mobilgeräts. Sie können sie verwenden, um das Aussehen Ihrer mobilen App bei verschiedenen Bildschirmgrößen zu ändern.

3. Arbeiten mit Debuggern, Editoren und Kommandozeilen-Tools

Desktop-Browser verfügen über Entwicklertools. Diese Tools umfassen einen Inspektor, eine Konsole, einen Netzwerkmonitor usw. Diese Tools verbessern den Webentwicklungsprozess. Flutter verfügt ebenfalls über eigene DevTools. Diese bieten einen Widget-Inspektor, Debugger, Netzwerkmonitor und weitere Funktionen.

Auch die IDE-Unterstützung ist ähnlich. Visual Studio Code ist eine der beliebtesten IDEs für die Webentwicklung. Es gibt viele webbezogene Erweiterungen für VS Code. Flutter unterstützt ebenfalls VS Code. Wenn Sie also wechseln, müssen Sie Ihre IDE nicht ändern. Es gibt Dart- und Flutter-Erweiterungen für VS Code. Flutter funktioniert auch gut mit Android Studio. Sowohl Android Studio als auch VS Code unterstützen Flutter DevTools. Diese IDE-Integrationen machen die Flutter-Toolchain komplett.

Die meisten Front-End-JavaScript-Frameworks werden mit ihrer Kommandozeilenschnittstelle (CLI) geliefert. Zum Beispiel: Angular CLI, Create React App, Vue CLI usw. Flutter wird ebenfalls mit einer exklusiven CLI geliefert. Die Flutter CLI ermöglicht es Ihnen, Angular-Projekte zu erstellen, zu erstellen und zu entwickeln. Sie enthält Befehle zur Analyse und zum Testen von Flutter-Projekten.

Neue Konzepte

Dieser Abschnitt befasst sich mit Flutter-spezifischen Konzepten, die in der Webentwicklung einfacher oder nicht vorhanden sind. Er erklärt Ideen, die Sie beachten sollten, wenn Sie mit Flutter beginnen.

Umgang mit Scrollen

Bei der Entwicklung für das Web wird das Standard-Scrollverhalten von Webbrowsern übernommen. Sie können das Scrollen jedoch mit CSS anpassen (mit `overflow`).

Dies ist in Flutter nicht der Fall. Widget-Gruppen scrollen nicht standardmäßig. Wenn Sie feststellen, dass Widget-Gruppen überlaufen könnten, müssen Sie das Scrollen proaktiv konfigurieren.

In Flutter konfigurieren Sie das Scrollen durch die Verwendung spezieller Widgets, die Scrollen ermöglichen. Zum Beispiel: `ListView`, `SingleChildScrollView`, `CustomScrollView` usw. Diese scrollbaren Widgets geben Ihnen große Kontrolle über das Scrollen. Mit `CustomScrollView` können Sie Experten- und komplexe Scroll-Mechanismen innerhalb der Anwendung konfigurieren.

Auf der Flutter-Seite ist die Verwendung von `ScrollViews` unvermeidlich. Android und iOS verfügen über `ScrollView` und `UIScrollView` zur Handhabung des Scrollens. Flutter benötigt eine Möglichkeit, das Rendering und die Entwicklererfahrung zu vereinheitlichen, indem es ebenfalls seine `ScrollViews` verwendet.

Es kann hilfreich sein, nicht mehr an den Fluss der Dokumentenstruktur zu denken und stattdessen die Anwendung als offene Leinwand für die nativen Malmechanismen eines Geräts zu betrachten.

2. Einrichtung Ihrer Entwicklungsumgebung

Um die einfachste Website zu erstellen, können Sie eine Datei mit der Erweiterung `.html` erstellen und sie in einem Browser öffnen. Flutter ist nicht so einfach. Um Flutter nutzen zu können, müssen Sie das Flutter SDK *und* Flutter für ein Testgerät konfiguriert haben. Wenn Sie also Flutter für Android programmieren möchten, müssen Sie das Android SDK einrichten. Sie müssen auch mindestens ein Android-Gerät (einen Android-Emulator oder ein physisches Gerät) konfigurieren.

Das Gleiche gilt für Apple-Geräte (iOS und macOS). Nach der Installation von Flutter auf einem Mac müssen Sie Xcode einrichten, bevor Sie fortfahren. Sie benötigen auch mindestens einen iOS-Simulator oder ein iPhone, um Flutter unter iOS zu testen. Flutter für Desktop ist ebenfalls eine erhebliche Einrichtung. Unter Windows müssen Sie das Windows Development SDK mit Visual Studio (nicht VS Code) einrichten. Unter Linux installieren Sie weitere Pakete.

Ohne zusätzliche Einrichtung funktioniert Flutter im Browser. Daher könnten Sie die zusätzliche Einrichtung für Zielgeräte übersehen. In den meisten Fällen würden Sie Flutter für die Entwicklung mobiler Apps verwenden. Daher möchten Sie mindestens Android oder iOS einrichten. Flutter wird mit dem Befehl `flutter doctor` geliefert. Dieser Befehl meldet den Status Ihrer Entwicklungseinrichtung. So wissen Sie, woran Sie bei der Einrichtung arbeiten müssen, falls erforderlich.

Das bedeutet nicht, dass die Entwicklung in Flutter langsam ist. Flutter verfügt über eine leistungsstarke Engine. Der Befehl `flutter run` ermöglicht Hot-Reloads auf das Testgerät während des Codierens. Aber dann müssen Sie `R` drücken, um tatsächlich einen Hot-Reload durchzuführen. Das ist kein Problem. Die Flutter VS Code-Erweiterung ermöglicht automatische Hot-Reloads bei Dateiänderungen.

3. Paketierung und Bereitstellung

Die Bereitstellung von Websites ist günstiger und einfacher als die Bereitstellung von mobilen Anwendungen. Wenn Sie Websites bereitstellen, greifen Sie über Domainnamen darauf zu. Diese Domainnamen werden in der Regel jährlich erneuert. Sie sind jedoch optional.

Heute bieten viele Plattformen kostenloses Hosting an.

Zum Beispiel: DigitalOcean bietet Ihnen eine kostenlose Subdomain unter `.ondigitalocean.com`.

Sie können diese Domains verwenden, wenn Sie eine Dokumentationswebsite erstellen. Sie können sie auch verwenden, wenn Sie sich keine Gedanken über Branding machen.

In der Flutter-Welt mit mobilen Anwendungen stellen Sie Ihre App in den meisten Fällen an zwei Orten bereit.

• App Store (für iOS-Geräte)
• Google Play (für Android-Geräte)

Sie müssen auf jeder dieser Plattformen ein Entwicklerkonto registrieren. Die Registrierung eines Entwicklerkontos erfordert eine Gebühr oder ein Abonnement und eine Identitätsprüfung.

Für den App Store müssen Sie sich für das Apple Developer Program anmelden. Sie müssen ein jährliches Abonnement von 99 US-Dollar aufrechterhalten. Für Google Play müssen Sie eine einmalige Zahlung von 25 US-Dollar für das Konto leisten.

Diese Stores überprüfen jede App, bevor sie live geht.

Beachten Sie auch, dass Benutzer App-Updates nicht leichtfertig annehmen. Benutzer müssen installierte Anwendungen explizit aktualisieren. Dies steht im Gegensatz zum Web, wo jeder einfach die neueste bereitgestellte Version einer Website erhält.

Die Verwaltung bereitgestellter Anwendungen ist relativ anspruchsvoller als die Verwaltung bereitgestellter Websites. Dies sollte Sie jedoch nicht abschrecken. Schließlich gibt es Millionen von Apps, die in beiden Stores bereitgestellt werden, also können Sie Ihre auch hinzufügen.

Zusätzliche Gedanken zu Flutter

Flutter ist ein plattformübergreifendes Tool zum Erstellen von Desktop-, Mobil- oder Webanwendungen. Flutter-Apps sind pixelgenau. Flutter rendert unabhängig von der Zielplattform auf jeder App die gleiche Benutzeroberfläche. Das liegt daran, dass jede Flutter-App die Flutter-Engine enthält. Diese Engine rendert den Flutter-UI-Code. Flutter stellt für jedes Gerät eine Leinwand bereit und ermöglicht es Ihnen, nach Belieben zu malen. Die Engine kommuniziert mit der Zielplattform, um Ereignisse und Interaktionen zu verarbeiten.

Flutter ist effizient. Es hat hohe Leistungsniveaus. Dies liegt daran, dass es mit Dart erstellt wurde und die Funktionen von Dart nutzt.

Mit diesen vielen Vorteilen ist Flutter eine gute Wahl für viele Anwendungen. Plattformübergreifende Apps sparen Geld und Zeit bei Produktion und Wartung. Flutter (und plattformübergreifende Lösungen) ist jedoch in einigen Fällen möglicherweise keine optimale Wahl.

Verwenden Sie Flutter nicht, wenn Sie möchten, dass Benutzer plattformspezifische Entwicklertools mit Ihrer Anwendung verwenden. Plattformspezifische Entwicklertools bedeuten hier gerätespezifische Tools wie Android-Entwickleroptionen. Dazu gehören auch Browser-Entwicklertools.

Verwenden Sie Flutter nicht für das Web, wenn Sie erwarten, dass Browser-Erweiterungen mit der Website interagieren.

Verwenden Sie Flutter auch nicht für inhaltsreiche Websites.

Fazit

Dies war eine Überprüfung der Fähigkeiten, die von der Front-End-Webentwicklung zur Arbeit mit Flutter übergehen. Wir haben auch App-Entwicklungskonzepte besprochen, die Sie als Webentwickler lernen müssen.

Flutter ist für Webentwickler einfacher, da beide die Implementierung von Benutzeroberflächen beinhalten. Wenn Sie mit Flutter beginnen, werden Sie feststellen, dass es eine gute Entwicklererfahrung bietet. Probieren Sie Flutter aus! Nutzen Sie es, um mobile Apps zu erstellen und natürlich, um zu zeigen, was Sie erstellen.

Prost!