Flattern für Front-End-Webentwickler

Verwandeln Sie sich von der Front-End-Webentwicklung zur Flutterentwicklung? 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 der Entwicklung von Front-End-Web und Flattern aufgeführt, und wie die Fähigkeiten, die Sie bereits haben, Ihnen helfen können, mit Flattern schneller zu beginnen.

1. UI -Implementierung der Benutzeroberfläche (UI)

In der Front-End-Webentwicklung verwenden Sie HTML-Elemente, um die Benutzeroberfläche zu erstellen und sie mit CSS zu stylen. In Flutter verwenden Sie Widgets , um die Benutzeroberfläche zu erstellen und sie mit Eigenschaften zu stylen.

Color in Dart unterstützt "RGBA" und "Hex" -Farbwerte 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, beispielsweise:

• BorderRadius
• BoxShadow
• FontWeight
• Opacity
• Padding
• …

Flutters Column und Row -Widget entsprechen der display: flex in CSS. Die Eigenschaften MainAxisAlignment und CrossAxisAlignment entsprechen den Stilen justify-content und align-items . Um den flex-grow -Stil anzupassen, können Sie die entsprechenden Kinder-Widgets mit Expanded oder Flexible einwickeln.

Für komplexe UIs bietet Flutter die CustomPaint -Klasse, die Canvas -API in der Webentwicklung entspricht. CustomPaint können Sie das Zeichnen einer Benutzeroberfläche anpassen. CustomPaint wird normalerweise verwendet, wenn Sie Effekte implementieren müssen, die mit sehr komplexen UI- oder Widget -Kombinationen nicht möglich sind.

2. Anpassungsanpassung mit mehreren Bildschirmauflösungen

Die Website wird auf dem Browser ausgeführt und die mobile App wird auf dem Gerät ausgeführt. 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 -Displays unter verschiedenen Bildschirmgrößen zu verarbeiten.

In Flutter bietet MediaQuery -Klasse ähnliche Funktionen. Es kann Geräteinformationen wie Geräteorientierung (Landschaft oder Porträt), Ansichtsfenstergröße, devicePixelRatio usw. erhalten, wodurch Sie die Benutzeroberfläche der Anwendung gemäß verschiedenen Bildschirmgrößen anpassen können.

3.. Debug -Tools, Redakteure und Befehlszeilen -Tools

Desktop -Browser verfügen über Entwickler -Tools, einschließlich Inspektoren, Konsolen, Netzwerküberwachung usw., was die Effizienz der Webentwicklung verbessert. Flutter verfügt auch über eigene Devtools, darunter Widget Inspector, Debugger, Netzwerküberwachung und andere Funktionen.

Die IDE -Unterstützung ist ä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.

Neues Konzept

In diesem Abschnitt werden Konzepte eingeführt, die für Flutter einzigartig sind, die entweder in der Webentwicklung nicht vorhanden sind oder auf unterschiedliche Weise implementiert werden.

1. Scrollenverarbeitung

In der Webentwicklung wird das Standard -Scrolling -Verhalten vom Browser behandelt, und Sie können das Scrollen mit CSS (wie overflow Überlaufeigenschaft) anpassen.

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

Flutter ListView spezielle Widgets CustomScrollView um SingleChildScrollView Scrollen zu konfigurieren, wie z. Diese scrollbaren Widgets bieten eine körnige Kontrolle über das Bildlaufverhalten. CustomScrollView können Sie komplexe und professionelle Bildlaufmechanismen konfigurieren.

In Flutter ist die Verwendung von ScrollView unvermeidlich. Android und iOS haben ScrollView und UIScrollView jeweils zum Scrolling. 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. Konstruktion für Entwicklungsumgebung

Um eine einfache Website zu erstellen, müssen Sie nur eine .html -Datei erstellen und in Ihrem Browser öffnen. 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 bietet flutter doctor -Befehl, um den Einstellungsstatus der Entwicklungsumgebung zu melden, um zu verstehen, welche Einstellungen Sie vornehmen müssen.

Dies bedeutet jedoch nicht, dass die Flatternentwicklung langsam ist. Flutter verfügt über einen leistungsstarken Motor, und der Befehl flutter run ermöglicht die 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. Verpackung und Bereitstellung

Die Bereitstellung einer Website ist billiger und einfacher als die Bereitstellung einer mobilen App. 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 bietet kostenlose .ondigitalocean.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 Anwendungen von Flutter müssen Sie Ihre Anwendung 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 das normalerweise eine Gebühr oder Abonnement erforderlich ist und sich authentifiziert.

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

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

Darüber hinaus 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.

Das Verwalten 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.

Zusätzliche Gedanken zum Flattern

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 funktioniert gut, da es die Funktionen von Dart baut und nutzt.

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 Sie möchten, dass Benutzer Plattform -Entwickler -Tools verwenden, 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, sollten Sie Flutter nicht für die Webentwicklung verwenden.

Darüber hinaus sollte Flutter nicht für inhaltsreiche Websites verwendet werden.

abschließend

Dieser Artikel überprüft den Fähigkeitenstransfer von der Front-End-Webentwicklung bis zur Flutterentwicklung sowie den neuen Anwendungsentwicklungskonzepten, 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!