ورود و عضویت
0
سبد خرید شما خالی است
0
سبد خرید شما خالی است

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

4 دیدگاه
فلاتر
5 دقیقه برای مطالعه
ساخت splash screen

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

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

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

اهمیت اسپلش اسکرین Splash Screen

اسپلش اسکرین‌ها معمولاً برای ایجاد یک تجربه کاربری بهتر استفاده می‌شوند. آنها می‌توانند به کاربران کمک کنند تا برنامه را شناسایی کنند و انتظارات خود را از برنامه تنظیم کنند.

اسپلش اسکرین‌ها همچنین می‌توانند برای نمایش پیشرفت برنامه در حال اجرا استفاده شوند. به عنوان مثال، یک اسپلش اسکرین می‌تواند درصد بارگذاری برنامه را نمایش دهد.

اهمیت استفاده از splash screen در برنامه‌های موبایل به چند نکته برمی‌گردد:

  1. نمایش برند:
    • اولین تعامل کاربر با برنامه اغلب از طریق splash screen است. نمایش لوگو یا نام برنامه در این صفحه ابتدایی، به کاربران اجازه می‌دهد با برند و شناخت برنامه آشنا شوند.
  2. بارگذاری اولیه:
    • بسیاری از برنامه‌ها برای بارگذاری اولیه مواردی نیاز دارند که زمان بر است. Splash screen به عنوان یک ایده برنامه، زمانی را برای برنامه فراهم می‌کند تا منابع مورد نیاز را بارگذاری کند.
  3. تجربه کاربری:
    • Splash screen به کاربران اطلاع می‌دهد که برنامه در حال بارگذاری است و در حال آماده‌سازی برای استفاده می‌باشد. این امر ممکن است احساس روانی و بهتری را برای کاربران ایجاد کند تا اینکه به طور مستقیم وارد برنامه شوند.

طراحی اسپلش اسکرین در فلاتر

در فلاتر که یک فریمورک برنامه نویسی برای سیستم عامل های اندروید و iOS میباشد نیز میتوانید به راحتی قابلیت اسپلش اسکرین را پیاده سازی کنید.

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

 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),
        ),
      ),
    );
  }
}

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

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

در مرحله بعد یک تایمر قرار میدهیم که مدت زمان 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 استفاده کرده ایم تا برنامه به شکل عادی اجرا شود.

در صورت علاقه میتوانید از آموزش پروژه محور فلاتر استفاده نمایید.

4 پاسخ به “آموزش ساخت Splash Screen در فلاتر”

  1. amin گفت:

    سلام ممنون از آموزش های خوبتون
    آیا میشه دایره ای که وسط صفحه میاد رو از دید کاربر پنهان کرد ؟

    • Hesam گفت:

      بله اینجا از CircularProgressIndicator استفاده شده شما میتونید حذف کنید یا هر ویجت دیگه ای میخواید قرار بدید.

  2. شهرزاد گفت:

    سلام ببخشید ما باید کجا این کلاس اسپلش اسکرین رو فراخوانی کنیم تا اجرا بشه ؟

    • Hesam گفت:

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Hesam
08 آوریل 2019
آموزش فارسی فلاتر
آموزش فارسی flutter