آموزش ساخت Splash Screen در فلاتر
اسپلش اسکرین Splash Screen صفحه ای می گویند که موقع که باز کردن اپلیکیشن به مدت حدودا ۳ ثانیه اجرا میشه و سپس وارد صفحه اصلی برنامه میشویم.
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),
),
),
);
}
}
کد بالا فقط یک صفحه برای ما ایجاد میکنه و هیچ کار خاص دیگه ای انجام نمیدهد.
در مرحله بعد یک تایمر قرار میدهیم که مدت زمان ۵ ثانیه صبر می کند و یک لودینگ را به همراه شمارش معکوس نمایش میدهد و بعد از پایان شمارش برنامه وارد صفحه جدید می شود.
@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 استفاده کرده ایم تا برنامه به شکل عادی اجرا شود.
مطالب زیر را حتما مطالعه کنید
آموزش پیاده سازی لینت Lint در برنامه نویسی فلاتر
آموزش الگوی تزریق وابستگی در فلاتر Dependency Injection
کتاب های آموزش برنامه نویسی فلاتر + دانلود PDF
آموزش نصب فلاتر و رفع خطاهای رایج ساخت پروژه + ویدیو
آموزش استفاده از نقشه در فلاتر
آموزش ساخت Navigation Drawer در فلاتر
4 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام ممنون از آموزش های خوبتون
آیا میشه دایره ای که وسط صفحه میاد رو از دید کاربر پنهان کرد ؟
بله اینجا از CircularProgressIndicator استفاده شده شما میتونید حذف کنید یا هر ویجت دیگه ای میخواید قرار بدید.
سلام ببخشید ما باید کجا این کلاس اسپلش اسکرین رو فراخوانی کنیم تا اجرا بشه ؟
سلام
این اسپلش اسکرین اولین صفحه ای هست که هنگام باز شدن اپلیکیشن اجرا میشه پس ویجت اسپلش اسکرین رو باید داخل متد main یا هر ویجت دیگری که به عنوان ویجت اولیه انتخاب کردید قرار بدید.