Jak stworzyć animację przycisku za pomocą Flare in Flutter? Część 3: Implementacja animacji w projekcie Flutter

Cześć wszystkim!

W dzisiejszym artykule będziemy kontynuować serię, w której przechodzimy przez proces tworzenia animacji we Flutter przy użyciu Flary. Ta seria jest podzielona na trzy części, które możesz sprawdzić tutaj:

  • Część 1: Utwórz pierwszą animację!
  • Część 2: Animacje z TrimPath
  • Część 3: Implementacja animacji w projekcie Flutter

To jest ostatnia część. W tym artykule przejdziemy przez ostatni krok: zintegrowanie animacji z naszym projektem Flutter, aby osiągnąć ten wynik:

Jeśli nie czytałeś poprzednich artykułów, możesz przeczytać je wszystkie (zachęcam!) Lub możesz rozwidlić ten projekt Flare i zacząć od tego momentu.

Krok 1: Utwórz projekt Flutter

Zaczniemy od pustego projektu Flutter. Możesz pominąć ten krok, jeśli zintegrujesz animację z istniejącą aplikacją. Jeśli go nie masz, wykonaj następujące kroki z przewodnika na stronie Flutter.

Krok 2: Dodaj pakiet flare_flutter

Aby mieć możliwość używania rozszerzenia w projekcie Flutter, musisz dodać odpowiednią bibliotekę. Ta biblioteka nazywa się flare_flutter i można ją sprawdzić na stronie pakietów pubów. Tutaj znajdziesz również instrukcje dotyczące instalacji i korzystania z niego. Zasadniczo wszystko, co musisz zrobić, to:

a) Dodaj to do pliku pubspec.yaml:

zależności:
  fllare_flutter: ^ 1.5.0

b) Uruchom pakiety trzepotania, aby zaktualizować pakiety w swoim projekcie.

Teraz jesteś gotowy do użycia!

Krok 3: Dodaj kod animacji

Kiedy mamy gotową bibliotekę, możemy uruchomić z faktyczną częścią tego artykułu: kodowaniem. Zaczniemy od zmodyfikowania pliku main.dart:

import 'package: flare_flutter / flare_actor.dart';
import „package: flutter / material.dart”;

void main () => runApp (FlareButtonApp ());

klasa FlareButtonApp rozszerza StatefulWidget {
  @nadpisanie
  _FlareButtonAppState createState () => _FlareButtonAppState ();
}

klasa _FlareButtonAppState rozszerza stan  {
  @nadpisanie
  Kompilacja widgetów (kontekst BuildContext) {
    zwróć MaterialApp (
      strona główna: rusztowanie (
        body: Center (
          dziecko: SizedBox (
            szerokość: 500,
            wysokość: 75,
            dziecko: FlareActor (
              „asset / Button.flr”,
              animacja: „Ładowanie”,
              fit: BoxFit.fitWidth,
            ),
          ),
        ),
      ),
    );
  }
}

Najciekawszym widżetem tutaj jest FlareActor. Ten widget jest odpowiedzialny za wyświetlanie animacji. Jak widać, umieściłem ten widget w widżecie SizedBox - zrobiłem to, aby upewnić się, że rozmiar mojego widgetu będzie wynosił dokładnie 500 x 75 pikseli.

FlareActor ma kilka parametrów. Pierwszy, „asset / Button.flr”, to ścieżka do naszej animacji. Aby działało, musimy wyeksportować nasz plik Flare i umieścić ten plik w zasobach:

Krok 3.1: Dodaj zasób Flare

Aby dodać zasób Flare, musisz otworzyć plik Flare (taki jak ten), naciśnij ikonę Eksportuj po prawej stronie, wybierz Eksportuj i potwierdź go. Wygenerowany plik będzie miał rozszerzenie * .flr i musisz go umieścić w folderze projektu Flutter. W moim przypadku są to zasoby w katalogu głównym projektu:

Aby ten plik był widoczny dla Fluttera, musisz zadeklarować folder zasobów w pliku pubspec.yaml:

trzepotanie:
  majątek:
    - majątek/

I to wszystko! Wróćmy teraz do widżetu FlareActor.

Krok 3: Dodaj kod animacji (kontynuacja)

Kolejnym parametrem w widżecie FlareActor jest animacja: „Ładowanie”. Tak nazywa się nasza animacja. Możesz zmienić nazwę animacji w projekcie Flare, z menu po lewej stronie widocznego po przejściu na zakładkę Animacja:

Następny parametr jest odpowiedni: BoxFit.fitWidth, który opisuje sposób wyświetlania animacji (podobnie jak w przypadku obrazów), w tym przypadku chcielibyśmy upewnić się, że pełna szerokość jest widoczna.

Otóż ​​to! Możesz uruchomić aplikację i sprawdzić animację! W tej chwili powinno to wyglądać tak:

Ale jest więcej…

Bonus: dodawanie animacji bezczynności i restartowania

Jeśli widziałeś animację od początku artykułu, możesz zauważyć, że była nieco inna. Dzieje się tak, ponieważ możemy dodać wiele animacji w projekcie Flare, aby mieć wiele stanów naszych obiektów Flare. A teraz mamy tylko jeden stan (Ładowanie).

Do pliku dodałem tutaj brakujące stany. Możesz zauważyć, że są jeszcze dwie animacje: Bezczynność i Uruchom ponownie. Pierwszy nie jest tak naprawdę animacją, a raczej początkowym stanem przycisku. Drugi to animacja, która dzieje się po kliknięciu przycisku.

Aby działały, musisz dodać kilka wierszy w kodzie, który przedstawiłem powyżej:

klasa _FlareButtonAppState rozszerza stan  {
  Ciąg _animationName = 'Bezczynny';

  @nadpisanie
  Kompilacja widgetów (kontekst BuildContext) {
    zwróć MaterialApp (
      strona główna: rusztowanie (
        body: Center (
          dziecko: SizedBox (
            szerokość: 500,
            wysokość: 75,
            dziecko: GestureDetector (
              onTap: _onButtonTap,
              dziecko: FlareActor (
                „asset / Button.flr”,
                animacja: _animationName,
                fit: BoxFit.fitWidth,
              ),
            ),
          ),
        ),
      ),
    );
  }

  void _onButtonTap () {
    setState (() {
      if (_animationName == „Bezczynność” || _animationName == „Uruchom ponownie”) {
        _animationName = 'Ładowanie';
      } else {
        _animationName = 'Restart';
      }
    });
  }
}

Voilà! Teraz nasza animacja działa jak urok:

Możesz sprawdzić ten projekt Flare tutaj na 2dimensions.com.

Możesz również sprawdzić kod repozytorium z dzisiejszego artykułu tutaj:

Podsumowanie

To wszystko! To koniec tej serii. Przez wszystkie artykuły zakończyliśmy pełny proces tworzenia fantazyjnej animacji za pomocą Flare i integracji tej animacji z projektem Flutter. Jeśli chcesz sprawdzić poprzednie posty, możesz to zrobić tutaj:

  • Część 1: Utwórz pierwszą animację!
  • Część 2: Animacje z TrimPath
  • Część 3: Implementacja animacji w projekcie Flutter

Dziękujemy za przeczytanie, komentarze i opinie! Jeśli podobał Ci się ten artykuł, nie wahaj się go klaskać!