[Flutter/플러터] 화면에 이미지 넣기 / 로딩화면 만들기

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

MaterialApp()안에 home 요소를 HomeScreen 클래스로  설정해준다.

 

 

 

class HomeScreen extends StatelessWidget

StatelessWidget은 HomeScreen안에서 변경이 필요없는 위젯을 사용하기 위한 클래스이다.

 

 

 

 @override
  Widget build(BuildContext context)

StatelessWidget을 사용하려면 Widget Build(BuildContext context) 오버라이드 함수를 무조건 선언해주어야 한다. 그렇지 않으면 에러가 발생한다. 

 

 

return Scaffold(
  backgroundColor: Color(0xFFF99236),
  body: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Image.asset(
        'asset/img/logo.png',
      ),
      CircularProgressIndicator(
        color: Colors.white,
      ),
    ],
  ),
);

HomeScreen을 실행하면 반환하는 코드이다. 

 

backgroundColor는 앱 자체의 전체 배경 색깔을 의미한다. Colors.colorName 으로 작성하면 컬러 이름으로도 지정해줄 수 있지만, 조금 더 정교한 색상 설정을 위해서 헥사코드를 사용했다.

 

body에 Column을 넣으면 Column안에 있는 children들을 세로로 배치하겠다는 것을 의미한다.

mainAxisAlignment를 center로 설정해 주어 가운데 정렬로 만들어주고,

Image.asset(이미지경로)를 활용하여 이미지를 넣어준다.

이때, Image.asset을 단순히 사용하기만 해서는 이미지를 넣어줄 수 없다. 

일단, asset 안에 img폴더를 만들어주고, 이 안에 임포트할 이미지를 넣어주었다.

그리고, 프로젝트 창에서 pubspec.yaml에 들어간다.

 

pubspec.yaml

flutter: 라고 써있는 부분을 찾아서 그 안에 assets:를 추가해 주고, 

그 안에 에셋의 경로를 적어준다.

 

 

 

이제 다시 코드로 돌아가서,  CircularProgressIndicator을 사용하여 로딩할때 뱅글뱅글 돌아가는 링을 만들어주고, 이 링의 색깔을 white로 설정해주었다.

 

 

 

다음은 전체 코드이다.

import 'package:flutter/material.dart';

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

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