행복한 스마일맨 ^^*

이전 글에 이어서 앱에 배경을 넣어보자!!

이제까지 홈 화면에 글자를 출력하는 앱을 만들었다.

여기에 배경색을 입혀보자!!

1. 배경색을 화면 전체에 오렌지색으로 적용.

import 'package:flutter/material.dart';

void main() {
  runApp(
    SplashScreen(),
  );
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            color: Colors.orange,
          ),
          child: Center(
            child: Text('Splash Screen'),
          ),
        ),
      ),
    );
  }
}

BoxDecoration 은 배경색, 테두리 색상, 테두리 두깨 등 컨테이너의 여러가지 UI 요소를 지정할 수 있다.

결과

2. 글자 대신 이미지를 출력해보자

Text 위젯 대신 Image 위젯을 사용

 - 앱에 저장된 이미지를 사용

 - [프로젝트 디렉토리]/assets 디렉토리를 생성한다.

 - 로고로 사용할 이미지를 [프로젝트 디렉토리]/assets/logo.png 파일에 저장.

 - 이미지 파일을 사용할 수 있도록 [프로젝트 디렉토리]/pubspec.yaml 설정 파일에 내용을 추가한다.

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
  assets:
    - assets/

pubspec.yaml 파일을 변경 후에는 꼭 "Pub get" 을 하여 설정을 업데이트 한다.

글자 대신 이미지를 추가해보자.

import 'package:flutter/material.dart';

void main() {
  runApp(
    SplashScreen(),
  );
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            color: Color(0xFFF99231),
          ),
          child: Center(
            child: Image.asset(
              'assets/logo.png'
            ),
          ),
        ),
      ),
    );
  }
}

글자 대신 로고 이미지가 나오는 걸 확인할 수 있다.

배경색도 로고 이미지와 동일한 색상인 0xFFF99231 로 변경하였다.

3. 위젯 정렬하기

 - 로딩 애니메이션 위젯을 로고 이미지 밑에 보이도록 해보자.

 - 세로로 정렬하기 위해 Column 위젯을 사용한다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    SplashScreen(),
  );
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            color: Color(0xFFF99231),
          ),
          child: Column(
            children: [
              Image.asset('assets/logo.png'),
              CircularProgressIndicator(),
            ],
          ),
        ),
      ),
    );
  }
}

Column 위젯의 children 매개변수에 로고 이미지와 로딩 애미메이션을 추가한다.

CircularProgressIndicator 은 플러터에서 제공하는 둥근 로딩 애미메이션 위젯이다.

Column 위젯의 mainAxisAlignment 매개 변수를 이용하여 children 위젯들의 배치할 수 있다.

 - 가운데 위치 시키기 : mainAxisAlignment: MainAxisAlignment.center

Column 위젯은 세로로 최대한 크기를 차지한다. 가로로는 최소한의 크기만 차지한다.

이미지 로고의 가로 크기를 조정하면 전체 화면이 달라진다.

이런 경우에는 Row 위젯을 추가해야한다.

Row 위젯은 가로로는 최대의 크기를 차지하고 세로로는 최소의 크기를 차지한다.

이제 마지막으로, 로고 이미지를 가로 세로 가운데로 정렬시키고 로딩 애니메이션의 색깔도 하얀색으로 변경해보자.

import 'package:flutter/material.dart';

void main() {
  runApp(
    SplashScreen(),
  );
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            color: Color(0xFFF99231),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'assets/logo.png',
                    width: 200,
                  ),
                  CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation(
                      Colors.white,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

최종으로 만든 앱의 결과물이다!!

애니메이션으로 돌아가는 색상을 흰색으로 변경하기 위해 valueColor 매개변수를 사용한다.

valueColor 의 경우 색상이 애니메이션이 되어야 하기 때문에 Colors.white 를 직접 넣을 수 없다.

대신에 AlwaysStoppedAnimation 이라는 클래스에 감싸서 색상을 변경했다.