Creare uno splash screen in Flutter con another_flutter_splash_screen

Per creare uno splash screen in Flutter abbiamo diverse librerie.

Tra le varie io ho deciso di usare another_flutter_splash_screen, che mi è sembrata di gran lunga la più facile., ed inoltre è compatibile anche con i sistemi desktop.

Per l'installazione:

flutter pub add another_flutter_splash_screen

Dopo di che ho creato una cartella assets/icons dove ho messo l'immagine.

Nel pubspec.yaml ho aggiunto queste righe:

flutter:
  uses-material-design: true
  assets:
    - assets/
    - assets/icons/

Poi ho creato un widget apposito con questo dentro:

import 'package:another_flutter_splash_screen/another_flutter_splash_screen.dart';
import 'package:climbfood_app/pages/home.dart';
import 'package:flutter/material.dart';

class SplashScreen extends StatelessWidget {
  const SplashScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return FlutterSplashScreen.fadeIn(
      // duration: const Duration(seconds: 2),
      backgroundColor: Colors.white,
      // onInit: () {
      //   debugPrint("On Init");
      // },
      // onEnd: () {
      //   debugPrint("On End");
      // },
      childWidget: SizedBox(
        height: 200,
        width: 200,
        child: Image.asset("assets/icons/icon.png"),
      ),
      // onAnimationEnd: () => debugPrint("On Fade In End"),
      nextScreen: const HomePage(),
    );
  }
}

L'opzione nextScreen indica quale sarà la screen caricata appena chiuso lo splash.

Infine dobbiamo indicare la home nel nostro main; nel mio caso:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.lightBlueAccent),
        useMaterial3: true,
        textTheme: GoogleFonts.robotoMonoTextTheme(),
      ),
      initialRoute: '/',
      routes: {
        '/': (ctx) => SplashScreen(),
      },
    );
  }
}

Enjoy!