티스토리 뷰

Dev/Flutter

Splash Screen

richZ 2023. 3. 6. 16:25
반응형

1. asset 디렉토리 생성

프로젝트에서 asset/img 폴더 생성 후 splash 이미지 파일 logo.png 추가

asset/img/logo.png 추가

 

2. pubspec.yaml 파일에서 해당 위치 추가 후 pub get 실행

name: p01_splash_screen
description: A new Flutter project.
publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: '>=2.19.3 <3.0.0'

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:

  uses-material-design: true

  # asset/img/ 폴더 내 모든 파일 설정 후 Pub get
  # 들여쓰기에 유의하자
  assets:
    - asset/img/

 

3. main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: HomeScreen(),
    ),
  );
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
      	# 중앙 정렬
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          # splash 이미지
          Image.asset(
            'asset/img/logo.png',
          ),
          # 로딩 Indicator
          const CircularProgressIndicator(
            color: Colors.blue,
          ),
        ],
      ),
    );
  }
}

4. 스크린샷

반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/08   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함