E-Book, Deutsch, 633 Seiten
Reihe: Rheinwerk Computing
Marburger / Post Flutter und Dart
2. Auflage 2025
ISBN: 978-3-367-10974-6
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection
Das umfassende Handbuch
E-Book, Deutsch, 633 Seiten
Reihe: Rheinwerk Computing
ISBN: 978-3-367-10974-6
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection
Wenn es um plattformübergreifende App-Entwicklung geht, macht Flutter Träume wahr: GUI-Bibliotheken, die das beste aus der Android- und der iOS-Welt flexibel zur Auswahl stellen, starke Tools und moderne Sprachfeatures - erleben Sie selbst, wie produktiv und elegant sich damit arbeiten lässt. Hier finden Sie alles, was Sie für den Einstieg und die professionelle Programmierung brauchen. Lernen Sie das Framework Flutter und die Sprache Dart mit all ihren Stärken kennen. Die Autoren führen in alle wichtigen Konzepte ein und vergessen dabei nicht, auf Fallstricke hinzuweisen. Mit vielen Beispielen, konkreten Praxistipps und Sinn für die wichtigen Details.
Aus dem Inhalt:
- Installation und Werkzeuge
- Abhängigkeiten verwalten
- Widgets, Themes und Styles
- Hot Reload und effiziente Workflows
- Lokalisierung und Barrierefreiheit
- Releases für iOS und Android
- Flutter Modules, Natives einbetten und C-Schnittstellen
- Unit-Tests, Widgets testen
- Logging und Analytics
Marc Marburger hat langjährige Erfahrung in der App- und Softwareentwicklung. Angefangen hat er nach dem Abschluss in Informatik mit C++ und Assembler in der Industrieautomatisierung. Plattformübergreifende Apps beschäftigen ihn seit 2012: C# auf der Windows-Plattform, Xamarin, Flutter und Dart, Rust. Letztere setzt er täglich als freiberuflicher Softwareentwickler immer häufiger in Kundenprojekten ein.
Autoren/Hrsg.
Weitere Infos & Material
Materialien zum Buch ... 19
TEIL I. Einführung ... 21
1. Über dieses Buch ... 23
1.1 ... Was Sie in diesem Buch lernen werden ... 24
1.2 ... Null-Safety als Default-Einstellung ab Flutter 2.2 ... 26
1.3 ... Danksagung ... 26
2. Installation und die Wahl der IDE ... 27
2.1 ... Flutter herunterladen und installieren ... 27
2.2 ... Die Wahl der IDE ... 31
2.3 ... Die Flutter-Installation voll im Griff ... 36
3. Warum Sie mit Dart voll ins Schwarze treffen ... 39
3.1 ... Der Ursprung von Dart ... 40
3.2 ... Ein erstes Dart-Programm ... 41
3.3 ... Wichtige Begleiter ... 43
3.4 ... Variablen ... 44
3.5 ... Datentypen ... 48
3.6 ... Funktionen ... 66
3.7 ... Klassen, Mixins und Enums ... 77
3.8 ... Generika ... 108
3.9 ... Collections ... 111
3.10 ... Kontrollstrukturen ... 127
3.11 ... Exceptions und Errors ... 134
3.12 ... Asynchrone Programmierung ... 138
3.13 ... Die Library ... 147
3.14 ... Ein Projekt strukturieren ... 149
3.15 ... Code dokumentieren ... 150
3.16 ... Null-Safety ... 152
3.17 ... Zusammenfassung ... 156
4. Pubs: Abhängigkeiten komfortabel verwalten ... 159
4.1 ... Von der Library zum Package ... 159
4.2 ... Ein Meer aus pubs ... 160
4.3 ... Wo Licht ist, da fällt auch Schatten ... 160
4.4 ... Packages verwenden ... 162
4.5 ... Versionen ... 166
4.6 ... Der System-Cache ... 169
4.7 ... Der Build Runner ... 169
4.8 ... Zusammenfassung ... 170
TEIL II. Bedienoberflächen ... 171
5. Widgets ... 173
5.1 ... Ein erstes Widget ... 174
5.2 ... Stateful Widgets ... 182
5.3 ... Material Design und Cupertino Design ... 194
5.4 ... Vom Widget zum Rendering Object ... 197
5.5 ... Keys ... 201
5.6 ... Zusammenfassung ... 205
6. Layouting ... 207
6.1 ... Positionierung ... 207
6.2 ... Scroll-Widgets ... 231
6.3 ... Constraints, Höhen und Breiten ... 259
6.4 ... MediaQueryData ... 267
6.5 ... Overlay ... 273
6.6 ... Die Gerüste ... 283
6.7 ... Zusammenfassung ... 294
7. Navigation ... 295
7.1 ... Ein erster Sprung ... 295
7.2 ... Wenn Flutter nach dem Weg fragt: Named Routes ... 299
7.3 ... Eine Route austauschen ... 301
7.4 ... Routen entfernen ... 303
7.5 ... Großflächig aufräumen mit push und pop ... 304
7.6 ... NavigatorObserver ... 304
7.7 ... Daten austauschen ... 305
7.8 ... Den Android-Back-Button zähmen ... 308
7.9 ... Routen als URIs ... 309
7.10 ... Verschachtelte Navigator-Objekte ... 309
7.11 ... Navigator 2.0 ... 311
7.12 ... Zusammenfassung ... 329
8. Früchte am Baum: InheritedWidgets ... 331
8.1 ... Ein InheritedWidget ... 331
8.2 ... Das eigene InheritedWidget: TimeInfo ... 332
8.3 ... Zusammenfassung ... 335
9. BloCs: View Logic aus dem Weg räumen ... 337
9.1 ... Der BloC ... 337
9.2 ... BloC und ValueListenable ... 338
9.3 ... ChangeNotifier ... 342
9.4 ... Streams ... 345
9.5 ... Futures ... 352
9.6 ... Frische Pizza mit flutter_bloc ... 355
9.7 ... Zusammenfassung ... 358
10. Mit dem Nutzer interagieren ... 359
10.1 ... Button, TextField und Co ... 359
10.2 ... Wischen, Schieben und Ziehen ... 380
10.3 ... Dialogs und die Snackbar ... 387
11. Themes und Styles ... 395
11.1 ... BoxDecoration ... 395
11.2 ... Clipping ... 399
11.3 ... Text ... 403
11.4 ... ThemeData und CupertinoThemeData ... 406
11.5 ... Effekte durch Widgets ... 406
12. Animationen ... 411
12.1 ... Implizite Animationen ... 411
12.2 ... Tween-Animationen ... 416
12.3 ... Explizite Animationen ... 419
12.4 ... AnimatedWidget und der AnimatedBuilder ... 424
13. Arbeiten mit Canvas und Paint ... 429
13.1 ... CustomPaint und CustomPainter ... 429
13.2 ... Zusammenfassung ... 437
TEIL III. Assets und Medien ... 439
14. Assets und Medien ... 441
14.1 ... Bilder ... 441
14.2 ... Icons ... 446
14.3 ... Videos ... 450
14.4 ... Schriften ... 452
14.5 ... Textressourcen ... 453
14.6 ... Zusammenfassung ... 455
15. Den Nutzerkreis vergrößern: Localization und Accessibility ... 457
15.1 ... Localization ... 457
15.2 ... Accessibility ... 475
15.3 ... Zusammenfassung ... 486
16. Die Cloud: Unendliche Weiten ... 487
16.1 ... Daten mit GET beziehen ... 488
16.2 ... Ein eigener (HTTP-)Client ... 489
16.3 ... POST, PUT und PATCH ... 493
16.4 ... Delete ... 500
16.5 ... Mehr zu Requests ... 502
16.6 ... Das Package dio ... 505
16.7 ... JSON-Serialisierung und -Deserialisierung ... 512
16.8 ... Die Webview ... 517
16.9 ... Zusammenfassung ... 532
17. Persistieren: Caches und Datenbanken ... 533
17.1 ... shared_preferences ... 534
17.2 ... flutter_cache_manager ... 538
17.3 ... Datenbanken ... 542
17.4 ... NoSQL mit Hive CE ... 554
17.5 ... Eine wirklich nützliche Beispiel-App ... 556
17.6 ... Zusammenfassung ... 567
TEIL IV. Sensoren und Hardware ... 569
18. Mit der Außenwelt kommunizieren ... 571
18.1 ... Geräteinformationen ... 571
18.2 ... Bewegungssensoren und Batterie ... 573
18.3 ... Verbindungsdaten ... 574
18.4 ... Berechtigungen ... 575
18.5 ... Kamera und Fotobibliothek ... 576
18.6 ... Standortbestimmung ... 577
18.7 ... Zusammenfassung ... 579
19. Den Kanal wechseln: Channels zur Plattform ... 581
19.1 ... Method Channels ... 582
19.2 ... Foreign Function Interface (FFI) ... 588
19.3 ... Hybride Apps ... 592
TEIL V. Endgame ... 601
20. Analytics, Tests und Releases ... 603
20.1 ... Logging ... 603
20.2 ... Analytics ... 605
20.3 ... Debugging ... 605
20.4 ... Profiling ... 607
20.5 ... Testing ... 609
20.6 ... Releases ... 620
20.7 ... Zusammenfassung ... 624
Index ... 625
2.2 Die Wahl der IDE
Sie haben bereits Erfahrungen mit Visual Studio Code oder Android Studio gesammelt? Für die Entwicklung mit Flutter können Sie Ihre Lieblingsumgebung gleich mitbringen!
Im Laufe des Jahres 2015 entschied sich das Team hinter Dart, auf die Weiterentwicklung seiner auf Eclipse basierenden Dart-IDE zu verzichten. Stattdessen konzentrierten die Entwickler sich auf Plugins, die auf einer Toolchain für die Kommandokonsole aufbauen und in aktuelle Entwicklungsumgebungen integriert werden können. Mit anderen Worten: Man packt Ihnen einen Koffer (das Plugin) mit allen wichtigen Programmen und Werkzeugen (der Toolchain), mit dem Sie dann zu Ihrer Lieblings-IDE wandern können, um in ihr zu entwickeln. Das ist ein nicht unerheblicher Grund dafür, dass Flutter und Dart mittlerweile eine solche Verbreitung erfahren haben.
In der Flutter-Community bildeten sich mit Microsofts Visual Studio Code und IntelliJ von JetBrains sowie mit dem darauf aufbauenden und von Google vertriebenen Android Studio Favoriten heraus. Weil IntelliJ und Android Studio sich sehr ähnlich sind, beschränke ich mich auf die Beschreibung von Android Studio.
Flutter ohne IDE
Im Grunde spricht nichts dagegen, Flutter in der Konsole zu schreiben. Ein Plugin wird etwa speziell für emacs angeboten (https://flutter.dev/docs/get-started/editor?tab=emacs).
Im Folgenden führe ich Sie durch die Installation von Flutter in Android Studio und Visual Studio Code sowie jeweils durch ein erstes Deployment, also durch die Installation einer App auf einem Gerät.
2.2.1 IntelliJ und Android Studio
Googles Android Studio basiert auf IntelliJ von JetBrains. Beide IDEs lassen sich gleichermaßen für die Flutter-Entwicklung verwenden und zeigen sich ähnlich in Verwendung und Funktionsumfang.
Android Studio bietet allerdings volle Unterstützung und alle Werkzeuge für die Android-Entwicklung. Sollte es einmal nötig sein, den nativen Unterbau der Flutter-App auf Android zu debuggen oder mit Performance-Tools zu prüfen, kommen Sie nicht um Android Studio herum.
Die folgenden Schritte zur ersten Flutter-App lassen sich mit beiden IDEs ausführen. Der Übersichtlichkeit halber spreche ich ab jetzt nur noch von »Android Studio«.
Gehen Sie zu https://developer.android.com/studio, um Android Studio zu installieren, oder zu https://www.jetbrains.com/idea, um IntelliJ zu installieren.
Abbildung 2.6 Der Begrüßungsbildschirm von Android Studio
Starten Sie die heruntergeladene und installierte Entwicklungsumgebung, um die Flutter-Plugins für Android Studio zu installieren. Im Willkommens-Bildschirm (siehe Abbildung 2.6) wählen Sie links Plugins.
Das Fenster aus Abbildung 2.7 erscheint. Es bietet den Überblick über auf dem Marketplace verfügbare sowie bereits installierte Plugins. Tippen Sie ins Suchfeld oben »Flutter« ein, wählen Sie den entsprechenden Eintrag, und installieren Sie ihn mit einem Klick auf Install. Wahrscheinlich werden Sie gefragt, ob Abhängigkeiten für Dart gleich mitinstalliert werden dürfen. Geben Sie dafür grünes Licht. Klicken Sie schließlich auf Restart IDE, um das Flutter-Plugin endgültig zu aktivieren.
Nun wird Ihnen wieder das Willkommensfenster angezeigt. Dieses wurde allerdings um die neue Schaltfläche New Flutter Project bereichert. Klicken Sie darauf. Jetzt öffnet sich ein Projekt-Wizard, der Sie durch die Einrichtung führt. Zunächst müssen Sie den Pfad des zuvor installierten Flutter-SDK einmalig einstellen. Der folgende Schritt fragt Sie nach dem Projektnamen, dem Projektordner und einer Beschreibung (siehe Abbildung 2.8). Beachten Sie, dass der Projektname keine Leerzeichen oder Großbuchstaben enthalten darf. Bei Bedarf verwenden Sie den Unterstrich zur Worttrennung.
Abbildung 2.7 Die Suche nach dem Flutter-Plugin ergibt zahlreiche Treffer. Der richtige ist der mit den über 20 Millionen Downloads.
Abbildung 2.8 Bei der Konfiguration des neuen Flutter-Projekts können Sie bis auf den Namen und die »Organization«-Angabe alles so lassen, wie es ist.
Jetzt ist der Computer dran und erstellt das Projekt. Auf der linken Seite sehen Sie danach die Projektübersicht. Außerdem wurde wahrscheinlich die Datei main.dart sowie eine README.md mit einigen Informationen geöffnet. Ignorieren Sie zunächst die Details, und wenden Sie sich stattdessen dem Kopfbereich des Fensters zu, in dem Sie die vom Flutter-Plugin zur Verfügung gestellten Informationen und Schaltflächen finden (siehe Abbildung 2.9). Wenn Sie kein geeignetes Smartphone mit dem Computer verbunden haben, wählen Sie im ersten Dropdown-Menü einfach Chrome (web).
Abbildung 2.9 Die Informationen über Geräte von Flutter
Klicken Sie auf das grüne Startsymbol, um die App zu starten. Abermals ist der Computer am Zuge und übersetzt den Code. Nach einem kurzen Moment wird ein Browserfenster die Flutter-App anzeigen. Statt auf »Herzlichen Glückwunsch zum Deployment!« klicken Sie auf das rote Stop-Icon in Android Studio, um die Anwendung zu beenden.
2.2.2 Visual Studio Code
Die aktuellste Version von Visual Studio Code (VS Code) können Sie unter https://code.visualstudio.com herunterladen. VS Code wird für macOS, Windows und Linux angeboten.
Installieren Sie VS Code auf Ihrem Computer, und starten Sie es. Ihr nächster Schritt besteht darin, die Unterstützung für Flutter in Form der Flutter-Erweiterung zu installieren. Gehen Sie hierzu im geöffneten Fenster zu den Erweiterungen (Extensions). Auf der linken Seite finden Sie die vertikale Navigation, in der Sie das zugehörige Symbol auswählen (siehe Abbildung 2.10).
Abbildung 2.10 Das »Extensions«-Symbol in Visual Studio Code
Nun klappt der Seitenbereich auf und zeigt gegebenenfalls Informationen über empfohlene Erweiterungen und solche, die Sie bereits installiert haben. Falls Sie Flutter schon zuvor installiert haben, sollten Sie das Paket hier finden. Falls nicht, suchen Sie mit dem Eingabefeld nach »Flutter« und wählen den entsprechenden Eintrag aus. Rechts öffnet sich ein Bereich mit Informationen über das Flutter-Plugin. Betätigen Sie die Schaltfläche Installation (install).
Legen Sie nun ein neues Flutter-Projekt an. Öffnen Sie dazu die sogenannte Command Palette (Befehlspalette) in VS Code unter View/Anzeigen, und tippen Sie »flutter« ein (siehe Abbildung 2.11).
Abbildung 2.11 Die Command Palette mit dem Suchbegriff »flutter«
Unter den Einträgen, die dann erscheinen, sollte sich Flutter: New Project befinden. Wählen Sie diesen Eintrag aus. Jetzt fordert die Eingabe Sie auf, einen Anwendungstyp auszuwählen. Sie können der Einfachheit halber Empty Application wählen. Anschließend wählen Sie einen neuen Ordner, in dem das Projekt erzeugt werden soll. Verwenden Sie keinen zu tief verschachtelten Pfad, da die Windows-Buildtools nicht mit Pfaden klarkommen, die länger als 266 Zeichen sind. Im letzten Schritt müssen Sie einen Namen für die Anwendung eingeben – wie üblich bitte ohne Leerzeichen oder Großbuchstaben.
Fast geschafft! Den Rest der Arbeit darf der Computer erledigen. Schließlich öffnen sich die Projektansicht und die Datei main.dart. Achten Sie zu diesem Zeitpunkt nicht auf die Einzelheiten des Projekts, sondern lassen Sie den Blick nach unten rechts im Fenster wandern: Das installierte Flutter-Plugin hat einige Anzeigen in die Statusleiste eingefügt (siehe Abbildung 2.12).
Abbildung 2.12 Die Flutter-Informationsleiste in Visual Studio Code
Ganz ähnlich wie in Android Studio können Sie hier zwischen Chrome (web-javascript) oder einer Desktop-Variante wählen. Klicken Sie oben auf den Startpfeil oder drücken Sie F5, um die Anwendung zu starten (siehe...
