ساخت Splash Screen در فلاتر

اسپلش اسکرین Splash Screen صفحه ای می گویند که موقع که باز کردن اپلیکیشن به مدت حدودا ۳ ثانیه اجرا میشه و سپس وارد صفحه اصلی برنامه میشویم.

Splash Screen معمولا برای برندینگ استفاده میشه و برای چند لحظه قبل از وارد شدن به اپلیکیشن لوگو خودتون و میتونید به کاربر نمایش دهید.

همچنین در Splash Screen میتونید اطلاعاتی که نیاز هست در ابتدا برای شروع از سرور بگیرید و در همین صفحه انجام دهید.

یک کلاس برای اسپلش اسکرین خودمون میسازیم.

 class SplashScreen extends StatefulWidget {

  @override
  State createState() {
    return SplashScreenState();
  }
}

class SplashScreenState extends State {

  @override
  void initState() {
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage('assets/splash.jpg'),
            fit: BoxFit.cover
        ) ,
      ),
      child: Center(
        child: CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation(Colors.redAccent),
        ),
      ),
    );
  }
}

کد بالا فقط یک صفحه برای ما ایجاد میکنه و هیچ کار خاص دیگه ای انجام نمیدهد.

در مرحله بعد یک تایمر قرار میدهیم که مدت زمان ۵ ثانیه صبر می کند و یک لودینگ را به همراه شمارش معکوس نمایش میدهد و بعد از پایان شمارش وارد صفحه جدید می شود.

 @override
void initState() {
  super.initState();

  loadData();
}

Future loadData() async {
  return new Timer(Duration(seconds: 5), onDoneLoading);
}

onDoneLoading() async {
  Navigator.of(context).push(MaterialPageRoute(builder: (context) => HomeScreen()));
}

با دستور Navigator.push() وارد صفحه جدید میشویم.

کدهای بالا به خوبی کار میکنند, اما اگر کاربر بروی دکمه بک گوشی کلیک بکنه

دوباره به صفحه splash screen برمیگردد که ما نمیخواهیم همچین اتفاقی رخ دهد.

برای رفع این مشکل از دستور pushReplacement استفاده می کنیم.

 onDoneLoading() async {
  Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => HomeScreen()));
}