[Flutter]Splash Screen

weme·2022년 6월 26일

Flutter 입문

목록 보기
1/3
post-thumbnail

Asset 추가하기

이미지, 동영상 파일 등.. 사용하려면 Asset을 추가해야한다.


프로젝트안에 원하는 이미지를 asset - img - splashscreen.png 추가한다.
이 파일을 사용하려면 pubspec.yaml에 사용하도록 권한을 설정해야한다.

53줄 아래에 꼭 사용하고싶은 폴더 이름을 넣어야한다.

그리고 위에 보면 Pub get을 눌러야 적용이 된다.

코드 리뷰

main.dart

import 'package:flutter/material.dart';

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

class HomeScreen extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF4dceee),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            'asset/img/splashscreen.png',
          ),
          CircularProgressIndicator(
            color: Colors.white,
          ),
        ],
      ),
    );
  }
}

debugShowCheckedModeBanner: false: 시뮬레이터 오른쪽 위에 보면 빨간색 띠가 있는데 그거 없애주는 코드.
backgroundColor: Color(0xFF4dceee): 핵스코드 사용.
Column: 새로
mainAxisAlignment: MainAxisAlignment.center: Column에 주축 즉 새로의 주축을 정렬 하는것(Center 말고 다른 코드도 있다. 그건 추후에 알아보자)
children: 부모의 자식을 여러개 적용, child는 부모안에 한개만 적용.
Image.asset: 이미지를 삽입.
CircularProgressIndicator: 로딩이모션 적용(color: Colors.white로 색 지정함)

profile
초보개발자

0개의 댓글