Splash up your App with Flutter

Splash up your App with Flutter

Splash Screens dienen dazu, einen User abzuholen und den Start einer App mit einem passenden Bild oder einer Lade-Animation zu verkürzen.

Auch wenn Flutter verdammt schnell ist, erscheint beim App-Start ein kurzer weißer Screen, der dazu führt, dass sich der User nicht abgeholt fühlt.

Hier ist es besser, ein kurzes Bild einzufügen, um den User zu zeigen, dass etwas passiert.

Am Einfachsten kann man das Problem mit folgender Erweiterung lösen:

Pub.dev Native Splash

Nach der Installation erweitert man seine pubsepc.yaml um die benötigten Informationen und legt das Bild als png im Assets Folder ab.

background_image: "assets/qatar-2022-logo-white-1-700x700.png"
android_gravity: fill
fullscreen: true

Nach dem Ausführen vom Befehl:

flutter pub run flutter_native_splash:create

Jetzt kann die App mit Splash Screen gestartet werden und das Ergebnis sieht dann so aus:

splashsreen_plain

Nun haben wir einen passenden, statischen Splash Screen.

Da muss doch aber mehr gehen und wir müssten diesen doch auch animieren können?

Um eine Animation einzubauen, benötigen wir eine andere Erweiterung:

Pub.dev - Animated Splash Screen

Die Erweiterung ist schnell und einfach installiert und lässt sich einfach in bestehende Anwendungen integrieren.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Clean Code',
        home: AnimatedSplashScreen(
          duration: 1000,
          splash: Icons.sports_soccer,
          nextScreen: MainScreen(),//MyHomePage(title: "Test it",),
          splashTransition: SplashTransition.rotationTransition,
          pageTransitionType: PageTransitionType.rightToLeftWithFade,
          backgroundColor: Colors.blue
        )
    );
  }
}

Hierbei ist zu beachten, dass scheinbar nicht alle PageTransitions sauber funktionieren, was man auch auf der GitHub Page nachlesen kann.

splashsreen_animation

Und so haben wir einfach und schnell unsere App um einen Splashscreen erweitert.