Flutter installieren (Windows)#

Um Apps Apps mit Flutter entwickeln zu können, benötigst du folgende Tools: (Folge bestenfalls immer den entsprechenden Anleitungen)

• Flutter SDK downloaden und installieren siehe: https://docs.flutter.dev/get-started/install

• Android SDK und Android Studio siehe: https://developer.android.com/studio?hl=de

• Eine IDE deiner Wahl - z.B. Visual Studio Code mit der Flutter Extension siehe: https://code.vissualstudio.com/

Ob alles korrekt funktioniert, oder ob noch etwas fehlt, sagt dir der Befehl flutter doctor.

Tipp: ich nutze statt der cmd die Windows PowerShell.

• Bei der Erstinstallation ist es zudem wichtig, dass du die Android Lizenzen akzeptierst. Der entsprechende Befehl wird dir (durch flutter doctor) vorgeschlagen.

• erstelle dir im Android Studio Start-Screen unter “more Actions” -> “Virtual Device Manager” einen Emulator.

wichtige Befehle#

• flutter doctor - prüft, ob alle Vorraussetzungen erfüllt sind und gibt Hilfestellung
• flutter create appname - erstellt eine leeres Flutter-Projekt
• flutter emulator - zeigt dir alle verfügbaren Emulatoren
• flutter emulator - launch emulatorname - startet Emulatot
• flutter run - startet deine App im Debug-Modus (auf virtuellem Device)
• flutter run --release - Startet die App auf einem virtuellen Device (falls vorhanden & gestartet) im Release-Modus. Es wird die vollständige APK auf dem Device installiert.
• flutter -h - zeigt alle Befehle im Terminal an
• flutter --version - zeigt aktuell installierte Flutter-Version an
• flutter channel - zeigt an, in welchem Channel (Branch) du dich befindest (für experimentelle Projekte kann man auch in den Beta-Branch wechseln)
• flutter upgrade - führt ein Upgrade auf die aktuelle Flutter-Version durch
• flutter downgrade - führt ein Downgrade auf eine bestimmte Version durch (Bsp: flutter downgrade v3.10.0)
• flutter clean - entfernt die beim Build entstandenen Files aus dem Projekt. Kann Problemen helfen. Oft muss flutter pub get danach ausgeführt werden.
• flutter pub get - Lädt alle Abhängigkeiten deiner App herunter.

Befehle für den Debug-Modus#

Diese Befehle helfen, wenn du die App aus VS-Code heraus im Debug-Modus (flutter run) mit dem Terminal gestartet hast.

R - startet die App auf den Emulator neu (z.B. bei größeren Code-Änderungen.) r - Hot Reload -> Änderungen werden sofort live geladen q - beendet die App und stoppt den Debug-Modus

Beispiel - Minimale Flutter-App#

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget { // `stless` -> Flutter stateless Widget
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("App")
        ),
      body: Center(
        child: Text("Dies ist ein Demotext!!!"),
      ),
    ));
  }
}

Die wichtigsten Widgets in der Programmierung mit Dart und Flutter#

In der Programmierung mit Dart, insbesondere im Kontext von Flutter, sind Widgets die grundlegenden Bausteine für die Benutzeroberfläche. Jedes Element, das auf dem Bildschirm dargestellt wird, ist ein Widget, und sie können sowohl strukturelle als auch visuelle Komponenten umfassen.

Hier sind einige der wichtigsten Widgets, die Du kennen solltest:

Stateless Widgets#

Sie haben keinen internen Zustand und können während der Laufzeit nicht geändert werden. Ihre Darstellung hängt ausschließlich von den Eingabeparametern ab, die beim Erstellen des Widgets übergeben werden. Stateless Widgets sind Ideal für statische Inhalte, wie Text, Icons oder einfache Buttons, die sich nicht ändern, nachdem sie einmal gerendert wurden. Ein Beispiel könnte ein einfaches Textfeld sein, das einen festen Text anzeigt.

Beispiel:

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!');
  }
}

Stateful Widgets#

Im Gegensatz zu Stateless Widgets können Stateful Widgets ihren Zustand ändern. Sie sind nützlich für interaktive Anwendungen, bei denen sich die Darstellung basierend auf Benutzerinteraktionen ändert. Wenn sich der Zustand von Stateful Widgets ändert, wird das Widget neu gerendert.

Stateful Widgets sind nützlich für interaktive Elemente wie Formulare, Schaltflächen, die ihre Farbe ändern, oder Timer. Diese Widgets reagieren auf Benutzerinteraktionen und können ihre Darstellung entsprechend anpassen.

Beispiel:

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Counter: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

weitere wichtige Widgets#

• Text: Stellt Text dar und ermöglicht die Anpassung von Schriftart, Größe und Stil.
• Image: Zeigt Bilder an, entweder lokal oder über eine URL.
• Container: Ein flexibles Widget, das andere Widgets umschließt und dekoriert (z.B. mit Farben oder Abständen).
• Row und Column: Diese Layout-Widgets ordnen ihre Child-Elemente horizontal (Row) oder vertikal (Column) an. Sie sind essenziell für das Layout von Benutzeroberflächen.
• Scaffold: Bietet eine grundlegende Struktur für Material Design Apps, einschließlich AppBar, Drawer und BottomNavigationBar.
• FloatingActionButton: Ein spezielles Button-Widget, das häufig für Hauptaktionen in der App verwendet wird.
• ListView: Ein scrollbares Widget, das eine Liste von Elementen anzeigt. Es ist besonders nützlich für lange Listen von Daten.

Komposition und Anpassung#

Flutter verfolgt einen kompositions-basierten Ansatz, bei dem Widgets aus anderen Widgets zusammengesetzt werden können. Dies ermöglicht eine hohe Flexibilität bei der Gestaltung der Benutzeroberfläche. Entwickler können auch benutzerdefinierte Widgets erstellen, um spezifische Anforderungen zu erfüllen.