So implementieren Sie CircularRevealAnimation als Flutter-Widget und veröffentlichen es unterwegs auf pub.dev

In Android gibt es eine sehr interessante Animation namens CircularRevealAnimation. Das Flattern mit zahlreichen Animationsmöglichkeiten bietet diese Animation nicht sofort.

In diesem Artikel beschreibe ich, wie Sie diese Animation mit dem Flutter SDK implementieren und die Bibliothek auf pub.dev veröffentlichen, um den Zugriff und die Verteilung zu vereinfachen.

Animationsimplementierung

Alles ist ein Widget in Flutter. Und Animationen sind keine Ausnahme. Aus diesem Grund müssen wir StatelessWidget erstellen und erweitern.

Die Animationssteuerung (Start, Pause, Stopp usw.) wird von AnimationController gesteuert. Um AnimationController zu erstellen, müssen wir StatefulWidget erweitern und State eine spezielle Klasse SingleTickerProviderStateMixin hinzufügen.

Unsere Klasse CircularRevealAnimation wird die Animation nicht selbst steuern. Sie erhält Animation als erforderlichen Konstruktorparameter. Aus diesem Grund muss StatefulWidget nicht erweitert werden. Dies wird durchgeführt, um CircularRevealAnimation mit anderen Animationen zu kombinieren, die denselben AnimationController verwenden. Zum Beispiel zum Kombinieren einer kreisförmigen Enthüllungsanimation mit einer Deckkraftanimation.

Ein weiterer wichtiger Konstruktorparameter CircularRevealAnimation ist child, das animiert wird (erscheint oder verschwindet). Im Allgemeinen haben viele Widgets in Flutter einen Child-Parameter. Mit diesen Widgets können Sie das Verhalten, die Zeichnung oder die Position des untergeordneten Widgets ändern. Oder um eine Animation hinzuzufügen, wie es CircularRevealAnimation tut.

Um die Animation zu definieren, benötigen wir außerdem Parameter wie das Enthüllungszentrum und einen minimalen und maximalen Radius der Enthüllung. Diese Parameter sind nicht erforderlich und können null sein. In diesem Fall werden Standardwerte verwendet. Das Standard-Enthüllungszentrum ist das Widget-Zentrum. Der voreingestellte Mindestradius ist Null. Der voreingestellte maximale Radius ist der Abstand vom Enthüllungszentrum zum Scheitelpunkt des weiteren Widgets.

Der Algorithmus zur Berechnung des maximalen Radius lautet standardmäßig wie folgt. Berechnen Sie zunächst den Abstand horizontal und vertikal von der Mitte bis zum Scheitelpunkt, der am weitesten von der Mitte der Laibung entfernt ist, und berechnen Sie dann die Diagonale mithilfe des Satzes von Pythagoras.

statisch doppelt calcMaxRadius (Größe Größe, Offset Mitte) {
  endgültiges w = max (center.dx, size.width - center.dx);
  final h = max (center.dy, size.height - center.dy);
  return sqrt (w * w + h * h);
}

Jetzt müssen wir das Ausschneiden des untergeordneten Widgets innerhalb des Kreises während des Zeichnens implementieren. Die Klasse ClipPath hilft uns dabei. ClipPath ermöglicht das Ausschneiden von Widgets in einer beliebigen Vorlage. Parameter dieses Widgets sind clipper (etwas später) und child - das Widget, das abgeschnitten werden muss.

Der Parameter clipper von ClipPath definiert die Art und Weise, wie das untergeordnete Widget abgeschnitten wird. Um unsere eigene Schnittvorlage zu definieren, erstellen wir CircularRevealClipper, erweitern CustomClipper und überschreiben die Methode Path getClip (Size size). Diese Methode gibt Path zurück, der den Schnittbereich definiert. In unserem Fall ist dieser Bereich ein Kreis mit einem bestimmten Mittelpunkt. Um den Radius des Kreises zu berechnen, müssen wir den aktuellen Wert der Animation kennen. Dieser Wert wird als Bruchparameter an CircularRevealClipper übergeben. Die Berechnung des Radius eines Kreises erfolgt durch lineare Interpolation zwischen dem minimalen und dem maximalen Radius.

Danach können wir CircularRevealAnimation implementieren. Um eine Animation zu erstellen, ist es nützlich, AnimatedBuilder zu verwenden. AnimatedBuilder verwendet Animation und Builder, um ein untergeordnetes Widget unter Berücksichtigung des aktuellen Animationswerts zu erstellen. Im Builder erstellen wir ClipPath und übergeben den aktuellen Animationswert (Bruch) an CircularRevealClipper.

Klasse CircularRevealAnimation erweitert StatelessWidget {
  ...
@override
  Widget-Erstellung (BuildContext-Kontext) {
    return AnimatedBuilder (
      Animation: Animation,
      Generator: (BuildContext-Kontext, Widget _) {
        ClipPath zurückgeben (
          clipper: CircularRevealClipper (
            Bruch: animation.value,
            Zentrum: Zentrum,
            minRadius: minRadius,
            maxRadius: maxRadius,
          ),
          Kind: this.child,
        );
      },
    );
  }
}

Damit ist die Erstellung von CircularRevealAnimation abgeschlossen. Um es zu verwenden, müssen wir StatefulWidget, AnimationController erstellen und AnimationController an CircularRevealAnimation übergeben. Im Wesentlichen mit Beispiel.

Demo-App auf GitHub.

Eine Bibliothek erstellen

Um eine Dart- oder Flutter-Bibliothek zu erstellen, müssen Sie die Datei pubspec.yaml demselben Verzeichnis hinzufügen, in dem sich der Ordner lib mit den Dart-Dateien befindet. Diese Datei enthält die Beschreibung der Bibliothek sowie Informationen zu Autoren und Abhängigkeiten.

Es wird empfohlen, eine separate Datei zu erstellen, um die öffentliche API zu definieren. Diese Datei befindet sich im Ordner lib und enthält den Namen und die Liste der Dateien der Bibliothek, die in die öffentliche API aufgenommen werden müssen. Alle anderen .dart-Dateien werden im Verzeichnis src abgelegt. Auf diese Weise können wir die gesamte Bibliothek mit einem einzigen Importausdruck importieren und Dateien ausblenden, die nicht in der öffentlichen API enthalten sind. Inhalt dieser Datei:

bibliothek rundschreiben_reveal_animation;
export 'package: circular_reveal_animation / src / circular_reveal_animation.dart';

Weitere Informationen zum Erstellen von Dart-Bibliotheken finden Sie hier.

Veröffentlichung zu pub.dev

Es ist sehr einfach, die Dart-Bibliothek in pub.dev zu veröffentlichen. Alles, was Sie tun müssen, ist Flutter-Pakete aus dem Stammverzeichnis Ihrer Bibliothek auszuführen. Die Veröffentlichung erfolgt im Auftrag des Google-Kontos. Aus diesem Grund müssen Sie während der Veröffentlichung einen bestimmten Link im Browser öffnen und sich bei Google anmelden. Später können Sie Bibliotheksaktualisierungen nur mit demselben Konto veröffentlichen, das zum Veröffentlichen der ersten Version verwendet wurde.

Vor der Veröffentlichung wird empfohlen, die Korrektheit der Bibliothek mit Hilfe der Flutter-Pakete pub publish --dry-run zu überprüfen.

Nach Ausführung der Flutter-Pakete pub publish steht die Bibliothek sofort unter pub.dev zur Verfügung. Und, wie in der Dokumentation geschrieben, "Publishing ist für immer" - später können Sie nur neue Versionen hochladen. Alte Versionen werden ebenfalls verfügbar sein.

Obwohl die Veröffentlichung der Bibliothek einfach aussieht, kann sie auch Fallstricke haben. Beispielsweise wurden mir beim Veröffentlichen der ersten Version von circular_reveal_animation mehrere Punkte in der Bewertung vorenthalten, weil die Bibliotheksbeschreibung zu kurz war (in pubspec.yaml).

Weitere Informationen zum Veröffentlichen von Dart-Bibliotheken finden Sie hier.

Schließlich die Bibliothek circular_reveal_animation auf pub.dev und github.com.

Update: In Version 1.0.6 wurde ein Beispiel für Flatterdialoge hinzugefügt.