آموزش ساخت Splash Screen در فلاتر

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

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

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

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

 class SplashScreen extends StatefulWidget {

  @override
  State<statefulwidget> createState() {
    return SplashScreenState();
  }
}

class SplashScreenState extends State<splashscreen> {

  @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<color>(Colors.redAccent),
        ),
      ),
    );
  }
}

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

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

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

  loadData();
}

Future<timer> 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()));
}

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