App-Entwicklung mit Flutter für Dummies E-Book

Mira Jago

• Herausgeber: Wiley-VCH GmbH
• Kategorie: Wissenschaft und neue Technologien
• Serie: ...für Dummies
• Sprache: Deutsch

Seitenzahl: 450

Veröffentlichungsjahr: 2023

Beschreibung

Wie Sie mit dem Flutter-Framework Android- und iOS-Apps mit nur einer Code Base und ohne Qualitätsverlust entwickeln, das erfahren Sie hier! Nach einer Einführung in die Programmiersprache Dart lernen Sie das User Interface Design, die Anbindung an Schnittstellen oder Datenbanken, State-Management und Routing in der App kennen, bevor Sie die App auf Fehler testen und in den Stores von Google und Apple veröffentlichen. Alle Schritte vollziehen Sie im Buch an einer durchgängigen Beispiel-App nach. Cross-Plattform-App-Entwicklung? Mit diesem Buch echt einfach!

Leseprobe

App-Entwicklung mit Flutter für Dummies

Bibliografische Information der Deutschen Nationalbibliothek

Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.

1. Auflage 2023

© 2023 Wiley-VCH GmbH, Boschstraße 12, 69469 Weinheim, Germany

Wiley, the Wiley logo, Für Dummies, the Dummies Man logo, and related trademarks and trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries. Used by permission.

Wiley, die Bezeichnung »Für Dummies«, das Dummies-Mann-Logo und darauf bezogene Gestaltungen sind Marken oder eingetragene Marken von John Wiley & Sons, Inc., USA, Deutschland und in anderen Ländern.

Das vorliegende Werk wurde sorgfältig erarbeitet. Dennoch übernehmen Autoren und Verlag für die Richtigkeit von Angaben, Hinweisen und Ratschlägen sowie eventuelle Druckfehler keine Haftung.

Coverfoto: elenabsl – stock.adobe.comKorrektur: Isolde Kommer

Print ISBN: 978-3-527-72029-3ePub ISBN: 978-3-527-84060-1

Über die Autorinnen

Die Autorin Mira Jago

Mira Jago ist Quereinsteigerin in die Programmierung, Tech-Mentorin für Startups und Unternehmerin mit eigener Flutter-Agentur in Hannover. Außerdem gibt sie Kurse zu Flutter. Die Nachfrage ist so hoch, dass sie sich am liebsten klonen würde.

Die Autorin Verena Zaiser

Verena Zaiser baute mit elf Jahren ihre erste eigene Website. Schon in der Schulzeit programmierte sie für Kunden. Sie studierte Informatik und ist heute freiberufliche Mobile-App-Entwicklerin in Stuttgart – natürlich immer mit Flutter.

Danksagung

Mira möchte sich vor allem bei ihrer Tochter Ada Lou bedanken, dass sie so ein cooles Baby ist und ihrer Mutter Zeit zum Schreiben lässt. Und bei ihrem Ehemann Birger, der sich seit der Geburt zwei Jahre Elternzeit nimmt – er flucht zwar immer, wann dieses Buch endlich fertig ist, aber ohne ihn würde gar nichts gehen und wenig wäre schön.

Eine dicke Umarmung an Verena – fürs Einspringen, wann immer die neue Mutterrolle zu viel abverlangt hat und für die superproduktive, spannende und spaßige Zusammenarbeit an diesem Buch.

Und ein großes Dankeschön an Ansgar Oberholz – die absurde Idee, dass man parallel ein Kind kriegen, ein Unternehmen leiten, auf Bühnen sprechen und ein Buch schreiben könnte, nahm hier ihren Ursprung.

Verena möchte sich in erster Linie bei ihrem Freund Matthias bedanken, der ihr mit seelischer und motivierender Unterstützung beistand und ihr half sich auf das Endergebnis zu konzentrieren.

Ein großes Dankeschön auch an Mira, für die Möglichkeit gemeinsam ein Buch über Verenas Lieblingsthema Flutter zu schreiben. Mira war stets die Ruhe selbst, egal wie stressig es wurde mit Baby, Buch, Firma, Reisen und Verenas Perfektionismus.

Ein weiteres großes Dankeschön geht an Christopher Marx, der spontan für die Fachkorrektur eingesprungen ist und die gesamte Flutter-Community, die immer hilfsbereit ist und einen riesigen Beitrag dazu leistet, dass Flutter so viel Spaß macht und so erfolgreich ist.

Inhaltsverzeichnis

Cover

Titelblatt

Impressum

Über die Autorinnen

Danksagung

Einleitung

Über dieses Buch

Konventionen in diesem Buch

Wie dieses Buch aufgebaut ist

Symbole, die in diesem Buch verwendet werden

Wie es weitergeht

Teil I: Einführung in Flutter

Kapitel 1: Flutter und das große Feld der App-Entwicklung

Flutter in a Nutshell

Alternativen zur App-Entwicklung mit Flutter

Vorteile von Flutter

Wie funktionieren Flutter und Dart?

Kapitel 2: Startklar machen und rein ins Vergnügen

Flutter installieren

Entwicklungsumgebung einrichten

Kapitel 3: Ihre allererste App

Eine neue Flutter-App

Pummel The Fish

Recap: Einführung in Flutter

Teil II: Programmieren mit Dart

Kapitel 4: Pfeilschnell programmieren mit Dart

Die erste Klasse

Das ist Typsache

Objekte bauen mit var, final, late oder const

Wie Funktionen funktionieren

Parameter für jede Lebenslage

Kapitel 5: Bedingte Anweisungen und Schleifen im Griff

Wenn A, dann B – bedingte Anweisungen in Dart

Round and round it goes … Schleifen in Dart

Kapitel 6: Sammeln und Sortieren – Collections in Dart

Drei Arten von Collections

Methoden für Iterables

Kapitel 7: Asynchrone Programmierung – wenn es mal wieder länger dauert

Futures, async und await

Ein Datenfluss – auch Stream genannt

Kapitel 8: Vererbung und weitere praktische Dart-Features

Vererbung in Dart

Interfaces

Mixins

Kapitel 9: Debugging in Dart – Probleme finden und lösen

De-BUG-ging – die Jagd auf die Bugs

Die DevTools von Flutter

Recap: Programmieren mit Dart

Teil III: Wir bauen eine App

Kapitel 10: Alles ist ein Widget

Hier fängt alles an: die main.dart-Datei

Widgets, Widgets überall …

StatefulWidget und StatelessWidget

Es wächst ein Widget-Baum

Exkurs: Das Flutter-Framework – vor lauter Bäumen die App nicht mehr sehen

Kapitel 11: Widgets über Widgets – wie werden daraus tolle App-Screens?

Screens anlegen

Pummel The Fish – der SplashScreen

Pummel The Fish – der HomeScreen

Pummel The Fish – der DetailPetScreen

Pummel The Fish – der CreatePetScreen

Kapitel 12: Ein bisschen DIY zwischendurch – Custom Widgets

Custom Widget – ja, nein, vielleicht?

_CustomWidget – das sollte lieber privat bleiben

Ein Custom Widget für alle und überall!

Kapitel 13: Wenn das, dann das – oder das?

Wenn die Daten die UI bedingen sollen

Natives Design

Responsiveness umsetzen

Kapitel 14: Wo gehts hier lang? Routing in Flutter-Apps

Wie gehts zum nächsten Screen?

Named Routing – beim Navigieren den Überblick behalten

Ich verfolge Sie auf Schritt und Klick – der Backstack

Routing im Web und für Fortgeschrittene

Kapitel 15: Mach alles blau – Theming für Ihre App

Wo das Theming in Ihrer App haust

Farbe bekennen!

Fun mit Fonts

Recap: Wir bauen eine App

Teil IV: REST und Firebase – externe Daten beziehen und managen

Kapitel 16: Schnittstellen anbinden

Wer oder was ist eigentlich dieser REST? Und was hat er mit API vor?

Alternativen zu REST

REST-Requests

REST-Response

Los gehts – Daten per REST abrufen

Asynchrone REST-API-Daten im Flutter-UI anzeigen

Daten vom Backend holen – aber wann und wo?

Daten aus dem Flutter-UI sammeln und an die REST-API senden

Kapitel 17: Firebase und der Cloud Firestore

Die eierlegende Wollmilchsau

Firebase-Installation und Einrichtung

Cloud-Firestore-Anbindung

Cloud-Firestore-Alternativen – ja, aber wann und warum?

Recap: REST und Firebase – externe Daten beziehen und managen

Teil V: State-Management

Kapitel 18: Stein auf Stein – App-Architektur in Flutter

Was ist eine Architektur überhaupt?

Das Chaos im Griff mit Ordnerstrukturen

Pragmatisch, praktisch, gut – unser Architektur-Vorschlag

Kapitel 19: State-Management

Was ist State-Management? Wozu braucht man das?

Kurzer Exkurs – das InheritedWidget

Kapitel 20: State-Management mit Bloc und Cubit

Meine Straße, mein Zuhause, mein Bloc?

Ihren ersten Cubit anlegen

Kommunikation zwischen UI und Cubit

Repositories zentral zur Verfügung stellen mit RepositoryProvider

Cubits weiter vereinfachen – mit einem Enum-State ans Ziel

Bloc und Cubit – so unterschiedlich und doch so gleich

Good to Know und weiterführendes Wissen

Recap: State-Management

Teil VI: Testen, builden und veröffentlichen

Kapitel 21: Testing – wer, wie, was und wieso, weshalb, warum?

Warum testen?

Manuell oder automatisiert?

Logik testen

User Interface testen

Einen Flow mithilfe von Integration-Tests testen

Messbarkeit von Tests: die Test-Coverage

Kapitel 22: Der Android-Build

Vorbereitung eines Builds (Android und iOS)

Apps an Testpersonen verteilen

Eine .apk- oder lieber eine .aab-Datei?

Verteilung über den Google Play Store

Kapitel 23: Der iOS-Build

Voraussetzungen

Vorbereitung eines iOS-Builds

Registrieren Sie Ihre App

Erstellen Sie einen Build mit Xcode

Apps an Testpersonen verteilen

Fertig! Release Build erstellen und veröffentlichen

Recap: Testen, builden und veröffentlichen

Bye bye

Teil VII: Top-Ten-Teil

Kapitel 24: Unsere 10 Lieblings-Widgets

Widget 1: Chip

Widget 2: Wrap

Widget 3: CupertinoDatePicker und showDatePicker

Widget 4: PageView

Widget 5: Table

Widget 6: Hero

Widget 7: AnimatedContainer

Widget 8: Semantics

Widget 9: SliverAppBar

Widget 10: CustomPaint

Kapitel 25: Unsere 10 Flutter-Tipps und -Tricks

Tipp 1: Wenn Sie einen komischen Fehler haben, den Sie nicht lösen können

Tipp 2: Wenn ein iOS-Build nicht hinhaut

Tipp 3: Konsistente Benennung von Dateien und Klassen

Tipp 4: Arbeiten Sie mit einem Linter

Tipp 5: Formatieren Sie Ihren Code mit einem Formatter

Tipp 6: Verwenden Sie den automatischen Fix-Command von Dart

Tipp 7: Updaten Sie Flutter und Ihre Dependencies regelmäßig

Tipp 8: Wann für oder gegen ein Package oder Plug-in entscheiden

Tipp 9: Separieren Sie einzelne Widgets in eigene Klassen und separate Dateien

Tipp 10: Schauen Sie bei einem Flutter-Meetup vorbei

Abbildungsverzeichnis

Stichwortverzeichnis

End User License Agreement

Illustrationsverzeichnis

Kapitel 3

Abbildung 3.1: Das frisch generierte Flutter-Projekt

Abbildung 3.2: Geräteauswahl

Abbildung 3.3: Die App beim ersten Starten

Abbildung 3.4: Pummel The Fish

Abbildung 3.5: SplashScreen

Abbildung 3.6: HomeScreen

Abbildung 3.7: DetailPetScreen

Abbildung 3.8: CreatePetScreen

Kapitel 4

Abbildung 4.1: Null Safety hilft bei der Fehlererkennung.

Kapitel 9

Abbildung 9.1: Run and Debug

Abbildung 9.2: Die App im Debug-Modus

Abbildung 9.3: Breakpoints

Abbildung 9.4: Die Debug-Leiste

Abbildung 9.5: Objekte inspizieren

Abbildung 9.6: Variablenwerte beobachten

Abbildung 9.7: Den Widget Inspector öffnen

Abbildung 9.8: Der Widget Inspector

Abbildung 9.9: Element auswählen im Widget Inspector

Kapitel 10

Abbildung 10.1: Die Flutter-Beispiel-App

Abbildung 10.2: Das Padding-Widget ausprobieren

Abbildung 10.3: Ein Widget-Baum

Abbildung 10.4: Die Ebenen des Flutter-Frameworks

Abbildung 10.5: Flutters drei Bäume

Abbildung 10.6: Die Element-Klasse im Flutter-Framework

Kapitel 11

Abbildung 11.1: Rename Symbol

Abbildung 11.2: Quick-Fix-Import

Abbildung 11.3: Der noch leere SplashScreen

Abbildung 11.4: So soll der SplashScreen aussehen.

Abbildung 11.5: Bildschirmaussparung

Abbildung 11.6: Ein roter Container

Abbildung 11.7: Der rote Container nimmt die Größe seines child-Widgets an.

Abbildung 11.8: Der rote Container mit Text zentriert

Abbildung 11.9: Pummel im Container

Abbildung 11.10: Pummel im Container mit fit-Parameter

Abbildung 11.11: Ordnerstruktur mit Logo im images-Ordner

Abbildung 11.12: Der SplashScreen

Abbildung 11.13: Der SplashScreen mit Padding

Abbildung 11.14: Das Column-Widget

Abbildung 11.15: Das Row-Widget

Abbildung 11.16: Das Stack-Widget

Abbildung 11.17: Der HomeScreen mit ListView

Abbildung 11.18: HomeScreen mit Column und Rows

Abbildung 11.19: HomeScreen mit FloatingActionButton

Abbildung 11.20: Der HomeScreen mit ListView und ListTiles

Abbildung 11.21: Der DetailPetScreen

Abbildung 11.22: Der DetailPetScreen ist halb fertig.

Abbildung 11.23: Der DetailPetScreen ist fast fertig.

Abbildung 11.24: Der CreatePetScreen

Abbildung 11.25: CreatePetScreen mit TextFormFields

Abbildung 11.26: CreatePetScreen mit Dropdown

Abbildung 11.27: CreatePetScreen mit CheckboxListTile

Abbildung 11.28: CreatePetScreen mit »Speichern«-Button

Abbildung 11.29: Validierung der Eingabe beim Speichern

Kapitel 12

Abbildung 12.1: Ein Widget extrahieren

Abbildung 12.2: Der CustomButton im CreatePetScreen

Kapitel 13

Abbildung 13.1: Der neue DetailPetScreen

Abbildung 13.2: Der CreatePetScreen auf dem Android-Emulator

Abbildung 13.3: Der CreatePetScreen auf einem iOS-Simulator

Abbildung 13.4: Der Speichern-Button auf dem Smartphone

Abbildung 13.5: Der Speichern-Button auf der Desktop-App

Abbildung 13.6: Der CreatePetScreen mit Padding-Anpassung

Kapitel 14

Abbildung 14.1: Der Weg einer Nutzerin

Abbildung 14.2: Der Rückweg der Nutzerin

Abbildung 14.3: Der Rückweg der Nutzerin ohne SplashScreen

Abbildung 14.4: Der Rückweg der Nutzerin wie im Web üblich

Kapitel 15

Abbildung 15.1: Widget-Baum mit ThemeData-Widget

Abbildung 15.2: ColorScheme mit einzeln definierten Farben

Abbildung 15.3: Die App mit Custom-Farben – aber die Schrift hat sich versteckt!

Abbildung 15.4: Die Parameter des TextTheme-Widgets

Abbildung 15.5: Default TextTheme aus der offiziellen Flutter Dokumentation:

http

...

Abbildung 15.6: ColorScheme mit einzeln definierten Farben

Kapitel 16

Abbildung 16.1: Automatisch Overrides erstellen

Abbildung 16.2: await ist rot unterkringelt

Abbildung 16.3: Exception, weil ein Future zurückgegeben wird

Abbildung 16.4: Einen Code-Abschnitt in eine separate Methode extrahieren

Abbildung 16.5: Dokumentation von pushNamed anzeigen

Kapitel 17

Abbildung 17.1: Eine relationale Datenbank

Abbildung 17.2: Eine nicht relationale Datenbank

Abbildung 17.3: Cloud Firestore im Testmodus

Abbildung 17.4: Die Cloud Firestore Console mit der pets-Collection und dem erste...

Kapitel 18

Abbildung 18.1: Der Datenfluss in einer App

Abbildung 18.2: Die Ordnerstruktur der »Pummel The Fish«-App

Abbildung 18.3: Der Screen-orientierte Ansatz

Abbildung 18.4: Der Layer-First-Ansatz

Abbildung 18.5: Der Feature-First-Ansatz

Kapitel 19

Abbildung 19.1: Die AppBar im HomeScreen mit AdoptionBag-Widget

Kapitel 20

Abbildung 20.1: Blocs erhalten Events und geben States zurück.

Abbildung 20.2: Cubits empfangen Funktionen und geben States zurück.

Abbildung 20.3: Einen neuen Cubit erstellen

Abbildung 20.4: Context-Menü für praktische Bloc-Shortcuts

Abbildung 20.5: Snackbar im BlocBuilder? Das funktioniert nicht.

Abbildung 20.6: Cases automatisch auflisten

Kapitel 21

Abbildung 21.1: Neue Testdatei automatisch generieren lassen

Abbildung 21.2: Methoden gruppieren

Abbildung 21.3: Null is not a subtype of type Future<Response>

Abbildung 21.4: Expected und Actual unterscheiden sich – aber warum?

Abbildung 21.5: blocTest-Testfälle erstellen

Abbildung 21.6: Der generierte Golden-Test-Screenshot

Abbildung 21.7: Die Test-Coverage in der ManagePetsCubit-Klasse

Abbildung 21.8: Die Flutter-Coverage aufgeschlüsselt

Kapitel 22

Abbildung 22.1: Crashlytics aktivieren

Abbildung 22.2: Analytics aktivieren

Abbildung 22.3: Das Analytics-Dashboard

Abbildung 22.4: App Distribution aktivieren

Abbildung 22.5: .apk-Datei hochladen

Abbildung 22.6: .aab- und .apk-Dateien

Abbildung 22.7: Die Google Play Console

Abbildung 22.8: Eine neue App in der Google Play Console

Abbildung 22.9: Einen internen Test-Release erstellen

Abbildung 22.10: Testversion zur Production-Version hochstufen

Kapitel 23

Abbildung 23.1: Der Apple-Developer-Account in der Übersicht

Abbildung 23.2: Xcode-Einstellungen

Abbildung 23.3: Xcode Build

Abbildung 23.4: Xcode Build

Abbildung 23.5: Testflight-Upload

Abbildung 23.6: App-Store-Veröffentlichung

Orientierungspunkte

Cover

Titelblatt

Impressum

Über die Autorinnen

Inhaltsverzeichnis

Einleitung

Fangen Sie an zu lesen

Abbildungsverzeichnis

Stichwortverzeichnis

End User License Agreement

Seitenliste

1

2

3

7

8

9

10

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

83

84

85

86

87

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

105

106

107

108

109

110

111

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

393

394

395

396

397

398

399

400

401

402

403

404

405

407

408

409

410

411

412

413

417

418

419

420

Einleitung

Über dieses Buch

Seit Ende 2018 ist die Welt der App-Entwicklung in Bewegung. Mit der Veröffentlichung von Flutter durch Google kam eine Technologie auf den Markt, die das Potenzial hat, die Apple- und Android-Welt zu einen und eine echte Alternative zur nativen Entwicklung zu bieten.

Sowohl Auftraggebende als auch Entwickelnde waren schnell begeistert – Erstere, weil sie ihre Entwicklungskosten bei gleichbleibender Qualität halbieren können, und Letztere, weil Flutter sehr viel Wert auf Developer Experience legt.

Seit 2021 ist Flutter Web in der Stable Version und seit 2022 kann man auch Desktop-Apps für Mac, Linux und Windows mit Flutter entwickeln. One ring to rule them all …

Auch uns hat Flutter in seinen Bann gezogen, weswegen wir schon 2019 aus der Android-Welt in die Flutter-Welt aufgebrochen sind und es bis heute nicht bereut haben. Mit diesem Buch wollen wir Sie dabei unterstützen, denselben Weg zu gehen.

Wir beginnen mit den Grundlagen von Dart und Flutter und leiten Sie dann durch die komplexeren Themen des State-Managements und der Backend-Anbindung bis hin zum Testen, Builden und Veröffentlichen Ihrer App. Bei der Backend-Anbindung gehen wir im Detail auf Firebase ein, da dieses Backend-as-a-Service von Flutter-Entwickelnden gern genutzt wird.

Wir wünschen Ihnen viel Erfolg und eine gesunde Frustrationstoleranz!

Konventionen in diesem Buch

In diesem Buch werden Sie eine Flutter-App mit uns entwickeln. Den Code dazu finden Sie im Web unter https://losfluttern.de/pummelthefish oder alternativ auf der Verlags-Website unter https://wiley-vch.de/ISBN9783527720293.

GitHub-Repository

Wir haben hier ein GitHub-Repository verlinkt. Wir empfehlen Ihnen, den Code mithilfe des Buches mitzuschreiben und auch anzupassen und für ein optimales Lernergebnis auch selbst damit herumzuspielen. Unsere zur Verfügung gestellte Code-Base sollte nur dazu da sein, Ihnen weiterzuhelfen, falls Sie den Code nicht selbst zum Laufen bekommen.

Wenn Sie ein neues Kapitel beginnen und Ihr Code aus den vorherigen Kapiteln nicht funktioniert, empfehlen wir Ihnen, den entsprechenden Git-Branch zu dem Kapitel in unserem Repository zu suchen und ihn herunterzuladen. Von dort aus können Sie dann entsprechend weiterarbeiten.

Flutter-Version

Bitte beachten Sie, dass sich das Flutter-Framework in den letzten Jahren schnell entwickelt hat und das auch nach Veröffentlichung dieses Buches noch weiter tun wird. Es kann also sein, dass Sie den Code aus diesem Buch leicht anpassen müssen. Ihre Entwicklungsumgebung wird Sie darauf hinweisen.

Sie können sich entscheiden: Entweder Sie arbeiten mit der neuesten Flutter-Version oder Sie arbeiten mit derselben Flutter-Version, mit der wir für dieses Buch gearbeitet haben. Je nachdem müssen die Packages in der pubspec.yaml-Datei entsprechend angepasst werden.

Mit folgendem Befehl können Sie die Flutter-Version in der Konsole anpassen.

>> flutter downgrade <version>

Beispiel:

>> flutter downgrade v3.3.0

Wir arbeiten mit dem stable-Channel von Flutter. Es gibt neben dem stable-Channel noch den beta- und den master-Channel. Falls Sie sich aus Versehen auf einem der beiden anderen wiederfinden, können Sie so zu dem stable-Channel wechseln:

>> flutter channel stable

Jedes Kapitel allein gegen die Welt

Vielleicht wollen Sie dieses Buch auch lieber am Strand lesen, ganz ohne Computer – oder parallel an einem eigenen Projekt arbeiten statt an unserer Beispiel-App. Gar kein Problem.

Vielleicht haben Sie auch schon etwas Vorerfahrung mit Flutter und sind nicht an den Basics interessiert. Jedes Kapitel dieses Buches steht für sich, fühlen Sie sich frei, kreuz und quer zu lesen, wie Sie lustig sind!

Gender-Love

Zum Glück ändert sich das langsam: Bisher sind wir es allerdings als Fachbücher-lesende Frauen nur allzu gut gewohnt, mit einem entschuldigendem Satz in der Einleitung darauf hingewiesen zu werden, dass wir zwar nie angesprochen werden, bei der männlichen Form aber immer mitgemeint sind. Wir wollten unseren männlichen Lesern nicht dasselbe antun, aber die Sternchen-Schreibweise das ganze Buch durchzuziehen, ist uns auch etwas umständlich. (Die vielen Anglizismen machen manche Sätze in diesem Buch eh schon etwas schwer verdaulich.)

Also versuchen wir neutral zu schreiben, oder wir wechseln zwischen der männlichen und der weiblichen Form. Es mag sich am Anfang etwas gewöhnungsbedürftig für Sie anfühlen – aber es ist uns halt wichtig, dass sich alle Lesenden von unserem Buch abgeholt fühlen. Und wenn es sich für Sie komisch anfühlt, dann verstehen Sie vielleicht auch besser, warum sich der bisherige Standard für uns komisch anfühlt und wir da nicht mitmachen möchten.

Törichte Annahmen über unsere Leserschaft

Wir gehen davon aus, dass unsere Lesenden einen Computer bedienen können und schon einmal ein paar Zeilen programmiert haben – egal in welcher Sprache, aber am besten objektorientiert. Wir fangen ganz vorne an mit Flutter, Dart und App-Entwicklung, aber es würde den Rahmen sprengen, die Grundbausteine der Programmierung tiefergehend zu erklären.

Erste Gehversuche mit der Versionskontrolle Git werden Ihnen auch als Vorkenntnis nützlich sein.

Trotzdem – auch wenn Sie ganz neu in der Programmierung sind, möchten wir Sie ermutigen, es mit Flutter und mit diesem Buch zu versuchen. Sie werden vielleicht ein paar Dinge recherchieren müssen und das eine oder andere Kapitel zweimal lesen, aber wir haben immer versucht, alles so verständlich wie möglich zu erklären. Wenn Sie mal den Faden verlieren, finden Sie ihn bestimmt im nächsten Kapitel wieder.

Bitte nehmen Sie zur Kenntnis, dass iOS- und macOS-Desktop-Apps nur mit einem Mac entwickelt werden können und Sie mit Windows daher nur Android-, Windows-Desktop- und Web-Apps entwickeln können.

Wie dieses Buch aufgebaut ist

Dieses Buch teilt sich in sieben Teile, die wiederum in Kapitel und Unterkapitel aufgeteilt sind.

Teil I: Einführung in Flutter

In der Einführung wird das Flutter-Framework in seinen Kontext gesetzt – was ist neu daran? Was unterscheidet es von anderen App-Entwicklungstechnologien? Dieser Teil begleitet Sie bei der Flutter-Installation und der Installation der Entwicklungsumgebung.

Teil II: Programmieren mit Dart

Die Programmiersprache Dart, auf der das Flutter-Framework basiert, war vor Flutter nicht weit verbreitet. Die Sprache ist sehr elegant, simpel und schnell zu lernen. Falls Sie schon mit Dart gearbeitet haben, können Sie dieses Kapitel selbstverständlich überspringen. Aber beachten Sie, dass hier schon einige Vorarbeiten an der Beispiel-App vorgenommen werden, die Sie in diesem Buch programmieren. Wenn Sie das Kapitel überspringen, laden Sie am besten anschließenden den entsprechenden Code herunter.

Teil III: Wir bauen eine App

In diesem Teil lernen Sie, wie man das App-User-Interface mit Flutter gestaltet. Sie lernen, wie Theming und Routing funktionieren, wie ein Screen aufgebaut ist, wie Sie Custom Widgets anlegen und If-else-Verzweigungen im UI anbinden.

Teil IV: REST und Firebase – externe Daten beziehen und managen

Eine App soll in der Regel Daten anzeigen und den Nutzenden die Möglichkeit bieten, Daten anzupassen oder einzupflegen. Diese liegen oft in einer externen Datenbank. In diesem Teil lernen Sie, Daten von einer REST-Schnittstelle zu managen. Weil die meisten Flutter-Entwickelnden Firebase als Backend-as-a-Service nutzen, zeigen wir Ihnen außerdem, wie Sie das Firebase-SDK einbinden können.

Teil V: State-Management

Wie kommen die Daten von der Schnittstelle in die einzelnen Screens der App und wie wird sichergestellt, dass der State der App stimmt und überall zugänglich ist? Dafür ist das State-Management zuständig. Es gibt verschiedene Philosophien und Packages, um das State-Management zu bewerkstelligen. Wir bringen Ihnen ein von Google empfohlenes State-Management namens »bloc« bei.

Teil VI: Testing, builden und veröffentlichen

Weil es von Entwickelnden so gern vernachlässigt wird und doch so wichtig ist, bekommt es bei uns viel Aufmerksamkeit: das Testen. Sie lernen nicht nur, Logik mit Unit-Tests zu überprüfen, sondern auch, die richtige Darstellung Ihrer Widgets durch Widget-Tests und Golden Tests zu sichern. Zum Schluss erhalten Sie noch eine kleine Einführung in Integration-Tests, um ganze User Flows mit Tests abdecken zu können. Danach wird es Zeit, über das Ausrollen der App an Beta-Testende zu sprechen, und welche Vorbereitungen Sie anschließend für die Veröffentlichung in Google Play und Apple App Store treffen sollten.

Teil VII: Top-Ten-Teil

Im Top-Ten-Teil erfahren Sie hilfreiche Flutter-Tipps und -Tricks und lernen unsere Lieblingswidgets kennen.

Symbole, die in diesem Buch verwendet werden

Diese Symbole verwenden wir im Buch:

Ein Tipp gibt Ihnen Zusatzinformationen zu dem diskutierten Thema.

Eine Warnung warnt Sie vor häufigen Fehlern oder möglichen Problemen.

Dieses Symbol zeigt an, dass der dazugehörige Kasten Nerd-Infos enthält, die Sie auch gern geflissentlich ignorieren können.

Dieses Symbol stellt Ihnen eine konkrete Definition zur Verfügung.

Hier können Sie selbst tätig werden und das Gelernte in die Praxis umsetzen.

Wie es weitergeht

Flutter ist sehr einfach zu erlernen, aber andererseits auch sehr umfangreich. Es versucht, mehrere komplizierte Welten einfacher zu machen. Wenn Sie aus der iOS-Welt kommen, bringen Sie Problemlösungs-Skills aus dieser Welt mit, aber Ihnen fehlt Android-Erfahrung. Wenn Sie aus der Web-Welt kommen, werden Ihnen einige Gepflogenheiten aus der App-Welt merkwürdig vorkommen – und andersherum.

Generell, wenn Sie etwas Neues lernen – aber deshalb insbesondere bei Flutter – ist es sehr empfehlenswert, dies in einer Gruppe zu tun. Im besten Fall kennen Sie ein paar Flutter-Entwickelnde, die weiter sind als Sie und Ihnen helfen können, wenn Sie allein und mit Online-Foren nicht weiterkommen. Auch Flutter-Entwickelnde, die so weit sind wie Sie und mit denen Sie sich austauschen und anspornen können, bereichern Ihren Programmieralltag.

Wir empfehlen Ihnen darum, nach einer Meetup-Gruppe in Ihrer Nähe zu suchen. Wenn es in Ihrer Nähe keine gibt, suchen Sie sich eine Online-Gruppe. Es eignen sich vor allem die Google Developer Groups, die es in jeder größeren Stadt gibt, und die Flutter-Gruppen, die sich im Flutter-Meetup-Netzwerk befinden. Eine Übersicht finden Sie hier.

https://gdg.community.dev

https://www.meetup.com/pro/flutter

Manche Flutter-Gruppen sind städte- und länderübergreifend organisiert und daher im Flutter-Meetup-Netzwerk nicht gelistet. Es empfiehlt sich daher, auch einen Blick auf die offizielle Meetup-Seite zu werfen.

https://www.meetup.com

Verena organisiert seit 2022 die deutschsprachige Flutter-DACH-Gruppe, die in vielen verschiedenen Städten in Deutschland, Österreich und der Schweiz tätig ist, und Mira seit 2017 die Google-Developer-Gruppe und die Women Techmakers in Hannover. Schauen Sie gerne vorbei, wenn Sie mal in der Nähe sind!

Neben Stammtischgruppen sind natürlich Udemy-Kurse immer ein guter Weg, sich neue Skills anzueignen, insbesondere die von Maximilian Schwarzmüller können wir sehr empfehlen (gibt es auf Deutsch und auf Englisch).

Verena produziert außerdem mit zwei befreundeten Flutter-Entwicklern den deutschsprachigen Flutter-DACH-Podcast, den es auf allen gängigen Plattformen zu hören gibt:

https://anchor.fm/flutter-dach

Bei spezifischen Problemen mit Ihrem Code ist Stack Overflow immer für Sie da:

https://stackoverflow.com

Flutter bietet eine der umfangreichsten und verständlichsten Dokumentationen an, die wir je in der Tech-Welt gesehen haben. Ein Blick lohnt sich immer:

https://docs.flutter.dev

Analog zur Flutter-Dokumentation darf die Dart-Dokumentation natürlich nicht fehlen:

https://dart.dev/guides

Wir wünschen Ihnen viel Spaß und Erfolg mit diesem Buch und freuen uns riesig, Sie in der Flutter-Welt begrüßen zu dürfen!

Teil I

Einführung in Flutter

IN DIESEM TEIL …

Diskutieren wir, warum Flutter die Zukunft der App-Entwicklung istInstallieren Sie FlutterEntscheiden Sie: Entwicklungsumgebung einrichten – oder im Online-Editor arbeitenErstellen Sie eine erste App und lernen das buchbegleitende App-Projekt kennen

Sie wollen sich also in die Flutter-Welt wagen. Herzlich willkommen! In diesem ersten Teil unseres Buches wollen wir Ihnen Flutter vorstellen und mit alternativen Sprachen und Frameworks vergleichen. Wir begleiten Sie beim Installieren von Flutter und beim Einrichten Ihrer Entwicklungsumgebung. Außerdem stellen wir Ihnen das buchbegleitende App-Projekt vor, an dem wir Ihnen die einzelnen Themen rund um Flutter praxisbezogen nahebringen wollen.

Kapitel 1

Flutter und das große Feld der App-Entwicklung

IN DIESEM KAPITEL

Lernen Sie die Geschichte der App-Entwicklung kennenBekommen Sie einen Überblick über alternative Technologien zu FlutterLesen Sie ein paar objektive und ein paar subjektive Gründe, warum und wann Flutter die beste Wahl istErhalten Sie einen kurzen Einblick, wie Flutter funktioniert und was es mit Dart auf sich hat

Willkommen im allerersten Kapitel Ihrer Reise in die Flutter-Welt! Wir starten mit einem kleinen Warm-up, indem wir Sie zunächst auf einen kleinen Exkurs entführen und Ihnen ein bisschen Grundwissen zu Flutter, seinen Vorteilen und Grenzen an die Hand geben. Anhand von alternativen Formen der App-Entwicklung lässt sich das wunderbar darstellen. Am Ende dieses Kapitels wissen Sie auf jeden Fall, was uns an Flutter so begeistert und warum wir Sie möglicherweise auch bald im Kreise der Begeisterten begrüßen dürfen.

Flutter in a Nutshell

Flutter ist ein Cross-Platform-Framework von Google, das User-Interface-Elemente zur Entwicklung einer App zur Verfügung stellt. Seit 2021 ist es nicht einfach nur ein x-beliebiges, sondern das weltweit am meisten genutzte Cross-Platform-Framework auf dem Markt (https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/, Stand: 20.03.2023).

Flutter-Apps laufen sowohl auf Android- und iOS-Smartphones als auch im Web und auf Windows-, Linux- und macOS-Desktops. Programmiert wird mit der Sprache Dart. In diesem Buch wollen wir Ihnen vor allem die Entwicklung von mobilen Apps für Android und iOS mit Flutter vorstellen – das meiste Gelernte lässt sich aber auch auf die anderen Plattformen anwenden.

Ein Framework ist eine Ansammlung von fertigen Komponenten und Tools, die Entwickelnde benutzen und anpassen können, mit dem Ziel, die Entwicklung zu beschleunigen. Sie können sich damit auf wichtige Aufgaben konzentrieren, anstatt mühselig jedes Mal von Neuem die Basisfunktionalitäten und -komponenten zu programmieren.

Seit Flutter 2017 veröffentlicht wurde, wird es unter Entwickelnden lebhaft diskutiert. Es ist eine neue Herangehensweise an die App-Entwicklung. Von manchen wird es als kurzlebiger Trend eingestuft, andere denken, dass Flutter die anderen Programmiersprachen und Frameworks, die sich zur App-Entwicklung eignen, in Zukunft in den Schatten stellen wird.

Anfänge der App-Entwicklung

App-Entwicklung war nicht immer ein eigenes Feld in der Software-Entwicklung – und es war auch nicht immer so prominent gespalten in Android- und iOS-Entwicklung, wie es das heute ist.

1994 kommt das erste Smartphone auf den Markt, aber es soll noch ein paar Jahre dauern, bis das Gerät massentauglich wird. Apps werden noch aus dem Internet heruntergeladen und wie Webseiten programmiert. Es entsteht eine kleine Hobby-Programmierszene für App-Entwicklung.

2007 kommt das erste iPhone auf den Markt und ein Jahr später öffnet der Apple App Store mit 500 Apps im Angebot seine virtuellen Pforten. Diese Apps laufen nur auf Apple-Geräten und können nicht aus dem Internet heruntergeladen, sondern nur über den Apple Store bezogen werden. Das ist bis heute so. Diese iPhone-Apps werden nicht mehr mit Web-Programmiersprachen geschrieben, sondern mit Objective-C, das schließlich 2014 von Swift abgelöst wird.

2008, ein Jahr nach dem iPhone, kommt das erste Android-Smartphone auf den Markt und der Google Play Store liefert die passenden Apps dazu. Diese Apps können auf allen Geräten mit Android-Betriebssystem laufen. Das Konzept ist etwas freier als in der Apple-Welt: Apps müssen nicht über den Google Play Store installiert werden, sie können auch aus dem Internet heruntergeladen und installiert oder per E-Mail verschickt werden. Doch die Programmiersprache ist auch keine Web-Sprache – Android-Apps werden erst mit Java, heute meist mit Kotlin programmiert.

2010 bringt Microsoft das Windows Phone auf den Markt. Apps für das Windows Phone können in C# geschrieben werden. Das Windows Phone setzt sich aber nicht gegen das iPhone und die Android-Smartphones durch und verliert rasch seinen Marktanteil. 2017 wird die Produktion schließlich eingestellt.

Der Markt der App-Entwicklung wächst. 2022 werden rund 1,6 Millionen iOS-Apps im Apple Store angeboten und über 3,5 Millionen Android-Apps im Google Play Store (https://www.statista.com/statistics/276623/number-of-apps-available-in-leading-app-stores, 20.03.2023). Pro Tag werden mittlerweile über 700 iOS-Apps veröffentlicht und fast 2000 Android-Apps.

Alternativen zur App-Entwicklung mit Flutter

Die Tatsache, dass Sie dieses Buch in den Händen halten, lässt bereits vermuten, dass Sie zumindest daran interessiert sind, in die Flutter-Welt einzutauchen. Trotzdem möchten wir Ihnen davor die Alternativen zur Flutter-Entwicklung aufzeigen, um zu erfahren wie (teilweise beschwerlich und zeitaufwendig) der Weg zur eigenen App bisher aussah oder teilweise immer noch aussieht.

Die App-Entwickelnden-Szene teilt sich heute in verschiedene Plattformen: Entweder Sie programmieren nativ für Apple mit Swift und Xcode als Entwicklungsumgebung oder für Android mit Java oder Kotlin und Android Studio als Entwicklungsumgebung. Alternativ dazu wählen Sie eine Cross-Platform-Technologie wie Flutter, mit der Sie mehrere Betriebssysteme bedienen können. Auch eine Progressive Web-App (PWA) könnte als Alternative zu einer nativen oder einer Cross-Platform-App infrage kommen. In den folgenden Abschnitten gehen wir kurz auf alle drei Möglichkeiten ein.

Native Entwicklung

Native Entwicklung mit Swift für Apple oder Kotlin und Java für Android ist immer noch ein wichtiges Feld. Speziell wenn eine App hauptsächlich auf Hardware-nahe Funktionen wie den Einsatz von Kamera, Bluetooth, verschiedenen Sensoren oder Audio angewiesen ist, sollten Sie über eine native Entwicklung nachdenken. Diese Implementierungen sind meist mit viel nativem plattformspezifischen Code verbunden und können daher nicht für mehrere Plattformen verwendet werden. Sie können diese Funktionalitäten in Flutter zwar mit Plug-ins meistens abdecken, bei der Performance müssen Sie aber teilweise mit Einbußen rechnen.

Als mit Flutter entwickelnde Person werden Sie auch um kleine Einblicke in die Android- und iOS-Welt manchmal nicht herumkommen. Wenn Sie aus der nativen Entwicklung kommen, ist dies auf jeden Fall ein Vorteil. Ihr Wissen wird Ihnen in der Flutter-Entwicklung sicher zugutekommen.

Mit Flutter ist es mittlerweile auch möglich, plattformspezifisch jeweils andere Designelemente anzuzeigen. Die Libraries für Android- und iOS-spezifisches Design sind schon automatisch integriert.

Cross-Platform-Entwicklung

In den letzten Jahren kristallisiert sich immer mehr heraus, dass der App-Markt zwischen Android und iOS gespalten bleiben wird. Gleichzeitig gibt es kaum noch Firmen, die es sich leisten wollen, eine der Plattformen zu ignorieren. Firmen, die eine App auf den Markt bringen, wollen in der Regel beide Smartphone-Betriebssysteme bedienen – und oft auch eine Webvariante ihres Produktes.

Um nicht für ein Produkt zwei oder drei verschiedene Apps parallel entwickeln und pflegen zu müssen, entscheiden sich heute viele Firmen für eine Cross-Platform-Lösung. Eine Cross-Platform-App ist eine Software, die nicht nur auf einem, sondern auf mehreren Betriebssystemen laufen kann.

Diese Cross-Platform-Apps haben häufig Nachteile gegenüber den nativ programmierten Apps. Sie sind oft weniger performant und anfangs konnten die Cross-Platform-Frameworks nicht auf alle Hardware-Funktionen zugreifen, wie zum Beispiel Bluetooth oder GPS.

Cordova und Ionic

Cross-Platform-Entwicklung begann ursprünglich mit hybriden Apps. Ein Beispiel dafür ist das Apache-Cordova-Framework – auch bekannt unter dem Namen »PhoneGap«. Entwickelnde programmieren eine Webseite und das Framework packt diese Webseite in einen nativen Android- oder iOS-Container. Diese Apps haben leider oft eine mäßige Performance, lange Ladezeiten, vorgegebene und nur bedingt anpassbare Designelemente und gelten darum als »billige« Variante der nativen Entwicklung für iOS und Android. Das Ionic-Framework funktioniert nach demselben Prinzip und wird heute noch genutzt – ist aber nicht weit verbreitet.

Xamarin

Xamarin ist ein kostenpflichtiges Framework für .NET-Entwickelnde. Mit diesem Framework können in C# Apps für Android, iOS und Windows geschrieben werden. Es wird in Deutschland noch teilweise in mittelständischen Firmen eingesetzt, hat sich aber nie richtig durchsetzen können.

Unity und die Unreal Engine

Cross-Platform-Spiele können mit Unity in C# oder der Unreal Engine in C++ programmiert werden. Diese Cross-Platform-Spiele-Apps sind übrigens für den Großteil des Umsatzes des Apple App und Google Play Stores verantwortlich (https://www.statista.com/statistics/266489/earnings-forecast-for-mobile-apps-providers/, 20.03.2023). Für Flutter gibt es mittlerweile die Flame-Engine; mit der sich 2D-Spiele gut umsetzen lassen. Für komplexe Spieleentwicklung und vor allem 3D-Spiele sollten Sie allerdings weiterhin Unity oder die Unreal Engine in Betracht ziehen.

React Native

Mit React Native hat Meta vor ein paar Jahren eine ziemlich gute Cross-Platform-Lösung entwickelt. Der programmierte JavaScript-Code wird direkt in einen iOS- und Android-kompatiblen Code übersetzt, was der Performance zugutekommt und im Vergleich zum hybriden Ansatz deutlich näher am Look-and-feel von nativen Apps liegt. React Native ist weit verbreitet und war vor Flutter die beliebteste Cross-Platform-Lösung unter App Entwickelnden.

2021 hat sich Flutter offiziell gegenüber React Native als das meistgenutzte Cross-Platform-Framework weltweit durchgesetzt. Hauptgrund dafür ist, dass es gegenüber nativen Apps kaum Qualitätseinbußen gibt.

PWA-Entwicklung

Progressive Web-Apps sind keine mobilen Apps im engeren Sinne, sondern eigentlich Webseiten, die mithilfe einer extra Service-Worker-Datei zu einer offline-fähigen, herunterladbaren Web-App erweitert werden können. Sie können prinzipiell mit jedem Web-Framework geschrieben werden (auch mit Flutter übrigens). Sogar WordPress Webseiten können mithilfe eines Plugins zu einer PWA erweitert werden.

Die Eigenarten einer PWA

Die Apps können sowohl im Google Play Store, als auch auf normalen Webseiten im Internet gefunden und heruntergeladen werden. Eine Bereitstellung über den Apple App Store ist allerdings aktuell nicht möglich. Sie sehen aus wie native Apps und nutzen den Cache des Smartphone Browsers, um Daten zu speichern und offline zur Verfügung zu stellen.

Genau wie Flutter gibt diese Technologie das Versprechen mit nur einer Codebase drei große Plattformen zu bedienen. Während man bei Flutter nach einer Anpassung des Codes drei verschiedene Builds anfertigen und dann auf drei verschiedenen Plattformen veröffentlichen muss, wird eine PWA meist nur im Web veröffentlicht und ist dann sofort von allen Plattformen aus zugänglich. Auf den ersten Blick ist eine PWA also noch schneller zu updaten als in Flutter programmierte Apps.

Die Probleme einer PWA

Das Problem mit PWAs ist leider, dass es viele verschiedene Browser gibt und die Firmen dahinter Probleme haben, sich auf gemeinsame Standards zu einigen. Es geht nur langsam in die richtige Richtung. Safari zum Beispiel stellt sich gern quer, wenn es um die Frage geht, auf welche Smartphone-Funktionen der Browser und damit die PWA zugreifen darf. Das ständige Anpassen der App nach Browser Updates und das kompatibel Halten mit veralteten Browser Versionen ist umständlich und zeitaufwendig.

Ein weiterer wichtiger Punkt gegen eine Entscheidung für eine PWA-Entwicklung ist, dass diese Apps für viele Smartphone-Nutzende noch unbekannt sind. Sie suchen eher im App Store nach Apps als im Internet, und wenn sie eine PWA im Internet finden, wissen sie meist nicht um die Möglichkeit, diese herunterzuladen und wie eine native App zu benutzen.

Vorteile von Flutter

Sie sehen, es gibt also einige Möglichkeiten, eine App zu entwickeln. Wir halten Flutter jedoch in den meisten Fällen für die sinnvollste. Hier noch einmal die wichtigsten Gründe, sich für Flutter zu entscheiden, zusammengefasst und ein paar weiterführende im Überblick:

So gut wie nativ:

Mit Flutter können Apps entwickelt werden, die im Google Play Store und im Apple Store genau wie native Apps gefunden werden können und ein ebenbürtiges »Look-and-feel« wie native Apps bieten.

Viele Plattformen mit einer Codebase:

Flutter Skills haben eine große Hebelwirkung – mit einem Framework können Sie sehr viele verschiedene Plattformen bedienen. Da kommt sonst kaum ein Cross-Platform-Framework ran.

Das impliziert auch Plattform-Skalierbarkeit:

Sie können mit einer beliebigen Plattform starten, schnell ein MVP an Benutzende ausrollen und jederzeit neue Plattformen nachziehen, wenn der Markt reif dafür ist – ohne großen Mehraufwand.

Flutter-Entwicklung ist schnell:

Mit Flutter können Sie ganz fix ein professionell aussehendes UI schaffen. Es eignet sich hervorragend, um einen App-Prototypen oder MVP (ein Minimum Viable Product ist die erste funktionsfähige Iteration eines Produktes) zu erstellen, weil der Weg von der Idee zum ersten MVP-Release so schnell gehen kann.

Dart macht Spaß:

Dart, die Sprache, mit der in Flutter entwickelt wird, ist einfach zu lernen, vor allem wenn man schon eine Programmiersprache beherrscht. Oft wird es als eine Mischung zwischen Kotlin, Swift und TypeScript beschrieben.

Flutter ist Open Source:

Ein Team von Google arbeitet ununterbrochen an der Weiterentwicklung von Flutter, aber Sie können auch selbst aktiv werden und an der Weiterentwicklung mitwirken. Außerdem haben Sie Zugriff auf den gesamten Source-Code und können die Funktionsweise von Flutter jederzeit selbst nachschlagen.

Spaß beim Entwickeln:

Flutter soll nicht nur für die App-Nutzenden eine Bereicherung sein, sondern auch für die Entwickelnden. Von Anfang an ist an das Entwicklungserlebnis für Entwickelnde gedacht worden und das sorgt dafür, dass Flutter einfach Spaß macht. Mit Hot-Reload, einer Funktion, die Sie in diesem Teil noch praktisch kennenlernen werden, kann die App zum Beispiel in Sekunden mit neuen Änderungen geupdatet werden, ohne einen langen Build-Prozess und einhergehende Wartezeit auszulösen.

Eine hilfsbereite Community:

Es hat sich mittlerweile auch eine große, aktive und sehr hilfsbereite Flutter Community entwickelt. Es gibt unzählige Tutorials, Hilfeforen und Blogs, die bei Problemen Hilfestellung leisten können. Auf Meet-ups und Konferenzen können Sie viele leidenschaftliche Flutter-Entwickelnde kennenlernen und sich austauschen.

Premium-Dokumentation:

Flutter ist sehr gut dokumentiert. Wenn Sie bereits mit anderen Frameworks, Programmiersprachen und Software-Entwicklungstools gearbeitet haben, wissen Sie wahrscheinlich, dass das nicht selbstverständlich ist.

Package- und Plug-in-Vielfalt:

Für nahezu jeden Use-Case gibt es mittlerweile ein passendes Package oder Plug-in, mit dem Sie Ihre Flutter-App um Funktionalität und Designelemente erweitern können.

Zukunftsfähige Technologie:

Flutter ist »in« und das Interesse steigt, nicht nur bei Entwickelnden, auch bei potenzieller Kundschaft. Ein perfekter Zeitpunkt einzusteigen!

Wie funktionieren Flutter und Dart?

Flutter ist ein Framework (von Google auch als UI-Toolkit bezeichnet) und Dart die Programmiersprache, mit der innerhalb dieses Frameworks programmiert wird – so viel wissen Sie bereits. Im Folgenden möchten wir aber noch einen Schritt weiter gehen und Ihnen einen kurzen Einblick geben, wie Flutter und Dart unter der Haube funktionieren und warum gerade Dart als Programmiersprache ausgewählt wurde.

Wenn Sie gleich Ihre erste Flutter-App entwickeln, werden Sie sich zwei APIs (Schnittstellen) bedienen, der Flutter-API und der Dart-API.

Flutter-API

Die Flutter-API gibt Ihnen eine Kollektion von UI-Elementen an die Hand, aus der Sie sich bedienen können. Bei Flutter heißen diese Elemente »Widgets«. Es gibt zum Beispiel Container, Buttons, Textfelder, Menüs, Bilder, Icons, Pop-ups und viele mehr.

Sie können aus der Material Library Elemente im Android-Stil auswählen oder aus der Cupertino Library Elemente im iOS-Stil. Die meisten Widgets haben anpassbare Parameter, wie Farben, Größen, Abstände und Inhalte.

Dart-API

Die Dart-API gibt Ihnen Zugriff auf die üblichen Funktionen, die in der Regel jede Programmiersprache anbietet: Sie können zum Beispiel eine Funktion aufrufen, die eine Kommazahl rundet, eine Collection sortiert oder Ihnen das derzeitige Datum zurückgibt.

Mit Dart-Code können Sie die Logik der App schreiben und bestimmen, wann welche Daten geladen und wann welche UI-Elemente angezeigt werden sollen.

Warum Dart?

Aber warum muss es eigentlich die unbekannte Sprache Dart sein? Hätten JavaScript, Java, Kotlin, Python oder irgendeine andere Sprache, die auch in anderen Bereichen der Software-Entwicklung eingesetzt wird, es nicht auch getan? Viele Entwickelnde, die wir treffen, haben ähnliche Bedenken.

Was ist so besonders an Dart?

Dart ist eine leicht zu erlernende, moderne und elegante, für die UI-Entwicklung optimierte Programmiersprache. Sie ist objektorientiert und die Syntax ähnelt der von Kotlin, Swift und TypeScript.

Seit Version 2.12 ist Dart Null-Safe und sorgt dafür, dass Flutter-Entwickelnde immer im Blick haben müssen, wann eine Variable null werden kann.

Das Flutter-Team hat sich vor allem für Dart entschieden, weil Dart schnell ist und gleichzeitig eine gute User Experience für App-Nutzende sowie App-Entwickelnde bietet. Aber warum ist das so?

JIT und AOT – bitte, was?

Das Geheimnis dahinter? Dart unterstützt sowohl JIT- als auch AOT-Kompilierung. Diese Kombination lässt sich in anderen Sprachen nur selten finden, denn meist wird nur eine Form der Kompilierung unterstützt.

JIT steht für Just-in-Time-Kompilierung. Wenn eine Sprache JIT kompiliert, heißt das, dass sie kompiliert, während die App läuft. Das führt für die App-Nutzenden zwar zu einer geringeren Performance, bietet aber vor allem Geschwindigkeitsvorteile beim Entwickeln – Stichwort Hot-Reload.

Dart benutzt den JIT-Compiler, wenn Sie Ihre App während des Entwickelns auf einem Emulator oder auf einem angeschlossenen Smartphone debuggen. Führen Sie eine Änderung in Ihrem Code durch und speichern Sie diese, sehen Sie sie dank Hot-Reload innerhalb von Millisekunden auf Ihrem Gerät.

Erst wenn Sie Ihre App veröffentlichen wollen und dafür einen sogenannten »Release Build« generieren, benutzt Dart den AOT-Compiler (Ahead-of-Time-Compiler). Dart kompiliert also, bevor die App von der benutzenden Person aus dem Store heruntergeladen oder im Web aufgerufen wird, zu nativem ARM- oder Intel-x64-Maschinencode oder im Web zu JavaScript-Bytecode und sorgt so dafür, dass App-Nutzende eine qualitativ ebenbürtige User Experience bekommen – analog einer nativ programmierten App. Es gibt nahezu keine Einbußen an Auflösung oder Geschwindigkeit.

Es gibt also ein paar gute Gründe, warum sich das Flutter-Team für Dart entschieden hat. Auch wir sind uns sicher: Sie werden die Sprache bestimmt genauso schnell zu schätzen lernen wie wir.

Sie sind nun bestens mit Hintergrundwissen ausgestattet – wagen wir uns an den praktischen Teil.

Kapitel 2

Startklar machen und rein ins Vergnügen

IN DIESEM KAPITEL

Installieren Sie Flutter unter Mac oder WindowsBringen Sie den Android-Emulator oder iOS-Simulator zum LaufenRichten Sie die Entwicklungsumgebung Visual Studio Code ein

Wir hoffen, dass wir Ihnen bisher einen guten Vorgeschmack auf die Entwicklung mit Flutter geben konnten und Sie nun Lust haben, sich gemeinsam mit uns ins Abenteuer zu stürzen.

Flutter installieren

Im Normalfall geht die Flutter-Installation unkompliziert und zügig vonstatten, wenn Ihr Computer die Systemmindestanforderungen erfüllt (https://docs.flutter.dev/get-started/install) und Sie die nachfolgenden Schritte befolgen.

Als Alternative zur Flutter-Installation auf Ihrem PC oder Mac können Sie aber auch zunächst mit praktischen Tools wie dem DartPad (http://dartpad.dartlang.org), FlutLab (https://flutlab.io), CodePen (https://codepen.io) oder Zapp (https://zapp.run) ins Rennen gehen. All diese Tools sind kostenfrei, laufen im Browser ohne Installation und eignen sich gut für ein erstes Kennenlernen. Bedenken Sie allerdings, dass Sie – vor allem beim DartPad – etwas eingeschränkt sind, was den Komfort beim Programmieren angeht.

Generell empfehlen wir einen Blick auf die offizielle Flutter-Installationsdokumentation: https://docs.flutter.dev/get-started/install.

Das Flutter-SDK

Zum Entwickeln von Flutter-Apps benötigen Sie in erster Linie das Flutter-SDK, welches Sie unter https://docs.flutter.dev/development/tools/sdk/releases für Ihr Betriebssystem herunterladen können. Flutter hat drei verschiedene Versionszweige, auch Channels genannt: den stable-Channel, den beta-Channel und den master-Channel. Wir empfehlen die Verwendung der aktuellen Version des stable-Channels, welche die stabilste Version beherbergt.

Für das Testen von neuen Flutter-Features können Sie durch die Eingabe von flutter channel beta innerhalb einer Konsole auf den Beta-Channel wechseln. Aber Achtung – in der Betaversion können sich Bugs verstecken, die Ihre App instabil machen können. Über flutter channel stable gelangen Sie zurück auf den stable-Channel. Ein Hinweis: Das Flutter-SDK ist eigentlich nichts weiter als ein Git-Repository mit unterschiedlichen Branches für die verschiedenen Channel. Bei einem Wechsel der Channel wechseln Sie somit im Hintergrund nur den Branch und ein Upgrade von Flutter holt sich die neueste Version dieses Channels durch ein Pullen des Git-Repositories.

Windows

Entpacken Sie die heruntergeladene Zip-Datei, beispielsweise unter C:\Benutzer\<name>\Documents.

Wenn Sie Flutter in einer regulären Windows-Eingabeaufforderung ausführen möchten, müssen Sie Flutter als Umgebungsvariable zu Ihrem PATH hinzufügen:

Öffnen Sie die Windows-Suche und geben Sie

Umgebungsvariable

ein. Klicken Sie auf

UMGEBUNGSVARIABLEN FÜR DIESES KONTO BEARBEITEN

.

Suchen Sie unter

BENUTZERVARIABLEN

nach dem Eintrag

PATH

.

Fügen Sie Ihren oben definierten Flutter-Speicherort als Eintrag hinzu, also zum Beispiel

C:\BENUTZER\<NAME>\DOCUMENTS\FLUTTER\BIN

.

Öffnen Sie eine neue Eingabeaufforderung, indem Sie die Tastenkombination  +  verwenden und

cmd

in das sich öffnende Fenster eingeben. Testen Sie durch das Ausführen des Kommandos

flutter

, ob die Einrichtung erfolgreich war. Sie sehen jetzt alle möglichen Flutter-Befehle.

Geben Sie

flutter doctor

in die Eingabeaufforderung ein. Dieser Befehl zeigt Ihnen an, ob mit Ihrer Flutter-Installation alles im Reinen ist.

Entpacken Sie die Zip-Datei nicht in C:\PROGRAM FILES oder ein ähnliches Verzeichnis, da hierfür erweiterte Berechtigungen benötigt werden.

Mac

Entpacken Sie die heruntergeladene Zip-Datei, indem Sie die folgenden Befehle ins Terminal eingeben. Das Terminal können Sie unter Mac öffnen, indem Sie die Tastenkombination  +  betätigen und

Terminal

in das Suchfeld eingeben:

$ cd ~/development$ unzip ~/Downloads/flutter_macos_3.7.11-stable.zip

Wenn Sie Flutter im aktuellen Terminal-Fenster ausführen möchten, müssen Sie den Pfad zu Ihrer Flutter-Installation zunächst exportieren, damit die Flutter-Befehle funktionieren, egal in welchem Ordner Sie das Terminal geöffnet haben. Hierfür genügt die Ausführung des Befehls im Terminal:

$ export PATH="$PATH:pwd/flutter/bin

Um zu prüfen, ob die Flutter-Installation erfolgreich war, geben Sie

flutter

in den Terminal ein. Jetzt sollten Ihnen alle verfügbaren Flutter-Befehle angezeigt werden.

Geben Sie

flutter doctor

im Terminal ein. Dieser Befehl zeigt Ihnen an, ob mit Ihrer Flutter-Installation alles im Reinen ist.

Wenn Sie nicht jedes Mal den Pfad exportieren wollen, um mit den Flutter-Befehlen zu arbeiten, ist das am Mac leider nicht so einfach wie unter Windows. Es kommt darauf an, welche Version Ihr Betriebssystem hat. Am besten googeln Sie das selbstständig.

Das Herzstück von Flutter sollte damit erfolgreich installiert sein. Zusätzlich zu Flutter benötigen Sie weitere Tools, um Android- und iOS-Apps zu entwickeln.

Android-Setup

Um eine Android-App mit Flutter zu entwickeln, werden das Android-SDK, die zugehörigen SDK-Command-Line- und Build-Tools sowie ein Android-Emulator benötigt. Hierfür installieren Sie bitte Android Studio, das alle diese Tools gebündelt zur Verfügung stellt und zusätzlich als Entwicklungsumgebung verwendet werden kann.

Android Studio installieren

Laden Sie die aktuelle Version von Android Studio herunter:

https://developer.android.com/studio

.

Starten Sie Android Studio und folgen Sie den Schritten im

ANDROID STUDIO SETUP WIZARD

.

Führen Sie erneut

flutter doctor

aus, um sicherzugehen, dass die Installation erfolgreich war und Flutter und Android Studio sich gegenseitig gefunden haben.

Eine Android-App starten