Das AnimatedBuilder-Tutorial

Wir können das Animated Builder Widget auf viele Arten verwenden. Zunächst müssen wir jedoch wissen, was der AnimatedBuilder ist. Außerdem, wie es funktioniert.

Wir haben bereits viele Beispiele für implizite Animationen gesehen.

Gehört der AnimatedBuilder zur selben Kategorie?

Wir müssen sie zuerst beantworten.

Beginnen wir also mit der ersten Frage. Wie funktioniert ein AnimatedBuilder?

Der AnimatedBuilder rendert auch nicht das animierte Widget. Es verwaltet auch nicht das Animationsobjekt.

Was ist dann seine Hauptfunktion?

Der AnimatedBuilder rendert den „Übergang“. Als Teil der „Build“-Methode beschreibt es, wie ein anderes Widget animiert wird.

Wir können zwei häufigste Beispiele für den AnimatedBuilder nennen. Das Scaffold-Widget und das TextField-Widget.

Daher können wir sagen, dass der AnimatedBuilder ein Allzweck-Widget zum Erstellen von Animationen ist.

Sehen wir uns als Beispiel eine einfache Instanz von AnimatedBuilder an.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Animated Rotation';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const RotationTransitionExample(),
      ),
    );
  }
}

class RotationTransitionExample extends StatefulWidget {
  const RotationTransitionExample({Key? key}) : super(key: key);

  @override
  State<RotationTransitionExample> createState() =>
      _RotationTransitionExampleState();
}

class _RotationTransitionExampleState extends State<RotationTransitionExample>
    with TickerProviderStateMixin {
  late final AnimationController _controller =
      AnimationController(vsync: this, duration: const Duration(seconds: 2))
        ..repeat();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (_, child) {
            return Transform.rotate(
              angle: _controller.value * 2 * math.pi,
              child: child,
            );
          },
          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'),
          ),
        ),
      ),
    );
  }
}

Der Animated Builder erbt vom AnimatedWidget. Das Animated Widget und seine Unterklasse wie der AnimatedBuilder nehmen ein explizites Listenable als Argument.

Dieses Listenable ist normalerweise eine Animation, die von einem AnimationController abgeleitet ist.

Anschließend muss der Lebenszyklus des AnimationControllers manuell verwaltet werden.

Wie wir es im obigen Code getan haben.

Wir haben den „Winkel“ des „Transform.rotate“-Konstruktors manuell bereitgestellt.

builder: (_, child) {
            return Transform.rotate(
              angle: _controller.value * 2 * math.pi,
...

Als Ergebnis beginnt es, das untergeordnete Widget-Bild zu drehen.

Im Gegensatz dazu erben alle Implicitly Animations vom ImplicitlyAnimatedWidget. Das ImplicitlyAnimatedWidget und seine Unterklassen verwalten automatisch ihren eigenen internen AnimationController.

Daher müssen wir die externe Animation nicht bereitstellen.

Wenn wir vorhaben, komplexere Widgets zu erstellen, ist der Animated Builder gut. Wir können das Widget konstruieren und an die „Builder“-Funktion übergeben.

Wenn wir jedoch wie oben auf ein einzelnes Widget für die Animation abzielen, sollte die implizite Animation die Wahl sein.

Den vollständigen Code finden Sie im jeweiligen GitHub repository.

Was nun?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter