Ich begann als Front-End-Webentwickler und wurde dann ein Flutter Entwickler. Ich denke, es gab einige Konzepte, die mir geholfen haben, Flutter leichter zu übernehmen. 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, ein Ökosystem dem anderen vorzuziehen, indem ich zeige, wie Konzepte übertragen werden und neue Konzepte erlernbar sind.
Übertragene Konzepte
Dieser Abschnitt zeigt Orte, an denen sich Front-End-Webentwicklung und Flutter ähneln. Es erklärt Fähigkeiten, die Sie bereits haben, die für Sie von Vorteil sind, wenn Sie Flutter starten.
1. Implementieren von Benutzeroberflächen (UIs)
Um eine bestimmte Benutzeroberfläche im Front-End-Web zu implementieren, erstellen Sie HTML-Elemente und gestalten sie mit CSS. Um UIs in Flutter zu implementieren, komponieren Sie widgets und style sie damit immobilien.
Wie CSS, die Color Klasse in Dart arbeitet mit „rgba“ und „hex“. Ebenso wie CSS verwendet Flutter Pixel für Raum- und Größeneinheiten.
In Flutter haben wir Dart-Klassen und Aufzählungen für fast alle CSS-Eigenschaften und ihre Werte. Zum Beispiel:
Flutter hat auch Column und Row Widgets. Dies ist das Flutter-Äquivalent für display: flex im CSS. Konfigurieren justify-content und align-items Stile, die Sie verwenden MainAxisAlignment und CrossAxisAlignment Eigenschaften. Zum Anpassen der flex-grow style, umschließen Sie das/die betroffene(n) untergeordnete(n) Widget(s) der Column/Row, in einem (n Expanded or Flexible.
Für die fortgeschrittenen Benutzeroberflächen hat Flutter die CustomPaint Klasse – es ist was zum Flattern Canvas API ist die Webentwicklung. CustomPaint gibt Ihnen einen Maler, um jede Benutzeroberfläche nach Ihren Wünschen zu zeichnen. Sie werden normalerweise verwenden CustomPaint wenn Sie etwas wirklich Komplexes wollen. Ebenfalls, CustomPaint ist der richtige Weg, wenn eine Kombination von Widgets nicht funktioniert.
2. Entwicklung für mehrere Bildschirmauflösungen
Websites laufen auf Browsern und mobile Apps laufen auf Geräten. Daher müssen Sie bei der Entwicklung für beide Plattformen die Plattform im Auge behalten. Jede Plattform implementiert dieselben Funktionen (Kamera, Standort, Benachrichtigungen usw.) auf unterschiedliche Weise.
Als Webentwickler denken Sie über die Reaktionsfähigkeit Ihrer Website nach. Sie verwenden Medienabfragen, um zu handhaben, wie Ihre Website auf kleineren und breiteren Bildschirmen aussieht.
Wenn Sie von der mobilen Webentwicklung zu Flutter kommen, haben Sie die MediaQuery Helferklasse. Das MediaQuery Klasse gibt Ihnen das aktuelle Gerät orientation (Quer- oder Hochformat). Es gibt Ihnen auch das aktuelle Ansichtsfenster size, der devicePixelRatio, neben anderen 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 Befehlszeilentools
Desktop-Browser verfügen über Entwicklertools. Zu diesen Tools gehören ein Inspektor, eine Konsole, ein Netzwerkmonitor usw. Diese Tools verbessern den Webentwicklungsprozess. Flutter hat auch seine eigene DevTools. Es hat unter anderem seinen Widget-Inspektor, Debugger, Netzwerkmonitor.
Die IDE-Unterstützung ist ebenfalls ähnlich. Visual Studio Code ist eine der beliebtesten IDEs für die Webentwicklung. Es gibt viele webbezogene Erweiterungen für VS Code. Auch Flutter unterstützt VS Code. Während des Übergangs müssen Sie also die 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 vervollständigen das Flutter-Tooling.
Die meisten Front-End-JavaScript-Frameworks enthalten ihre Befehlszeilenschnittstelle (CLI). Zum Beispiel: Winkel-CLI, React App erstellen, CLI-Ansicht, usw. Flutter kommt auch mit einem exklusiven CLI. Mit der Flutter-CLI können Sie Angular-Projekte erstellen, erstellen und entwickeln. Es verfügt über Befehle zum Analysieren und Testen von Flutter-Projekten.
Konzepte, die neu waren
In diesem Abschnitt geht es um Flutter-spezifische Konzepte, die in der Webentwicklung einfacher oder nicht vorhanden sind. Es erklärt Ideen, die Sie beim Betreten von Flutter beachten sollten.
Umgang mit Scrollen
Bei der Entwicklung für das Web wird das standardmäßige Scrollverhalten von Webbrowsern gehandhabt. Es steht Ihnen jedoch frei, das Scrollen mit CSS (mithilfe von overflow).
Dies ist bei Flutter nicht der Fall. Widget-Gruppen scrollen standardmäßig nicht. Wenn Sie das Gefühl haben, dass Widget-Gruppen überlaufen könnten, müssen Sie das Scrollen proaktiv konfigurieren.
In Flutter konfigurieren Sie das Scrollen, indem Sie spezielle Widgets verwenden, die das Scrollen zulassen. Zum Beispiel: ListView, SingleChildScrollView, CustomScrollViewusw. Diese scrollbaren Widgets geben Ihnen eine große Kontrolle über das Scrollen. Mit CustomScrollView, können Sie Experten- und komplexe Scroll-Mechanismen innerhalb der Anwendung konfigurieren.
Auf Flutters Seite, mit ScrollViews ist unvermeidbar. Android und iOS haben ScrollView und UIScrollView Scrollen zu handhaben. Flutter braucht eine Möglichkeit, die Rendering- und Entwicklererfahrung zu vereinheitlichen, indem es seine verwendet ScrollViews, zu.
Es kann hilfreich sein, nicht mehr über den Fluss der Dokumentstruktur nachzudenken und stattdessen die Anwendung als offene Leinwand für die nativen Zeichenmechanismen eines Geräts zu betrachten.
2. Einrichten Ihrer Entwicklungsumgebung
Um die einfachste Website zu erstellen, können Sie eine Datei mit einer .html Erweiterung und öffnen Sie sie in einem Browser. Flattern ist nicht so einfach. Um Flutter verwenden zu können, müssen Sie das Flutter SDK installiert haben und habe Flutter für ein Testgerät konfiguriert. Wenn Sie also Flutter für Android programmieren möchten, müssen Sie das tun Richten Sie das Android-SDK ein. Sie müssen außerdem mindestens ein Android-Gerät (einen Android-Emulator oder ein physisches Gerät) konfigurieren.
Dies gilt auch für Apple-Geräte (iOS und macOS). Nachdem Sie Flutter auf einem Mac installiert haben, müssen Sie noch Xcode einrichten, bevor Sie fortfahren. Sie benötigen außerdem mindestens einen iOS-Simulator oder ein iPhone, um Flutter auf iOS zu testen. Flutter für den Desktop ist auch ein beachtliches Setup. 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 in Browsern. Infolgedessen 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 sollten Sie mindestens Android oder iOS einrichten. Flutter kommt mit flutter doctor Befehl. Dieser Befehl meldet den Status Ihres Entwicklungs-Setups. So wissen Sie, woran Sie ggf. im Setup arbeiten müssen.
Das bedeutet nicht, dass die Entwicklung von Flutter langsam ist. Flutter kommt mit einem leistungsstarken Motor. Das flutter run ermöglicht das Hot-Reloading auf das Testgerät während des Codierens. Aber dann müssen Sie drücken R um tatsächlich heiß nachzuladen. Dies ist kein Problem. Flutters VS Code-Erweiterung ermöglicht Auto-Hot-Reload bei Dateiänderungen.
3. Verpackung und Bereitstellung
Die Bereitstellung von Websites ist im Vergleich zur Bereitstellung mobiler Anwendungen billiger und einfacher. Wenn Sie Websites bereitstellen, greifen Sie über Domänennamen darauf zu. Diese Domainnamen werden in der Regel jährlich verlängert. Sie sind jedoch optional.
Heutzutage bieten viele Plattformen kostenloses Hosting an.
Beispielsweise: DigitalOcean gibt Ihnen eine kostenlose Subdomain auf .ondigitalocean.com.
Sie können diese Domänen verwenden, wenn Sie eine Dokumentationswebsite erstellen. Sie können sie auch verwenden, wenn Sie sich keine Gedanken über das Branding machen.
In Flutters Welt mit mobilen Anwendungen stellen Sie Ihre App in den meisten Fällen an zwei Orten bereit.
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 pflegen ein Jahresabonnement von 99 $. Für Google Play müssen Sie eine einmalige Zahlung von 25 $ für das Konto.
Diese Stores überprüfen jede überprüfte App, bevor sie live geht.
Denken Sie auch daran, dass Benutzer App-Updates nicht einfach konsumieren. Benutzer müssen installierte Anwendungen explizit aktualisieren. Dies steht im Gegensatz zum Web, wo jeder nur die neueste bereitgestellte Version einer Website sehen kann.
Die Verwaltung bereitgestellter Anwendungen ist relativ anspruchsvoller als die Verwaltung bereitgestellter Websites. Dies sollte Sie jedoch nicht erschrecken. Schließlich werden in beiden Stores Millionen von Apps bereitgestellt, sodass Sie auch Ihre hinzufügen können.
Zusätzliche Gedanken zu Flutter
Flutter ist ein plattformübergreifendes Tool zum Erstellen von Desktop-, Mobil- oder Webanwendungen. Flutter-Apps sind pixelgenau. Flutter malt dieselbe Benutzeroberfläche auf jeder App, unabhängig von der Zielplattform. Dies liegt daran, dass jede Flutter-App die Flutter-Engine enthält. Diese Engine rendert den Flutter-UI-Code. Flutter bietet eine Leinwand für jedes Gerät 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 ein hohes Leistungsniveau. 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) sind jedoch in einigen Fällen möglicherweise keine optimale Wahl.
Verwenden Sie Flutter nicht, wenn Sie möchten, dass Benutzer Plattformentwicklertools mit Ihrer Anwendung verwenden. Plattformentwicklertools bedeuten hier gerätespezifische Tools wie Android-Entwickleroptionen. Es enthält auch Browser-Entwicklertools.
Verwenden Sie Flutter nicht für das Web, wenn Sie erwarten, dass Browsererweiterungen mit der Website interagieren.
Verwenden Sie Flutter auch nicht für inhaltsreiche Websites.
Zusammenfassung
Dies war eine Überprüfung der Fähigkeiten, die von der Front-End-Webentwicklung auf die Arbeit mit Flutter übertragen werden können. Wir haben auch Konzepte zur App-Entwicklung besprochen, die Sie als Webentwickler lernen müssen.
Flutter ist für Webentwickler einfacher, da beide die Implementierung von UIs beinhalten. Wenn Sie Flutter starten, werden Sie feststellen, dass es Ihnen eine gute Entwicklererfahrung bietet. Probieren Sie Flutter aus! Verwenden Sie es, um mobile Apps zu erstellen, und präsentieren Sie natürlich, was Sie erstellen.
Prost!
