Flattern für Front-End-Webentwickler

Flatterning Flatterning Flatter Development aus der Front-End-Webentwicklung? Dieser Artikel wird meine Erfahrung teilen, damit Sie Ihren Übergang erleichtern können. Ich werde auf die Konzepte hinweisen, die sowohl für beide als auch als neue Konzepte in Flattern gelernt werden, sodass Sie sich keine Sorgen mehr darüber machen müssen, welches Ökosystem Sie wählen sollen.

Gemeinsame Konzepte

In diesem Abschnitt werden die Ähnlichkeiten zwischen Front-End-Webentwicklung und Flatter aufgeführt, sowie die Fähigkeiten, die Sie gemeistert haben, können Ihnen helfen, mit Flattern schneller zu beginnen.

1. In Flutter verwenden Sie Widgets, um die Benutzeroberfläche zu erstellen und sie mit Eigenschaften zu stylen.

Farbe Klasse in

dart unterstützt "RGBA" und "Hex" -Farbwerte, genau wie CSS. Flutter verwendet auch Pixel als Raum- und Größeneinheiten wie CSS.

Flutter liefert entsprechende Dartklassen und Aufzählungen für fast alle CSS -Eigenschaften und deren Werte, wie z. Code>

…

Flutters Spalte und Zeile Widgets entsprechen Anzeige: Flex in CSS. mainaxisalignment und crossaxisalignment Eigenschaften entsprechen Justify-Content und align-iTems Stile. Um den Stil Flex-Grow anzupassen, können Sie die entsprechenden untergeordneten Widgets mit erweitert oder flexibles erweitert.

Für komplexe UIS liefert Flutter die CustomPaint Klasse, die der canvas API in der Webentwicklung entspricht. CustomPaint Ermöglicht das Zeichnen einer Benutzeroberfläche. CustomPaint wird normalerweise verwendet, wenn Sie Effekte implementieren müssen, die nicht durch sehr komplexe UI- oder Widget -Kombinationen erreicht werden können.

2. Während des Entwicklungsprozesses müssen Plattformunterschiede berücksichtigt werden. Jede Plattform implementiert die gleichen Funktionen (Kamera, Positionierung, Benachrichtigungen usw.) auf unterschiedliche Weise.

Als Webentwickler sind Sie mit Responsive Design der Website vertraut und verwenden Medienabfragen, um die Effekte von Website -Anzeigen unter verschiedenen Bildschirmgrößen zu verarbeiten.

In Flutter bietet die Klasse Mediaquery eine ähnliche Funktionalität. Es kann Geräteinformationen wie Geräterichtung (Landschaft oder Porträt), Ansichtsfenstergröße, devicePixelRatio erhalten und die Benutzeroberfläche der Anwendung gemäß verschiedenen Bildschirmgrößen anpassen.

3. Flutter verfügt auch über eigene Devtools, darunter Widget Inspector, Debugger, Netzwerküberwachung und andere Funktionen.

iDE -Unterstützung ist ebenfalls ähnlich. Visual Studio Code ist eine beliebte Webentwicklungs-IDE mit vielen webbezogenen Erweiterungen. Flutter unterstützt auch VS -Code sowie Android Studio. Beide unterstützen Flutter Devtools und machen Flutters Toolchain sehr perfekt.

Die meisten Front-End-JavaScript-Frameworks sind mit einer Befehlszeilenschnittstelle (CLI) ausgestattet, wie z. Flutter verfügt außerdem über eine proprietäre CLI zum Aufbau, Erstellen und Entwickeln von Flutterprojekten sowie zur Durchführung von Codeanalysen und -tests.

Neue Konzepte

In diesem Abschnitt werden die Konzepte eingeführt, die nur in Flattern sind, die entweder in der Webentwicklung nicht existieren oder auf unterschiedliche Weise implementiert werden.

1.

Aber in Flattern scrollt die Widget -Gruppe standardmäßig nicht. Wenn die Widget -Gruppe möglicherweise überfließen, müssen Sie die Scrollen aktiv konfigurieren.

Flutter verwendet spezielle Widgets, um das Scrollen zu konfigurieren, wie z. Diese scrollbaren Widgets bieten eine körnige Kontrolle über das Bildlaufverhalten. CustomScrollView ermöglicht es Ihnen, komplexe und professionelle Scrolling -Mechanismen zu konfigurieren.

In Flutter ist mit scrollView unvermeidlich. Android und iOS haben scrollView und uiscrollView , um Scrolling zu verarbeiten. Flutter erfordert eine Möglichkeit, das Rendering und die Entwicklererfahrung zu vereinen, sodass auch scrollView verwendet wird.

Versuchen Sie, Ihre Denkweise zu ändern, und denken Sie nicht mehr über den Fluss der Dokumentstruktur nach, aber denken Sie an die Anwendung als offene Leinwand des nativen Zeichenmechanismus des Geräts.

2. Flattern ist viel komplizierter. Sie müssen das Flutter SDK installieren und Flutter für das Testgerät konfigurieren. Wenn Sie Flutter -Apps für Android entwickeln möchten, müssen Sie das Android -SDK einrichten und mindestens ein Android -Gerät (Emulator oder physisches Gerät) konfigurieren.

Gleiches gilt für iOS -Geräte (iOS und macOS). Nachdem Sie Flutter auf Ihrem Mac installiert haben, müssen Sie auch Xcode einrichten. Mindestens ein iOS -Simulator oder ein iPhone ist auch erforderlich, um die Flutter -App zu testen. Die Einstellungen von Desktop -Flattern sind ebenfalls ziemlich kompliziert. Unter Windows müssen Sie das Windows Development SDK mit Visual Studio (nicht VS -Code) einrichten. Unter Linux müssen Sie mehr Pakete installieren.

Flutter läuft im Browser, ohne sich auf zusätzliche Einstellungen zu verlassen. Daher können Sie die zusätzlichen Einstellungen des Zielgeräts ignorieren. In den meisten Fällen verwenden Sie Flutter für die Entwicklung mobiler Apps, sodass Sie eine Android- oder iOS -Umgebung einrichten müssen. Flutter stellt den Befehl flattern doctor zur Verfügung, um den Einstellungsstatus der Entwicklungsumgebung zu melden und zu verstehen, welche Einstellungen Sie vornehmen müssen.

Aber das bedeutet nicht, dass sich das Flattern langsam entwickelt. Flutter verfügt über eine leistungsstarke Engine, und der Befehl flattern run ermöglicht das Warenladen von Hot Reload zum Testgerät während der Codierung. Sie müssen jedoch R drücken, um eine heiße Reload durchzuführen. Die VS -Code -Erweiterung von Flutter ermöglicht das automatische Hot Reloading, wenn sich die Dateien ändern.

3. Bei der Bereitstellung einer Website zugreifen Sie sie über einen Domain -Namen, der normalerweise eine jährliche Erneuerung erfordert, aber nicht erforderlich ist.

Viele Plattformen bieten kostenlose Hosting -Dienste an, wie z. B. Digitalocean kostenlos .onigitalocean.com subdomain. Sie können diese Domainnamen verwenden, um Dokumentwebsites oder Websites zu erstellen, die sich nicht auf Branding konzentrieren.

In der Entwicklung der mobilen Anwendungsentwicklung von Flutter müssen Sie Ihre App normalerweise auf zwei Plattformen bereitstellen:

• App Store (iOS -Gerät)
• Google Play (Android -Gerät)

Sie müssen ein Entwicklerkonto auf jeder Plattform registrieren, für die normalerweise eine Zahlung oder Abonnement- und Authentifizierung und Authentifizierung erforderlich ist.

Der App Store muss sich für das Apple Developer -Programm anmelden und eine Abonnementgebühr von 99 USD pro Jahr zahlen. Google Play benötigt eine einmalige Registrierungsgebühr von 25 USD.

Diese App -Stores werden überprüft, bevor die App online geht.

Zusätzlich erhalten Benutzer nicht automatisch App -Updates, sie müssen installierte Apps manuell aktualisieren. Dies unterscheidet sich vom Web, in dem Benutzer im Web automatisch die neueste Version der Website sehen können.

Verwaltung bereitgestellter Anwendungen ist relativ mühsamer als die Verwaltung von bereitgestellten Websites. Dies sollte Sie jedoch nicht erschrecken, dass bereits Millionen von Apps in diesen Geschäften bereitgestellt werden.

Extra-Gedanken über Flutter

Flutter ist ein plattformübergreifendes Tool zum Erstellen von Desktop-, Mobil- oder Webanwendungen. Flutter-Anwendungen haben eine Präzision auf Pixelebene und machen die gleiche Benutzeroberfläche auf jeder Plattform, da jede Flutter-Anwendung eine Flutter-Engine enthält, die den UI-Code flattern und mit der Zielplattform kommuniziert, um Ereignisse und Interaktionen zu verarbeiten.

Flutter ist effizient und hat eine gute Leistung, da es mit Dart die Merkmale von Dart erstellt und verwendet.

Mit vielen Vorteilen ist Flutter ideal für viele Anwendungen. Plattformübergreifende Anwendungen sparen während der Produktion und Wartung Geld und Zeit. Flattern (und plattformübergreifende Lösungen) ist jedoch in einigen Fällen möglicherweise nicht die beste Wahl.

Wenn Benutzer die Plattform -Entwickler -Tools verwenden möchten, um mit Ihrer Anwendung zu interagieren, sollten Sie Flutter nicht verwenden. Die Plattform-Entwickler-Tools finden Sie hier auf Gerätespezifische Tools wie Android-Entwickleroptionen und Browser-Entwickler-Tools.

Wenn Sie erwarten, dass Browser -Erweiterungen mit Ihrer Website interagieren, sollte Flutter nicht für die Webentwicklung verwendet werden.

Zusätzlich sollte Flutter nicht für inhaltliche Websites verwendet werden.

Schlussfolgerung

Dieser Artikel überprüft den Fähigkeitenstransfer von der Front-End-Webentwicklung bis zur Flatternentwicklung sowie die neuen Anwendungsentwicklungskonzepte, die Sie lernen müssen.

Flutter ist für Webentwickler relativ einfach, da beide UI -Implementierungen beinhalten. Probieren Sie Flattern und Sie werden feststellen, dass es ein gutes Entwicklererlebnis bietet. Erstellen Sie eine mobile App mit Flutter und präsentieren Sie Ihre Ergebnisse!

Das obige ist der detaillierte Inhalt vonFlattern für Front-End-Webentwickler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!