[코드팩토리의 플러터 프로그래밍] 7장. 앱을 만들려면 알아야 하는 그 밖의 지식 - 스플래시 스크린 앱

환경 : mac m1

전체코드: soo-toance/2024-flutter-chapter7-splash (github.com)

GitHub - soo-toance/2024-flutter-chapter7-splash

 

 

1. 프로젝트 생성

 

2. 사용자 정의 위젯 만들기 : stateless 위젯 

- 스테이트풀 위젯 : 내부에서 값이 변경되었을 때 위젯 자체에서 다시 렌더링 실행

- 스테이트리스 위젯 : 내부에서 값이 변경되어도 위젯 자체적으로 다시 렌더링할 수 없는 위젯 

 

소스코드 >>

stateless widget 적용 · soo-toance/2024-flutter-chapter7-splash@40dbeda (github.com)

stateless widget 적용 · soo-toance/2024-flutter-chapter7-splash@40dbeda

 

 

3. 배경색 바꾸기 : container, boxdecoration 위젯 

 

소스코드 >>

container, boxdecoration 위젯으로 배경색 바꾸기 · soo-toance/2024-flutter-chapter7-splash@822fce6 (github.com)

container, boxdecoration 위젯으로 배경색 바꾸기 · soo-toance/2024-flutter-chapter7-splash@822fce6

 

 

4. 이미지 출력하기 : image 위젯 

- 기본 image 생성자는 imageprovider라는 또 다른 위젯에서 이미지를 그림. 

- image.asset 생성자는 앱에 저장된 asset 파일로 이미지를 그림

- image.network 생성자는 url 통해 이미지를 그림

- image.file 생성자는 url 통해서 이미지를 그림

- image.memory 생성자는 메모리에서 직접 이미지를 그림 

 

소스코드 >>

image 위젯 이용해서 이미지 출력 · soo-toance/2024-flutter-chapter7-splash@1bf24d4 (github.com)

image 위젯 이용해서 이미지 출력 · soo-toance/2024-flutter-chapter7-splash@1bf24d4

 

 

- 우리는 이중 image.asset을 사용한다. 

new > directory

assets 폴더 추가

 

pubspec.xml 수정

pub get 을 하거나 flutter pub get 으로 가져오면 된다.

 

 

5. 위젯 정렬 : row와 column 위젯 

- 애니메이션 위젯으로는 linearprogressindicator, circularprogressindicator 가 있다. 

ㄴ linearprogressindicator는 일자 형태로, circularprogressindicator는 동그라미 형태로 실행되는 위젯. 

 

소스코드 >>

row, circularprogressindicator 이용해 로딩바 추가 · soo-toance/2024-flutter-chapter7-splash@2a29b9f (github.com)

row, circularprogressindicator 이용해 로딩바 추가 · soo-toance/2024-flutter-chapter7-splash@2a29b9f

 

 

 

6. 실행화면 

Screen_recording_20240818_184206.webm

0.84MB