[안드로이드 스튜디오/flutter]이미지 등록 및 로딩화면 만들기

1. 새 프로젝트를 만들고 루트 디렉토리 우클릭 -> New -> Directory 에 들어가줍니다.

asset 이란 이름으로 Directory를 만들어주고 그 아래에 img 라는 Directory를 또 만들어 줍니다.

그 img 디렉토리에 자신이 가지고 있는 이미지 파일을 넣어줍니다.

 

2. 그다음 pubspec.yaml 파일에 flutter: 아래에 빨간 네모박스 부분처럼 작성해줍니다.

 

3. 우측 상단에 pub get 을 눌러주고 오른쪽 사진처럼 마지막에 finished with exit code 0 이 뜨면 성공, 끝에 숫자가 1이 뜨면 실패입니다.

 

 

4. 세팅이 전부 끝났으면 본격적으로 이미지를 등록해볼 것인데 왼쪽main.dart를 오른쪽에 있는 부분만 빼고 다 지워줍니다.

 

 

Flutter로 로딩 화면 구현하기

1. 코드 전체

다음은 Flutter로 로딩 화면을 구현한 전체 코드입니다:

import 'package:flutter/material.dart';

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

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /// 335CB0
      backgroundColor: Color(0xFF335CB0),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 32.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              'asset/img/logo.png',
            ),
            SizedBox(height: 28.0),
            CircularProgressIndicator(
              color: Colors.white,
            ),
          ],
        ),
      ),
    );
  }
}

2. 코드 설명

각 부분이 어떤 역할을 하는지 하나씩 살펴보겠습니다:

(1) main() 함수

main() 함수는 Flutter 앱의 시작점입니다. runApp() 함수는 앱을 실행시키며, 최상위 위젯인 MaterialApp을 전달합니다.

(2) MaterialApp

MaterialApp은 앱의 전반적인 테마와 구조를 설정하는 최상위 위젯입니다. 여기서 home 속성을 통해 앱이 실행되었을 때 가장 먼저 보여줄 화면을 HomeScreen으로 지정합니다.

(3) HomeScreen

HomeScreen은 화면의 콘텐츠를 구성하는 Stateless 위젯으로, 앱의 기본 UI를 담당합니다. Scaffold를 사용해 기본 레이아웃을 설정합니다.

(4) Scaffold

Flutter에서 화면의 기본 구조를 제공하는 위젯입니다. backgroundColor 속성을 통해 화면의 배경색을 설정하고, body 속성에 메인 콘텐츠를 배치합니다.

(5) Column

위젯을 세로로 나열하는 레이아웃 위젯입니다. mainAxisAlignment를 center로 설정하여 위젯을 화면 중앙에 배치했습니다.

(6) Image.asset와 CircularProgressIndicator

• Image.asset: 로컬 이미지 파일을 불러오는 위젯입니다. 이 예제에서는 로고 이미지를 불러옵니다.
• CircularProgressIndicator: 원형 로딩 애니메이션을 표시하는 위젯입니다. 로딩 상태를 시각적으로 보여줍니다.

3. 위젯 트리 구조

이 Flutter 코드의 위젯 트리 구조는 다음과 같습니다:

runApp
 └─ MaterialApp
     └─ HomeScreen
         └─ Scaffold
             └─ Padding
                 └─ Column
                     ├─ Image.asset
                     ├─ SizedBox
                     └─ CircularProgressIndicator

4. 마무리

이 코드를 실행하면 로고 이미지와 함께 원형 로딩 애니메이션이 화면 중앙에 표시됩니다. Flutter의 위젯 구조를 이해하는 데 도움이 되었길 바랍니다!