ساخت 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()));
}
درباره Hesam
حسام رسولیان هستم فارغ التحصیل رشته IT و موسس وبسایت فلاتر لرن - وبسایت شخصی: AtysCode.ir
نوشته های بیشتر از Hesam2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام ممنون از آموزش های خوبتون
آیا میشه دایره ای که وسط صفحه میاد رو از دید کاربر پنهان کرد ؟
بله اینجا از CircularProgressIndicator استفاده شده شما میتونید حذف کنید یا هر ویجت دیگه ای میخواید قرار بدید.