Flutter Tutorial für Beginner: So erstellst du eine Flutter App in 1,5 Stunden

Malt Freelancer Christian Eichmüller ist Entwickler für Android, iOS und Flutter und hat uns in seiner Malt Academy erklärt, wie man eine App ganz ohne Programmierkenntnisse entwickelt. Dafür nutzt er den neuen Star in der App-Entwicklung: Flutter. Die Open-Source-Software von Google ermöglicht damit die Cross-Plattform-Entwicklung, die Entwicklern und Einsteigern das Leben deutlich leichter macht. Im Interview erklärt Christian nochmal Schritt für Schritt seine Vorgehensweise. 

First things first: Was ist Flutter und was kann es?

Flutter ist ein von Google erstelltes Open-Source-UI-Softwareentwicklungskit oder sogenanntes Framework mit dem man relativ simpel eine App programmieren kann. Anstelle von ursprünglichen 3 Codebases, die man davor gebraucht hat, um Apps in verschiedenen Anwendungen (iOs, Android, Web) zu programmieren, braucht man mit Flutter nur noch eine. Ohne Flutter müsste man auch für jede Bildschirmgröße (es gibt circa 10-20 Bildschirmgrößen) ein eigenes Layout schreiben, das auf die jeweilige Handygröße passt. Mit Flutter kann man also mit einer intuitiven Codebase (Dart) eine iOs App, Android App, Web App und Desktop App in Einem programmieren. 

Wie kompliziert ist das Programmieren mit Flutter?

Stellen wir uns Flutter als eine Plattform vor, um einen Legoblockturm zu bauen. Jeder Block ist ein Widget und jedes Widget hat seine Aufgabe und Charakteristik (es kann zum Beispiel eine Farbe sein). Nun können wir diese Legoblöcke verwenden und einen Turm bauen, indem wir die Blöcke (Widgets) aufeinander stapeln. Das Ergebnis ist ein Lego-Turm, der unseren Vorstellungen entspricht, also eine App, die unsere Bedürfnisse erfüllt. 

Laut Christian ist es also ganz einfach 🤙

Was brauche ich für die Entwicklung mit Flutter?

Im Flutter Tutorial von Christian entwickelst du eine Motivations-App mit dem Titel “Du schaffst das”, die simpel ist und sich damit gut für Beginner eignet. Die Anwendung zeigt uns beim Klicken eine motivierende Botschaft auf dem Bildschirm an. Alles was du dafür brauchst ist ein Laptop (für einen reibungslosen Ablauf empfiehlt Christian einen etwas leistungsfähigeren PC), die Software IDE – Android Studio, ein Android Emulator, sowie einen Mac (wenn du die App auf einem Mac-Gerät testet willt) und das Programm Xcode (für diejenigen, die ein MacBook verwenden). 

Eine ausführliche Dokumentation zum Download von

  • Flutter
  • Android Studio
  • Android Emulator

bietet folgender Link: https://flutter.dev/docs/get-started/install/windows 

Zum Installieren von Android Studio und Flutter helfen folgende Videos: 

Nicht entmutigen lassen, wenn Fehler auftreten. Das passiert allen EntwicklerInnen und fast 99% der Fehlermeldungen sind bereits bei vielen anderen schon aufgetreten. Eine einfache Google Suche liefert schnell die Lösung auf fast jedes Problem. 

Du schaffst das! – Christian’s Flutter Tutorial für Beginner

So wird deine App am Ende aussehen:

In Flutter repräsentiert jedes Widget eine bestimmte Eigenschaft. Zur Erstellung des Anwendungsrumpfes müssen wir mehrere Widgets zur Auswahl des gewünschten Layouts einrichten. Einige von ihnen umfassen die Einrichtung einer Farbe, eines Randes, eines Rahmen-Radius, einer Spalte usw. Jeder Schritt kann in Echtzeit visualisiert und reflektiert werden, indem man den Hot-Reload-Button drückt. Amazing!

Wenn wir auf unserem Weg der Anwendungserstellung voranschreiten, könnten wir auf Fehlermeldungen stoßen, die im unteren Fenster angezeigt werden. Keine Panik, sie sind normalerweise leicht lösbar. Sobald wir unseren ersten “großen” Container entworfen haben, werden wir uns auf die Erstellung des zweiten, kleineren Containers darunter und die Logik der Verbindung dieser Container zubewegen. Für den kleineren Container können wir den gleichen Code (mit wenigen Anpassungen) verwenden und ihn kopieren.  Um genau zu sein, werden 80% des Bildschirms für einen großen Container und 20% für den kleineren Container reserviert sein.

Unser Speaker Christian hat bei der Einstellung der App die folgenden Widgets verwendet:

Glückwunsch, wir haben gerade den ersten Teil geschafft!

Für den zweiten Teil werden wir eine Programmiersprache namens Dart verwenden, um die Container auf “sinnvolle” Weise zu verbinden. Die Idee ist, dass immer dann, wenn wir den kleineren Container-Knopf drücken, der größere Container eine neue Motivationsbotschaft anzeigt. Den gesamten Code kannst du dir gerne in seinem Github Projekt ‘We_can_do_it’ anschauen und runterladen.

https://github.com/Letalus/we_can_do_it

Für die Schritt für Schritt Anleitung von Christian, schaust du dir aber am Besten seine Malt Academy zum Flutter Tutorial auf YouTube an. Viel Erfolg!