[Dev, flutter] 플러터로 iOS 앱 개발 시작하기 (2) - Image

iOS 개발 환경에서 쓰이는 Launchscreen을 플러터로 구현해 보자. 아마 안드로이드 개발자들에게는 Splash screen이라는 말이 더욱 자연스러울 것이다.

apple_logo.png

0.02MB

 

 

화면 구성을 위해 필요한 그림 파일을 다운 받자.

 

 

프로젝트에 assets라는 디렉터리를 추가하고 다운로드한 이미지를 안에 업로드한다.

 

 

pubspec.yaml 파일에 들어가 uses-material-design: true라는 코드 밑에 assets 디렉터리를 추가해 준다.

 

 

그러면 화면 상단에 팝업이 뜨고 Pub get을 눌러 yaml 파일을 갱신해 준다.

 

import 'package:flutter/cupertino.dart';
void main() {
  runApp(
    SplashScreen(),
  );
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        child: Container(
          decoration: BoxDecoration(
            color: Color(0xFFFFFF), // 배경화면의 색상을 흰색으로 한다.
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center, // 수평 정렬
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center, // 수직 정렬
                children: [
                  Image.asset(
                    'assets/apple_logo.png', // 이미지 첨부 후
                    width: 200, // 가로 너비 설정
                  ),
                  CupertinoActivityIndicator( // iOS에서 사용하는 indicator
                    radius: 15.0, // 반지름을 15로 설정
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

이번 시간에는 Image라는 새로운 위젯을 써보았다. 기존의 위젯과 사용 방법은 거의 동일하다. 추가로 CupertinoActivityIndicator를 사용해야 하는데 이 부분을 기존 안드로이드의 CircularProgressIndicator을 사용하면 컴파일 에러가 발생한다.

 

 

실행해 보면 다음과 같은 이미지와 progress indicator를 볼 수 있다. 추가적인 코드를 작성하지 않아 무한 로딩되는 상태이지만, 이를 조정하는 건 추후에 이어서 알아보자.