Flutter: Unterschied zwischen den Versionen
Codica (Diskussion | Beiträge) |
Codica (Diskussion | Beiträge) |
||
| (2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 5: | Zeile 5: | ||
Als Programmiersprache wird [[Dart]] genutzt. Die Benutzerelemente sehen zwar aus wie native Elemente; sie werden aber auf Pixelbasis von den Flutter-Komponenten selbst errechnet. | Als Programmiersprache wird [[Dart]] genutzt. Die Benutzerelemente sehen zwar aus wie native Elemente; sie werden aber auf Pixelbasis von den Flutter-Komponenten selbst errechnet. | ||
| + | |||
| + | == Projektstruktur == | ||
| + | |||
| + | Zur grundsätzlichen Struktur eines Dart-Projekts (package) siehe | ||
| + | * https://dart.dev/tools/pub/create-packages | ||
| + | * https://dart.dev/tools/pub/package-layout | ||
| + | |||
| + | Ein Package umfasst ein oder mehrere Libraries. Eine Library ist üblicherweise ein Dart-File (Ausnahme: Einbindung anderern [generierter] Dateien mittels <code>part</code>-Direktive). | ||
| + | Libraries im lib/-Verzeichnis sind public, wogegen solche im lib/src-Verzeichnis privat sind. | ||
| + | |||
| + | Wenn man Flutter benutzt kann man die Struktur durch | ||
| + | flutter create | ||
| + | erzeugen lassen. | ||
== Programmierparadigmen == | == Programmierparadigmen == | ||
| Zeile 118: | Zeile 131: | ||
** https://pub.dev/packages/fast_sync_client | ** https://pub.dev/packages/fast_sync_client | ||
* https://code.zeba.academy/offline-apps-flutter-syncing-data-handling-connectivity-issues/ - Anleitung mit Hilfe der lokalen Datenbank [[Sembast]] | * https://code.zeba.academy/offline-apps-flutter-syncing-data-handling-connectivity-issues/ - Anleitung mit Hilfe der lokalen Datenbank [[Sembast]] | ||
| + | * https://www.powersync.com/blog/flutter-tutorial-building-an-offline-first-chat-app-with-supabase-and-powersync - Anleitung mit Hilfe von SQLite, Supabase und PowerSync | ||
* https://flutterdata.dev/ | * https://flutterdata.dev/ | ||
** https://github.com/flutterdata/flutter_data | ** https://github.com/flutterdata/flutter_data | ||
Aktuelle Version vom 17. Januar 2025, 16:09 Uhr
- Flutter ist ein Open Source-Framework, um native Android-, iOS-, Linux- und Windows- sowie Web-Anwendungen zu bauen.
- mit Fluxbuilder
Als Programmiersprache wird Dart genutzt. Die Benutzerelemente sehen zwar aus wie native Elemente; sie werden aber auf Pixelbasis von den Flutter-Komponenten selbst errechnet.
Projektstruktur
Zur grundsätzlichen Struktur eines Dart-Projekts (package) siehe
Ein Package umfasst ein oder mehrere Libraries. Eine Library ist üblicherweise ein Dart-File (Ausnahme: Einbindung anderern [generierter] Dateien mittels part-Direktive).
Libraries im lib/-Verzeichnis sind public, wogegen solche im lib/src-Verzeichnis privat sind.
Wenn man Flutter benutzt kann man die Struktur durch
flutter create
erzeugen lassen.
Programmierparadigmen
State Management
Das State Management ist ähnlich demjenigen von React und React Native, allerdings klassenbasiert. Die neueren funktionsbasierten Hooks (useXXX) aus der React-Welt gibt es in Flutter nicht. Dafür gibt es viele ähnliche App-State-Management-Libraries, teilweise Übertragungen aus der React-Welt wie Redux und MobX.
Das State-Management erfolgt (ohne Library-Ergänzung) mit
- StatefulWidget oder
- InheritedWidget.
Man kann sich für eine App drei Schichten vorstellen:
- UI (möglichst keine Logik, keine veränderbaren Daten)
- App State-Management (nur Logik und Daten)
- Business Logic (nur Logik und Daten, Persistenz, Netzwerk-Zugriff ...)
Siehe auch
immutable state
Benütze so oft als möglich "final"!
Besonderheiten
Dateizugriff auf Media-Dateien beschränkt
Beim Auflisten des Inhalts eines Verzeichnisses erscheinen Dateien nicht. Das liegt daran, dass standardmäßig unter Android keine Berechtigungen erlaubt sind, andere Dateien als Media-Dateien (JPEG, PDF etc) zu lesen.
Man muss die Berechtigungen sowohl in die Manifest.xml eintragen als auch vom Benutzer anfordern. Siehe Permission.request in plugin permission_handler. In Frage kommen insbesondere:
- READ_MEDIA_IMAGES
- READ_MEDIA_VIDEO
- READ_MEDIA_AUDIO
oder
Siehe
JSON
JSON serialization
Dart hilft beim Einpacken von Daten in JSON und dem Auspacken. Allerdings ist es nicht JavaScript oder TypeScript, das ein first-class-Handling von JSON ermöglichen.
Hilfreiche Libraries sind
- json_serializable
- built_value
- deep_pick
- equatable
Siehe auch
Weitere Libraries für Behandlung von JSON in Dart/Flutter
Weitere hilfreiche Libraries mit JSON
- json_path
- rfc_6901 - JSONPointer Implementierung - kann JSON-Strukturen bearbeiten
- flutter_json_view - kann JSON-Strukturen anzeigen
Libraries
AppState-Libraries
Sehr einfache AppState-Libraries sind
- get_it und
- watch_it
UI-Libraries
Datenbank
SurrealDB
SurrealDB kann mit dem Package surrealdb von Duhanbalci genutzt werden.
Problem mit Websocket-Subprotokoll
Stand Jan. 2025 gibt es noch ein Problem mit einem "Subprotokoll" der Websocket-Schnittstelle. Näheres dazu unter dem (allerdings geschlossenen) Issue auf GitHub.
CouchDB
- Couchbase Lite
- cbl_dart - alle Plattformen außer Web
- cbl_flutter nur für Android
- Wilt - CouchDB client for server and flutter-based mobile
- Sporran basiert auf Wilt, kann aber auch lokal arbeiten und wie PouchDB mit einer entfernten Instanz synchronisieren. Wohl nur für Web-Plattform.
Weitere Datenbanken
- Sembast
- sqflite - SQLLite für Flutter
- Floor - basiert auf sqflite
- Hive
Offline-First
Insbesondere mobile Apps müssen damit zurechtkommen, dass Datenänderungen nicht sofort zum zentralen Server oder zum Client kommen. Auch dafür gibt es Libraries, die helfen, wenn die Datenbank das nicht selbst tut (z.B. bei PouchDB):
- [ https://pub.dev/packages/fast_sync_hive_dao FastSync]
- https://code.zeba.academy/offline-apps-flutter-syncing-data-handling-connectivity-issues/ - Anleitung mit Hilfe der lokalen Datenbank Sembast
- https://www.powersync.com/blog/flutter-tutorial-building-an-offline-first-chat-app-with-supabase-and-powersync - Anleitung mit Hilfe von SQLite, Supabase und PowerSync
- https://flutterdata.dev/
Weiterführendes
Siehe