Wie rotieren wir in Flutter?

Es klingt verrückt. Aber wir können jedes Widget in Flutter ganz einfach drehen. Tatsächlich machen ein paar Codezeilen die Magie.

Glaube es nicht?

Nun, lassen Sie es uns versuchen.

Als Beispiel drehen wir hier ein Bild. Natürlich können wir jedes andere Widget drehen.

Wir können dies auf zwei Arten tun. Entweder können wir ein Stateful Widget verwenden. Oder wir können das Provider-Paket verwenden, um den Zustand zu verwalten.

Jede Rotation erfordert eine Statusänderung. Deshalb müssen wir den Staat verwalten. Das ist unsere erste Anforderung.

Es ist ein weiteres Beispiel für implizite Animation.

Grundsätzlich gibt es zwei Arten von Animationen in Flutter. Das Implizite und das Explizite.

Die implizite Animation bezieht sich auf die eingebauten animierten Widgets. Außerdem sind sie einfacher als die explizite Animation.

Deshalb werden wir heute mit einer solchen impliziten Animation experimentieren. Wir haben in unserem vorherigen Abschnitt gesehen, wie wir ein Bild mit der AnimatedScale skalieren können.

Das animierte Rotations-Widget erledigt die Magie. Die animierte Rotation ist eine animierte Version von Transform.rotate. Dieser Konstruktor erstellt ein Widget, das sein untergeordnetes Widget gleichmäßig dreht.

Der innere Mechanismus ist etwas kompliziert. Wir können jedoch versuchen, es zu verstehen.

Mit dem Animated Rotation Widget können wir zwei Eigenschaften steuern.

Erstens können wir die Dauer bestimmen. Es kann für 1 Sekunde sein. Oder 2 Sekunden. Kann mehr oder weniger sein.

Zweitens können wir den Rotationswinkel bestimmen. Transform.rotate gibt die Drehung im Bogenmaß im Uhrzeigersinn an. Infolgedessen dreht sich das Bild-Widget als untergeordnetes Widget im Uhrzeigersinn.

Als Voraussetzung darf nun das Argument „Winkel“ nicht NULL sein.

Auch dieser „Winkel“ bezieht sich auf das Argument „Drehungen“ des AnimatedRotation-Widgets.

Was sehen wir, wenn wir uns die Definition des AnimatedRotation -Widgets ansehen?

Dieses Widget erbt Eigenschaften von ImplicitlyAnimatedWidget.

Außerdem dürfen die drei Argumente „turns“, „curve“ und „duration“ nicht NULL sein.

class AnimatedRotation extends ImplicitlyAnimatedWidget {
  /// Creates a widget that animates its rotation implicitly.
  ///
  /// The [turns] argument must not be null.
  /// The [curve] and [duration] arguments must not be null.
  const AnimatedRotation({
    Key? key,
    this.child,
    required this.turns,
    this.alignment = Alignment.center,
    this.filterQuality,
    Curve curve = Curves.linear,
    required Duration duration,
    VoidCallback? onEnd,
  }) : assert(turns != null),
        super(key: key, curve: curve, duration: duration, onEnd: onEnd);
....
/// this code is incomplete and for demonstration
/// to read full source code please visit Flutter's GitHub repository

Wie dreht man sich in Flutter um 360 Grad?

Warum 360 Grad? Wir können das Bild um jeden Grad drehen.

Beginnen wir mit 180 Grad. Dann können wir es mit 90 Grad versuchen.

Da wir das Provider-Paket verwenden, müssen wir zuerst die Abhängigkeiten hinzufügen.

dependencies:
  animations: ^2.0.2
  cupertino_icons: ^1.0.2
  flutter:
    sdk: flutter
  google_fonts: ^2.2.0
  material_design_icons_flutter: ^5.0.6595
  path: ^1.8.0
  provider: ^6.0.2
  sqflite: ^2.0.1

Wenn wir mit 180 Grad beginnen, müssen wir das in unserer Model-Klasse definieren.

class ChangeRotation with ChangeNotifier {
  double turns = 1.0;
  void changeRotation() {
    turns = turns += 1.0 / 2.0;
    notifyListeners();
  }
}

Danach können wir dieses „Wende“-Argument in unserem animierten Rotations-Widget bereitstellen.

Widget build(BuildContext context) {
    final ChangeRotation turns = Provider.of<ChangeRotation>(context);
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          child: const Text('turns Image'),
          onPressed: turns.changeRotation,
        ),
        Padding(
          padding: const EdgeInsets.all(50),
          child: AnimatedRotation(
            turns: turns.turns,
            duration: const Duration(seconds: 1),
            child: Center(
              child: Container(
                padding: const EdgeInsets.all(10),
                width: 250,
                height: 250,
                child: Image.network(
                    'https://cdn.pixabay.com/photo/2021/11/13/23/06/tree-6792528_960_720.jpg'),
              ),
            ),
          ),
        ),
      ],
    );
  }

Wir können sehen, dass die Argumente „turns“ und „duration“ nicht NULL sind.

Als Ergebnis sehen wir den Effekt im Bild.

Lassen Sie uns den Rotationswinkel in unserer Model-Klasse ändern. Damit dreht sich das Bild um 90 Grad.

class ChangeRotation with ChangeNotifier {
  double turns = 1.0;
  void changeRotation() {
    turns = turns += 1.0 / 4.0;
    notifyListeners();
  }
}

Dadurch dreht sich das Bild um 90 Grad.

Um das vollständige Code-Snippet zu erhalten, besuchen Sie bitte das entsprechende GitHub-Repository.

Dieses Beispiel einer animierten Rotation ist eine implizite Animation. Wir können jedoch explizit dasselbe tun. Dazu verwenden wir die RotationTransition.

Im nächsten Abschnitt werden wir darauf eingehen.

Also bleibt gespannt. Fröhliches Flattern!

Was nun?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter