Flutter AnimatedSize DeepDive - Analyzing Widget (German Version)

Heute schauen wir uns mal an, wie das AnimatedSize Widget funktioniert und welche Properties es hat. Nachdem du diesen Post gelesen hast, solltest du das AnimatedSize Widget anwenden können und fähig sein, es in deine eigene App zu implementieren.

Ich wünsche dir viel Spaß beim Lesen und in diesem Sinne: Happy Reading!

Wozu ist das AnimatedSize Widget da?

Natürlich wollen wir erstmal die Frage klären, wozu das Animated Size Widget überhaupt da ist. Diese Frage ist sehr leicht beantwortet und ich zeige dir auch gleich ein Beispiel, wie solch ein Widget aussehen könnte.

Wenn dein Widget, welches in dem AnimatedSize Widget ist, die Größe verändert, sei es horizontal oder vertikal, stellst du sicher, dass der Übergang nicht abrupt geschieht, sondern ein schöner Übergang geschieht.

Hier ist ein Beispiel, wie es ohne und mit AnimatedSize Widget aussehen könnte:

Ohne AnimatedSize

Mit AnimatedSize

Okay, nun sollte dir klar sein, dass AnimatedSize ein Widget mit viel Power ist.
Nun wollen wir uns mal anschauen, wie wir dieses Widget in unsere App implementieren.

Implementation des Widgets

Das AnimatedSize Widget zu implementieren ist viel einfacher als du vielleicht denkst.
Als erstes wrappen wir unser Widget mit dem AnimatedSize Widget.

Dies könnte dann so aussehen:

// Eine height Variable erstellen
double height = 100;

//Irgendwo im Widget build:
AnimatedSize(
    //Setzt die Dauer der Animation zwischen zwei Größen
    duration: Duration(seconds: 2),
    child: GestureDetector(
        //Indem wir auf unseren Container klicken, verändern wir die Size (In diesem Fall die Höhe immer um 50)
        onTap: () {
            setState(() {
                height += 50;
            });
        },
        child: Container(
            color: Colors.blue,
            height: height,
            width: 100, //Width bleibt die ganze Zeit gleich
        ),
    ),
),

`
Dies würde jetzt so aussehen:

Das war es auch schon und du hast dein eigenes AnimatedSize Widget! Glückwunsch!

Jetzt kann es aber sein, dass du nicht nur eine Duration und ein Child hinzufügen willst, sondern auch noch ein paar andere Dinge.

Deshalb wollen wir uns jetzt mal anschauen, welche Properties das Widget hat.

Fortgeschrittene Anwendung des Widgets

Das AnimatedSize Widget hat insgesamt 6 Properties. Zwei davon haben wir uns schon angeschaut. Einmal "child" und einem "duration".

Nochmal kurz zum auffrischen:

child - Child ist das Widget, welches animiert wird, wenn sich die Größe vom eigenen Widget (also dem child Widget) ändert. Es kann ein beliebiges Widget in dem child Widget Tree sein, welches die Größe ändert.

duration - Duration ist die Zeit, die das AnimatedSize Widget brauchen soll, um das child Widget zu animieren.

Jetzt schauen wir uns noch die anderen 4 Properties an:

curve - die curve Property ist dafür da, um zu bestimmen, wie das Widget animiert werden soll. Was meine ich mit "wie"? Nun, schau dir mal dieses Video an und vergleiche es mit unserem Codebeispiel von oben:

Das sieht schon anders aus, habe ich recht?

In diesem Fall habe ich Curves.bounceIn genommen, doch es gibt noch so viele weitere. Hier findest du alle Curves, die du dort verwenden kannst.

alignment - Mit der alignment Property kannst du steuern, wie das child Widget innerhalb des parent Widgets während der Animation ausgerichtet werden soll, wenn die Größe des parent Widgets noch nicht mit der Größe des childs übereinstimmt. Ich persönlich habe diese Property noch nie benutzt, aber für andere kann Sie sicherlich sehr hilfreich sein.

reverseDuration - Hiermit kannst du steuern, wie lange die Animationsdauer beim Anpassen der Größe des Child widgets sein soll, aber in umgekehrter Reihenfolge. Auch diese Property habe ich aus irgendeinem Grund noch nie genutzt 🤦

clipBehavior - clipBehavior steuert, ob der Content (das Child Widget) geclippt werden soll oder nicht. Eigentlich recht einfach, oder?

Wenn du nicht weißt, was clippen ist, dann findest du hier die Dokumentation zu Clips.

Fazit

AnimatedSize ist ein sehr mächtiges Flutter Widget, welches dir simple Animationen bietet, welche aber einen enormen Eindruck auf den Nutzer machen können, wenn sie richtig angewandt werden. Ich hoffe, ich konnte dir mit diesem Blogpost helfen und würde mich sehr freuen, wenn du ein diesen Post mit einem Gefällt mir bewertest! Ich kann dir natürlich auch sehr empfehlen, mir zu folgen, wenn du viele Flutter tips bekommem, Widgets ausführlich kennenlernen und Probleme in Flutter lösen willst! Es werden auch in Zukunft auch noch weitere Formate herauskommen, also sei gespannt!

Ich wünsche dir noch einen schönen Tag und viel Spaß beim Programmieren!