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!