[flutter] 플러터에서의 로딩 및 스플래시 화면 구현 방법

30 Nov 2023

flutter

앱을 개발하다보면 사용자에게 로딩 화면이나 스플래시 화면을 보여주는 경우가 있습니다. 플러터에서는 이러한 화면을 구현하는 방법이 간단하고 유연합니다. 이번 포스트에서는 플러터에서 로딩 화면 및 스플래시 화면을 구현하는 방법을 알아보겠습니다.

로딩 화면 구현하기

로딩 화면은 앱이 초기화되는 동안 보여지는 화면입니다. 주로 네트워크 통신이나 데이터 로딩 등 시간이 걸리는 작업을 수행할 때 사용됩니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Loading Screen',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoadingScreen(),
    );
  }
}

class LoadingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

위의 코드는 간단한 로딩 화면을 구현한 예시입니다. MyApp 클래스에서는 ThemeData를 설정하고 LoadingScreen을 초기 화면으로 설정합니다. LoadingScreen 클래스에서는 CircularProgressIndicator를 사용하여 로딩 중임을 표시합니다.

스플래시 화면 구현하기

스플래시 화면은 앱이 시작될 때 잠깐 보여지는 화면으로, 앱의 로고나 애니메이션 등을 표시하여 앱의 브랜드 아이덴티티를 홍보하는 역할을 합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Splash Screen',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashScreen(),
    );
  }
}

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    // 스플래시 화면을 보여준 후 다음 화면으로 이동
    Future.delayed(Duration(seconds: 3), () {
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => HomeScreen()));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image.asset('assets/logo.png'),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Welcome!'),
      ),
    );
  }
}

위의 코드는 스플래시 화면을 구현한 예시입니다. SplashScreen 클래스에서는 initState 메서드를 오버라이드하여 일정 시간(여기서는 3초) 스플래시 화면을 보여준 후 HomeScreen으로 전환하는 로직을 구현하였습니다. HomeScreen 클래스는 스플래시 화면 후에 보여지는 화면을 나타냅니다.

플러터에서는 로딩 화면과 스플래시 화면을 구현하는 방법이 간단하고 유연합니다. 앱의 초기화나 데이터 로딩 시간을 고려하여 로딩 화면을 구현하고, 앱의 브랜드를 홍보하기 위해 스플래시 화면을 추가할 수 있습니다.

더 자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.