Media Belajar Bahasa Pemrograman | by APPKEY

DartTutorial Dart 41 : Belajar Splash Screen Flutter Lengkap!

Tutorial Dart 41 : Belajar Splash Screen Flutter Lengkap!

-

Last Updated on April 18, 2023 by

Splash Screen flutter adalah layar pertama yang kita lihat ketika kita menjalankan aplikasi kita. Ini juga dikenal sebagai Layar Peluncuran. Layar splash adalah layar peluncuran, layar mulai, atau layar boot, yang merupakan elemen kontrol grafis yang berisi gambar, logo, dan versi perangkat lunak saat ini.

Dalam belajar flutter kali ini kita akan mempelajari berbagai metode dasar untuk membuat Splash screen flutter dan menambahkannya pada aplikasi yang kita bangun

Apa Itu Splash Screen Flutter

splash screen flutter, belajar flutter

Splash Screen adalah layar yang terbuka sebentar setiap kali Anda membuka aplikasi. Layar splash juga disebut layar peluncuran atau layar mulai dan muncul segera setelah Anda mengklik ikon aplikasi untuk meluncurkannya. Layar splash biasanya muncul selama dua hingga empat detik lalu menghilang, dan layar beranda aplikasi diluncurkan.

Splash Screen Flutter  adalah layar pertama aplikasi yang ditampilkan setiap kali aplikasi dimuat . Ini juga bisa menjadi layar selamat datang aplikasi yang memberikan pengalaman awal yang sederhana saat game atau program seluler diluncurkan. Splash screen hanyalah tampilan layar yang memungkinkan pengguna untuk melihat sesuatu saat perangkat keras memuat untuk menampilkan perangkat lunak kepada pengguna.

Artikel Terkait  Tutorial Dart 38 : Mengenal Action and Shortcut pada Flutter

Elemen umum dari splash screen berisi nama perusahaan dan logo atau judul . Contoh paling umum dari splash screen adalah logo Flutter saat memulai aplikasi Flutter atau logo Microsoft saat memulai sistem operasi Microsoft.

Karakteristik Splash Screen Flutter

Berikut ini adalah karakteristik penting dari splash screen:

  • Splash Screen Flutter ini terutama digunakan untuk branding atau pengenalan identitas aplikasi dan memberikan kesan branding kepada pengguna.
  • Splash screen juga dapat digunakan untuk menampilkan beberapa indikator kemajuan pemuatan saat perangkat keras memuat untuk menampilkan perangkat lunak kepada pengguna.
  • Saat pemuatan splash screen selesai, pengguna mendapatkan layar fungsional lain yang akan menjadi layar beranda atau dasbor, kemudian dilupakan. Setelah pemuatan selesai, kami tidak dapat menekan tombol kembali untuk mengembalikan layar splash.

Metode Splash Screen Flutter

Di sini kami akan menjelaskan dua metode yang dapat menambahkan layar splash di aplikasi yang sedang kita bangun.

Artikel Terkait  Tutorial Dart 2 : Dart Install, Ayo Kenali Lingkungan Kerja pada Dart

Metode Timer Splash Screen Flutter

Pada metode pertama, kita akan mengimplementasikan fungsi Timer() untuk membuat splash screen flutter di aplikasi kita.

Pertama, buat proyek baru di IDE yang Anda gunakan. Buka proyek, arahkan ke folder lib, dan ganti kode di bawah ini dengan file main.dart

import 'dart:async';  

import 'package:flutter/material.dart';  

  

void main() { runApp(MyApp());}  

  

class MyApp extends StatelessWidget {  

  @override  

  Widget build(BuildContext context) {  

    return MaterialApp(  

      home: MyHomePage(),  

      debugShowCheckedModeBanner: false,  

    );  

  }  

}  

  

class MyHomePage extends StatefulWidget {  

  @override  

  SplashScreenState createState() => SplashScreenState();  

}  

class SplashScreenState extends State<MyHomePage> {  

  @override  

  void initState() {  

    super.initState();  

    Timer(Duration(seconds: 5),  

            ()=>Navigator.pushReplacement(context,  

            MaterialPageRoute(builder:  

                (context) => HomeScreen()  

            )  

         )  

    );  

  }  

  @override  

  Widget build(BuildContext context) {  

    return Container(  

        color: Colors.yellow,  

        child:FlutterLogo(size:MediaQuery.of(context).size.height)  

    );  

  }  

}  

class HomeScreen extends StatelessWidget {  

  @override  

  Widget build(BuildContext context) {  

    return Scaffold(  

      appBar: AppBar(title:Text("Home")),  

      body: Center(  

          child:Text("Homepage",  

              style: TextStyle( color: Colors.black, fontSize: 30)  

          )  

      ),  

    );  

  }  

}

Pada kode di atas, kita memiliki metode initState() yang dipanggil satu kali saat widget stateful dimasukkan ke dalam pohon widget. Metode ini pertama memanggil super.initState () dan kemudian fungsi Timer. Fungsi pengatur waktu berisi dua argumen dimana yang pertama adalah durasi , dan yang kedua adalah tindakan yang akan dilakukan . Kami telah menentukan waktu durasi lima detik, dan setelah menyelesaikan waktu, layar saat ini akan diganti dengan layar utama aplikasi, yaitu HomeScreen().

Paket Splash Screen Flutter

splash screen flutter, belajar flutter

Pada metode kedua, kita akan menggunakan paket splashscreen untuk membuat layar splash di aplikasi kita. Paket ini menyediakan banyak atribut yang diberikan di bawah ini:

SplashScreen ({ Color loaderColor,  

int seconds,   

double photoSize,   

Image image,   

Text loadingText,   

Color backgroundColor,  

Text title,   

TextStyle styleTextUnderTheLoader,   

dynamic onClick,   

dynamic navigateAfterSeconds,   

ImageProvider<dynamic> imageBackground,   

Gradient gradientBackground})

Pertama, buat proyek baru di IDE yang Anda gunakan. Buka proyek, arahkan ke folder lib, dan buka file pubspec.yaml di mana kita perlu menambahkan dependensi splash screen flutter seperti di bawah ini:

Artikel Terkait  Tutorial Dart 4 : Mengenal Tipe data pada Dart

splash screen flutter, belajar flutter

Sekarang, buka file main.dart dan ganti dengan kode di bawah ini.

import 'dart:async';  

import 'package:flutter/material.dart';  

import 'package:splashscreen/splashscreen.dart';  

  

void main() { runApp(MyApp()); }  

  

class MyApp extends StatelessWidget {  

  @override  

  Widget build(BuildContext context) {  

    return MaterialApp(  

      theme: ThemeData(  

        primarySwatch: Colors.green,  

      ),  

      home: SplashScreenPage(),  

      debugShowCheckedModeBanner: false,  

    );  

  }  

}  

class SplashScreenPage extends StatelessWidget {  

  @override  

  Widget build(BuildContext context) {  

    return SplashScreen(  

      seconds: 5,  

      navigateAfterSeconds: new HomeScreen(),  

      backgroundColor: Colors.yellow,  

      title: new Text('Flutter Codekey',textScaleFactor: 2,),  

      image: new Image.network(  

          'https://picsum.photos/200'  

      ),  

      loadingText: Text("Loading"),  

      photoSize: 150.0,  

      loaderColor: Colors.red,  

    );  

  }  

}  

class HomeScreen extends StatelessWidget {  

  @override  

  Widget build(BuildContext context) {  

    return Scaffold(  

      appBar: AppBar(title:Text("Home")),  

      body: Center(  

          child:Text("Homepage",  

              style: TextStyle( color: Colors.black, fontSize: 30)  

          )  

      ),  

    );  

  }  

}

Pada kode di atas, kita memiliki beranda sebagai SplashScreenPage() yang akan mengembalikan kelas Splash Screen . Kelas ini memiliki beberapa properti untuk menampilkan splash screen, seperti title, image, backgroundcolor, gradientBackground, detik, loadingText, dll. Properti kedua digunakan untuk berapa lama splash screen flutter muncul ke pengguna, dan setelah selesai akan arahkan ke layar baru, yaitu HomeScreen() di aplikasi kita.

Saat kita membuka aplikasinya, kita akan melihat gambar dan ikon loading terlebih dahulu selama 5 detik. Ketika waktu yang ditentukan selesai, kami akan menavigasi ke halaman utama aplikasi.

Temukan lebih banyak artikel seri belajar Dart maupun bahasa pemrograman lainnya hanya di CODEKEY. Klik https://codekey.id/ sekarang juga untuk langsung belajar gratis. Sampai bertemu lagi!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial PHP 22 : Cara Membuat Redirect PHP dengan Cepat dan Mudah

Jika Anda melakukan browsing di browser kesayangan Anda, mungkin Anda pernah melihat link yang berisikan “php redirect” atau yang...

Tutorial PHP 23 : Cara Membuat Messages Alert PHP

Alert box atau alert messages digunakan di situs web untuk menampilkan pesan peringatan kepada pengguna bahwa mereka telah memasukkan...

Tutorial PHP 2 : Cara Install PHP, Langkah Awal Belajar PHP

PHP adalah bahasa pemrograman gratis dan open source. Secara teknis tidak perlu menginstal PHP: sebagian besar host web dan...

Tutorial Python 9 : Cara Membuat Looping Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial HTML/CSS 23 : Cara Membuat Form Sederhana dengan HTML

Form memiliki peran yang sangat krusial bagi website atau aplikasi untuk menjaga sistem keamanannya. Form HTML digunakan untuk mengumpulkan...

Tutorial SQL 8 : Constraint SQL, Bagaimana Fungsi dan Penggunaannya?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Tutorial Javascript 8 : Array Javascript, Panduan Lengkap Cara Membuatnya

Seperti bahasa pemrograman yang berorientasi objek lainnya, dalam JavaScript juga terdapat array. Jika Anda memiliki banyak objek yang ingin...

Tutorial SQL 20 : Mari Pelajari Cara Menggunakan Fungsi GROUP by SQL

Pada pembahasan seri Tutorial SQL ke- 20 ini, Codekey akan membahas tentang GROUP BY yang merupakan statement di dalam...

Tutorial Python 7 : Python String Format dan Cara Mudahnya

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya