Eine Einführung in die Grundlagen der Flutter-Animation

Es gibt zwei Arten von Animationen in Flutter. Das Implizite und das Explizite. Die implizite Animation bezieht sich auf eingebaute animierte Widgets. Außerdem sind sie einfacher als die explizite Animation.

Beginnen wir deshalb heute mit einer solchen impliziten Animation. Der AnimatedContainer.

Die Impliziten Animationen heißen übrigens wie das „Animated-Widget“. Der Begriff Widget steht in solchen Fällen für das nicht animierte Widget. Dies gilt auch für den AnimatedContainer.

Standardmäßig bezieht sich das Container-Widget in Flutter auf die Layout-Widgets.

Der AnimatedContainer ist jedoch eine animierte Version des Container-Widgets. Wenn der Container animiert ist, ändert er allmählich seine Werte über einen bestimmten Zeitraum.

Werfen wir einen Blick auf die Screenshots, bevor wir beginnen.

Der Code ist ganz einfach. Sogar Flutter-Anfänger können es verstehen.

Zunächst haben wir zwei AnimatedContainer-Widgets in einem Column-Widget platziert.

Tatsächlich benötigt der AnimatedContainer immer einen neuen Wert, damit er seinen alten Wert ändern kann. Wenn wir also die Breite, Höhe und Farbe des AnimatedContainer ändern möchten, müssen wir ihn in einem Stateful Widget platzieren.

Außerdem müssen wir innerhalb der Methode „setState()“ den booleschen Wert von „FALSE“ auf „TRUE“ ändern.

Werfen wir einen Blick auf das Code-Snippet. Wie ich bereits sagte, ist es sehr einfach.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Animated Container Example';

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

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selected = !selected;
        });
      },
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            MyAnimatedContainer(
              selected: selected,
              newDuration: const Duration(seconds: 2),
              src:
                  'https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455_960_720.jpg',
            ),
            const SizedBox(
              height: 10.0,
            ),
            MyAnimatedContainer(
              selected: selected,
              newDuration: const Duration(seconds: 10),
              src:
                  'https://cdn.pixabay.com/photo/2021/11/13/23/06/tree-6792528_960_720.jpg',
            ),
          ],
        ),
      ),
    );
  }
}

class MyAnimatedContainer extends StatelessWidget {
  const MyAnimatedContainer({
    Key? key,
    required this.selected,
    required this.newDuration,
    required this.src,
  }) : super(key: key);

  final bool selected;
  final Duration newDuration;
  final String src;

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      width: selected ? 200.0 : 100.0,
      height: selected ? 50.0 : 100.0,
      color: selected ? Colors.indigoAccent : Colors.yellowAccent,
      alignment: selected ? Alignment.center : AlignmentDirectional.topCenter,
      duration: newDuration,
      curve: Curves.fastOutSlowIn,
      child: Image.network(src),
    );
  }
}

Durch unseren benutzerdefinierten animierten Container haben wir drei Parameter übergeben.

Indem wir diese drei Parameter in zwei separaten animierten Containern geändert haben, haben wir jede Animation gesteuert.

children: [
            MyAnimatedContainer(
              selected: selected,
              newDuration: const Duration(seconds: 2),
              src:
                  'https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455_960_720.jpg',
            ),
            const SizedBox(
              height: 10.0,
            ),
            MyAnimatedContainer(
              selected: selected,
              newDuration: const Duration(seconds: 10),
              src:
                  'https://cdn.pixabay.com/photo/2021/11/13/23/06/tree-6792528_960_720.jpg',
            ),
          ],

In der Regel hat der AnimatedContainer einen erforderlichen Parameter – die „Dauer“.

Es kontrolliert die Zeit. Für den ersten benutzerdefinierten animierten Container haben wir es auf 2 Sekunden geschafft. Und für den zweiten benutzerdefinierten animierten Container sind es 10 Sekunden.

Wir hätten auch die Eigenschaft „Kurve“ steuern können. Denn die Parameter „duration“ und „curve“ dürfen nicht „NULL“ sein.

Wenn Eigenschaften „NULL“ sind, werden sie nicht animiert.

Wenn wir jetzt auf eines der Bilder klicken, werden zwei Bilder animiert.

Als Ergebnis beginnt der Container mit seinem internen AnimationController zu animieren.

Für komplexere Animationen hätten wir möglicherweise eine Unterklasse von AnimatedWidget verwendet. Wir können den DecoratedBoxTransition oder den AnimationController verwenden.

Was wirst du als nächstes lernen?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter