Flutter 스플래시 스크린 생성

앱이 로딩되는 동안 보이는 스플래시 스크린을 간단하게 만들어본다

1. 사용자 정의 위젯 생성

메인 페이지에 Splash Screen 글자를 출력하고 배경 색상을 설정한다

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp()); //첫 화면 위젯 설정
}

class MyApp extends StatelessWidget { // Stateless위젯 선언

  @override
  Widget build(BuildContext context) { //위젯 ui 구현
    return MaterialApp(
      home: Scaffold(
        body: Container(
            color: Colors.amber,
            child: Center(
              child: Text("Splash Screen")
          ),
        ),
      ),
    );
  }
}

 

2. 이미지 출력하기

Image 위젯을 이용해서 이미지를 출력할 수 있다

• Image 기본 위젯: ImageProvider라는 또 다른 위젯에서 이미지를 그린다
• Image.asset 생성자: 앱에 저장된 asset 파일로 이미지를 그린다
• Image.network 생성자: Url을 통해서 이미지를 그린다
• Image.file 생성자: 파일을 통해서 이미지를 그린다
• Image.memory 생성자: 메모리에서 직접 이미지를 그린다

메인 디렉터리에서 assets 폴더를 생성한다

로드할 이미지는 추가했지만 프로젝트를 실행할때 이 폴더가 있는지 모르기 때문에 pubspec.yaml 파일에 asset 폴더를 지정해야한다

flutter:
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
	assets:
  	- assets/

이후 vscode에서 put get 버튼을 눌러 바뀐 설정을 반영하도록 한다

 

코드

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp()); //첫 화면 위젯 설정
}

class MyApp extends StatelessWidget { // Stateless위젯 선언

  @override
  Widget build(BuildContext context) { //위젯 ui 구현
    return MaterialApp(
      home: Scaffold(
        body: Container(
            color: Color(0xFFE6F59F),
            child: Center(
              child: Image.asset(
                'assets/logo.png',
              )
          ),
        ),
      ),
    );
  }
}

 

3. 애니메이션 위젯

로딩 애니메이션 위젯을 추가한다 플러터에 만들어진 위젯을 이용하면 직접 구현하지 않아도 된다

• LinearProgressIndicator: 일자형태
• CircularProgressIndicator: 원형 형태

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp()); //첫 화면 위젯 설정
}

class MyApp extends StatelessWidget { // Stateless위젯 선언

  @override
  Widget build(BuildContext context) { //위젯 ui 구현
    return MaterialApp(
      home: Scaffold(
        body: Container(
          color: Color(0xFFE6F59F),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Image.asset(
                'assets/logo.png',
                width: 200, //이미지 크기 조절
              ),
              CircularProgressIndicator(),
            ],
          ),
        ),
      ),
    );
  }
}

이미지 크기를 줄였더니 배경이 차지하는 크기도 줄었다 위 코드에서 사용한 Column이 세로로는 최대한의 크기를 차지하지만 가로로는 최소한의 크기를 차지하기 때문이다 Column의 상위에 Row를 추가해서 해결할 수 있다(Row는 가로로 최대한의 크기를 차지하기 때문)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp()); //첫 화면 위젯 설정
}

class MyApp extends StatelessWidget { // Stateless위젯 선언

  @override
  Widget build(BuildContext context) { //위젯 ui 구현
    return MaterialApp(
      home: Scaffold(
        body: Container(
          color: Color(0xFFE6F59F),
          child: Row(// 추가
            mainAxisAlignment: MainAxisAlignment.center, //추가
              children: [
              Column(
              mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                  'assets/logo.png',
                  width: 200, //이미지 크기 조절
                ),
                CircularProgressIndicator(),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}