DEV Community

sidcode
sidcode

Posted on

[Flutter] 앱 시작 로딩화면 App loading page

#flutter #developer #app #loadingpage

  1. flutter_native_splash
    https://pub.dev/packages/flutter_native_splash.

  2. 패키지 다운로드(https://pub.dev)
    Package download from (https://pub.dev)

  • flutter_native_splash 
    flutter pub add flutter_native_splash
Enter fullscreen mode Exit fullscreen mode
  1. flutter_native_splash.yaml
    • pubspec.yaml과 동일 경로에 파일 생성
    • smae path to pubspec.yaml
    • vi또는 메모장등으로 원하는 색상 이미지를 원하는대로 수정
    • "vi" or "notepad" edit what you want color and image whatever. 
fflutter_native_splash:
  color: "#009000"
  image: assets/Kaaba.png
  branding: assets/Kaaba.png
  # color_dark: "#121212"
  # image_dark: assets/Kaaba.png
  # branding_dark: assets/Kaaba.png

  android_12:
    image: assets/Kaaba.png
    icon_background_color: "#009000"
    # image_dark: assets/Kaaba.png
    # icon_background_color_dark: "#121212"

  web: false
Enter fullscreen mode Exit fullscreen mode
  1. command on prompt 
dart run flutter_native_splash:remove && dart run flutter_native_splash:create
Enter fullscreen mode Exit fullscreen mode
  1. main.dart 
Future<void> main() async {
  runApp(const WhereIsKaaba());

  # close splash screen
  FlutterNativeSplash.remove();
}
Enter fullscreen mode Exit fullscreen mode

finished!!

Top comments (0)

Read next

aadarshk7 profile image

Flutter BottomNavigationBar

Aadarsh Kunwar -

mariustechie profile image

What developers have to face: Navigating the Multi-Dimensional Interview Process

Marius -

andycall profile image

The Comprehensive Guide to Using C/C++ in Flutter — Part I

Andy Dong -

apilover profile image

10 Best QA Testing Tools Every Developer Should Know

Wanda -