Wissensdatenbank

Was ist Flutter?

Flutter ist ein Open-Source-UI-Entwicklungsframework (User Interface), das von Google entwickelt wurde. Es wird verwendet, um mit einer einzigen Codebasis hochleistungsfähige, visuell ansprechende Anwendungen für iOS, Android, Web, Desktop und eingebettete Systeme zu erstellen. Das Hauptziel von Flutter ist es, Entwicklern die Möglichkeit zu geben, schnell und effizient plattformübergreifende Anwendungen zu erstellen.

Wichtige Punkte:

• Plattformübergreifende Entwicklung: Anwendungsentwicklung für mehrere Plattformen mit einer einzigen Codebasis.
• Schnelle Entwicklung: Sofortiges Anzeigen von Änderungen mit der Hot-Reload-Funktion.
• Umfangreiche Widget-Bibliothek: Vorgefertigte, anpassbare UI-Komponenten.
• Native Leistung: Leistung, die dank kompiliertem Code nahezu nativen Anwendungen entspricht.
• Open Source: Ein kostenloses Open-Source-Framework, das von der Entwickler-Community unterstützt wird.

Welche Vorteile bietet Flutter?

Flutter bietet viele Vorteile, die den Prozess der mobilen Anwendungsentwicklung erheblich verbessern:

• Schneller Entwicklungsprozess: Dank der Hot-Reload-Funktion können Sie Codeänderungen sofort in der Anwendung sehen. Dies beschleunigt das Debuggen und das UI-Design.
• Eine Codebasis: Reduziert die Entwicklungskosten und verkürzt die Entwicklungszeit, indem eine einzige Codebasis sowohl für iOS als auch für Android verwendet wird.
• Native Leistung: Flutter wird mit der Dart-Sprache direkt in Maschinencode kompiliert. Dies stellt sicher, dass Anwendungen eine Leistung erbringen, die nahezu nativen Anwendungen entspricht.
• Umfangreicher Widget-Katalog: Flutter bietet anpassbare Widgets, die für verschiedene Designsprachen wie Material Design und Cupertino (iOS-Stil) geeignet sind.
• Flexible UI: Sie können auf einfache Weise komplexe und animierte UIs erstellen. Die geschichtete Architektur von Flutter erleichtert das Anpassen und Verwalten von UIs.
• Starke Community-Unterstützung: Flutter verfügt über eine große und aktive Entwickler-Community, die von Google unterstützt wird. Dies erleichtert das Finden von Lösungen für Probleme und das Erlernen neuer Fähigkeiten.

Beispiel aus dem echten Leben:

Ein E-Commerce-Unternehmen wollte eine neue mobile Anwendung entwickeln, die gleichzeitig auf iOS- und Android-Plattformen veröffentlicht werden sollte. Durch die Verwendung von Flutter konnte das Unternehmen mit einem einzigen Entwicklungsteam Anwendungen für beide Plattformen entwickeln. Dank der Hot-Reload-Funktion wurden UI-Änderungen und Debugging-Prozesse erheblich beschleunigt. Infolgedessen wurde die Anwendung in kürzerer Zeit als geplant und zu geringeren Kosten fertiggestellt.

Was unterscheidet Flutter von anderen plattformübergreifenden Entwicklungsframeworks (React Native, Xamarin)?

Flutter unterscheidet sich von anderen plattformübergreifenden Entwicklungsframeworks (wie React Native und Xamarin). Die Hauptunterschiede sind:

• Architektur: Flutter funktioniert, indem es Widgets direkt auf die Leinwand zeichnet. Dies bietet eine bessere Leistung und mehr Anpassungsmöglichkeiten. React Native verwendet hingegen native UI-Komponenten, was zu Leistungsproblemen und plattformspezifischen Fehlern führen kann.
• Sprache: Flutter verwendet die Dart-Sprache. Dart ist eine für die UI-Entwicklung optimierte Sprache. React Native verwendet JavaScript.
• Leistung: Flutter bietet dank AOT-Kompilierung (Ahead-of-Time) eine bessere Leistung. React Native verwendet JIT-Kompilierung (Just-in-Time), was anfänglich zu einer langsameren Leistung führen kann.
• Widgets: Flutter bietet ein eigenes Widget-Set. Diese Widgets sorgen für ein einheitliches Erscheinungsbild auf jeder Plattform. React Native verwendet native UI-Komponenten, was zu Unterschieden zwischen den Plattformen führen kann.

Vergleichstabelle:

Wie wird Flutter installiert?

Befolgen Sie die folgenden Schritte, um Flutter zu installieren:

1. Flutter SDK herunterladen: Laden Sie das für Ihr Betriebssystem geeignete SDK von der offiziellen Flutter-Website herunter.
2. SDK extrahieren: Extrahieren Sie die heruntergeladene ZIP-Datei an einen geeigneten Speicherort (z. B. C:\src\flutter).
3. Umgebungsvariablen festlegen:
   • Fügen Sie das Verzeichnis "flutter/bin" zur Umgebungsvariable PATH hinzu.
   • Gehen Sie unter Windows zu "Systemsteuerung" -> "System und Sicherheit" -> "System" -> "Erweiterte Systemeinstellungen" -> "Umgebungsvariablen".
   • Suchen Sie im Abschnitt "Systemvariablen" die Variable "Path" und bearbeiten Sie sie.
   • Klicken Sie auf die Schaltfläche "Neu" und fügen Sie das Verzeichnis "flutter/bin" hinzu.
4. Flutter Doctor ausführen: Öffnen Sie die Befehlszeile und führen Sie den Befehl flutter doctor aus. Dieser Befehl prüft, ob Flutter korrekt installiert ist und die erforderlichen Abhängigkeiten installiert sind.
5. Erforderliche Abhängigkeiten installieren: Wenn der Flutter-Doctor-Bericht fehlende Abhängigkeiten enthält, installieren Sie diese (z. B. Android Studio, Xcode).
6. Editor installieren: Installieren Sie einen Editor wie Visual Studio Code oder Android Studio und installieren Sie das Flutter-Plugin.

Schritt-für-Schritt-Anleitung (für Visual Studio Code):

1. Öffnen Sie Visual Studio Code.
2. Gehen Sie zum Tab "Extensions" (Erweiterungen).
3. Suchen Sie nach der Erweiterung "Flutter" und installieren Sie sie.
4. Suchen Sie nach der Erweiterung "Dart" und installieren Sie sie.
5. Um ein neues Flutter-Projekt zu erstellen, gehen Sie zu "View" -> "Command Palette..." (Ctrl+Shift+P) und führen Sie den Befehl "Flutter: New Project" aus.

Was sind die grundlegenden Widgets in Flutter und wie werden sie verwendet?

Flutter verwendet Widgets, um die Benutzeroberfläche zu erstellen. Alles ist ein Widget: Texte, Schaltflächen, Layouts, sogar die Anwendung selbst. Hier sind einige grundlegende Widgets und ihre Verwendung:

• Text: Wird verwendet, um Text auf dem Bildschirm anzuzeigen.

Text('Hallo Welt!');
  

• ElevatedButton: Bietet dem Benutzer eine anklickbare Schaltfläche.

ElevatedButton(
  onPressed: () {
    print('Schaltfläche wurde angeklickt!');
  },
  child: Text('Klick mich!'),
);
  

• Container: Wird verwendet, um andere Widgets einzuschließen, zu dimensionieren, zu färben und zu formen.

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  child: Center(
    child: Text(
      'Text in der Box',
      style: TextStyle(color: Colors.white),
    ),
  ),
);
  

• Row und Column: Werden verwendet, um Widgets horizontal (Row) oder vertikal (Column) anzuordnen.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Text('Widget 1'),
    Text('Widget 2'),
    Text('Widget 3'),
  ],
);

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Widget 1'),
    Text('Widget 2'),
    Text('Widget 3'),
  ],
);
  

• Image: Wird verwendet, um Bilder auf dem Bildschirm anzuzeigen.

Image.network('https://via.placeholder.com/150');
  

Wichtiger Hinweis: In Flutter wird jedes Widget über die "child"- oder "children"-Eigenschaft des vorherigen Widgets platziert. Dies erzeugt den Widget-Baum.

Wie funktioniert State-Management in Flutter?

State-Management (Zustandsverwaltung) bezieht sich darauf, wie die Daten einer Anwendung gespeichert, aktualisiert und an verschiedene Teile der Anwendung übertragen werden. In Flutter gibt es viele verschiedene State-Management-Lösungen. Hier sind einige beliebte Ansätze:

• setState: Ist die einfachste State-Management-Methode. Wird verwendet, um den Zustand eines Widgets zu ändern. In großen Anwendungen kann die Verwaltung jedoch schwierig werden.

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('State-Management'),
      ),
      body: Center(
        child: Text('Zähler: $_counter'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}
  

• Provider: Ist eine einfache und flexible State-Management-Lösung. Wird verwendet, um Daten für verschiedene Teile der Anwendung bereitzustellen.
• Riverpod: Ist eine fortschrittlichere Version von Provider. Bietet Typsicherheit zur Kompilierzeit und bessere Testbarkeit.
• Bloc/Cubit: Ist für komplexere Anwendungen geeignet. Verwaltet den Zustand über Ereignisse und Zustände.
• Redux: Bietet einen unidirektionalen Datenfluss und vorhersehbare Zustandsänderungen.

Vergleich von State-Management-Lösungen:

Fallstudie:

Bei der Entwicklung einer großen Social-Media-Anwendung war es notwendig, die Benutzerdaten zu verwalten, die zwischen den verschiedenen Teilen der Anwendung ausgetauscht werden. Mithilfe der Bloc/Cubit-Architektur wurden die Benutzerdaten in einem "UserBloc" gespeichert und aktualisiert. Die verschiedenen Teile der Anwendung abonnierten diesen Bloc, um Änderungen an den Benutzerdaten zu verfolgen und ihre Benutzeroberflächen entsprechend zu aktualisieren. Dies machte die State-Verwaltung der Anwendung übersichtlicher und skalierbarer.

Wie führt man asynchrone Programmierung in Flutter durch?

Asynchrone Programmierung ermöglicht es, mit anderen Operationen fortzufahren, ohne auf den Abschluss einer Operation zu warten. Dies verhindert das Einfrieren der Benutzeroberfläche und sorgt dafür, dass die Anwendung reaktionsschneller ist. In Flutter werden die Schlüsselwörter async und await sowie die Klassen Future und Stream für die asynchrone Programmierung verwendet.

• Future: Repräsentiert einen Wert, der in der Zukunft abgeschlossen wird. Beispielsweise kann eine Operation zum Abrufen von Daten von einer API ein Future zurückgeben.

Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2)); // 2 Sekunden warten
  return 'Daten sind da!';
}

void main() async {
  print('Warte auf Daten...');
  String data = await fetchData();
  print(data); // Gibt "Daten sind da!" aus
}
  

• Stream: Repräsentiert einen Datenstrom, der im Laufe der Zeit mehrere Werte erzeugt. Beispielsweise kann ein kontinuierlicher Datenstrom von einem Sensor ein Stream sein.

Stream<int> countNumbers() async* {
  for (int i = 1; i <= 5; i++) {
    await Future.delayed(Duration(seconds: 1));
    yield i; // Wert erzeugen
  }
}

void main() async {
  countNumbers().listen((number) {
    print('Zahl: $number');
  });
}
  

Wichtige Punkte:

• Das Schlüsselwort async gibt an, dass eine Funktion asynchron ist.
• Das Schlüsselwort await wartet auf den Abschluss eines Future und gibt das Ergebnis zurück.
• Das Widget StreamBuilder wird verwendet, um Daten von einem Stream abzuhören und die Benutzeroberfläche zu aktualisieren.

Visuelle Beschreibung (Textuell):

Ein Schema für einen asynchronen Prozess könnte wie folgt aussehen: Ein Benutzer klickt auf eine Schaltfläche (Ereignis). Dies löst eine asynchrone Funktion aus. Die asynchrone Funktion sendet eine Anfrage an eine API und wartet auf die Antwort (Future). In der Zwischenzeit friert die Benutzeroberfläche nicht ein und der Benutzer kann weiterhin interagieren. Wenn die Antwort von der API eintrifft, wird das Future abgeschlossen und die Benutzeroberfläche wird aktualisiert.