Lektion 07 - Flutter Grundlagen
Flutter ist der Schritt von Dart-Code zu grafischen Apps. Bevor du Counter, Buttons und Layouts baust, musst du verstehen, wie Flutter denkt: Alles ist ein Widget, UI wird aus Dart-Code gebaut, und Aenderungen passieren ueber State.
Flutter ist ein Framework fuer Apps mit grafischer Oberflaeche. Du schreibst Dart, Flutter erzeugt daraus sichtbare UI fuer Smartphone, Web oder Desktop.
void main() {
runApp(const MyApp());
}
main() startet wie bei Dart-Konsolenprogrammen. runApp startet
aber keine Konsole, sondern deine Flutter-Oberflaeche.
In Flutter ist fast alles ein Widget: Text, Button, Abstand, Farbe, Layout, Seitenstruktur und sogar ganze Bildschirme.
MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('App')),
body: Text('Hallo'),
),
)Wenn du Web oder JavaScript kennst, kannst du Flutter besser einordnen. Flutter nutzt aber keine HTML-Tags und kein CSS. Die Oberflaeche entsteht direkt aus Widgets.
HTMLWidgets wie Text, Column, ButtonCSSWidget-Properties wie color, padding, styleJavaScriptDart-Logik, Funktionen, Klassen, Statedocument.querySelectorDu greifst nicht direkt auf DOM-Elemente zuaddEventListeneronPressed, onTap oder andere Callback-PropertiesDOM neu rendernsetState meldet Flutter: UI neu zeichnenIn CSS schreibst du Regeln fuer Klassen oder Elemente. In Flutter gibst du Styling direkt an Widgets oder an Theme-Werte weiter.
.title {
color: blue;
font-size: 32px;
padding: 16px;
}Padding(
padding: EdgeInsets.all(16),
child: Text(
'Titel',
style: TextStyle(
color: Colors.blue,
fontSize: 32,
),
),
)Flutter trennt Layout und Styling nicht so stark wie HTML/CSS. Viele visuelle Werte sind Teil des Widget-Baums.
main()Startpunkt des Dart-ProgrammsrunApp(...)Startet die Flutter-App und zeigt das erste Widgetbuild(...)Beschreibt, wie ein Widget aussehen sollsetState(...)Aendert State und laesst Flutter die UI neu zeichnenprint(...)Gibt Debug-Text in der Konsole aus
Ein StatelessWidget zeigt UI ohne eigenen veraenderbaren Zustand. Ein
StatefulWidget hat Werte, die sich aendern koennen, zum Beispiel einen Counter.
class TitleText extends StatelessWidget {
const TitleText({super.key});
@override
Widget build(BuildContext context) {
return Text('Hallo');
}
}class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State<CounterPage> createState()
=> _CounterPageState();
}Faustregel: Wenn sich Werte auf dem Bildschirm veraendern, brauchst du meistens State.
State ist der aktuelle Zustand deiner App. Beim Counter ist das die Zahl. Wenn du den State veraenderst, muss Flutter erfahren, dass die UI neu gezeichnet werden soll.
int counter = 0;
void increase() {
setState(() {
counter = counter + 1;
});
}Der aktuelle Zustand.
Hier wird der Zustand geaendert.
Flutter ruft danach wieder build auf.
Diese Befehle brauchst du beim Arbeiten mit Dart und Flutter. Schreibe sie bewusst ins Terminal und lies die Ausgabe.
dart --versionPrueft, ob Dart installiert istdart run datei.dartStartet eine Dart-Konsolendateiflutter --versionZeigt die installierte Flutter-Versionflutter doctorPrueft, ob Flutter korrekt eingerichtet istflutter create projektnameLegt ein neues Flutter-Projekt ancd projektnameWechselt in den Projektordnerflutter runStartet die App auf einem Geraet, Emulator oder im Browserflutter pub getLaedt Projekt-Abhaengigkeiten aus pubspec.yamlflutter analyzePrueft den Code auf typische Fehler
Nach flutter create entsteht ein Projektordner mit vielen Dateien. Am Anfang
ist vor allem wichtig, wo dein Code liegt.
mein_projekt/
lib/
main.dart
pubspec.yaml
test/
android/
ios/
web/Hier startet dein App-Code.
Hier stehen Name, Assets und Abhaengigkeiten.
Plattformordner fuer verschiedene Zielsysteme.
flutter doctor aus und notiere, was noch fehlt oder gruen ist.flutter create flutter_counter ein Testprojekt an.lib/main.dart und markiere main, runApp, build und setState.flutter run.