코영방

오늘은 색상과 폰트 설정에 대해서 소개한다.

먼저, AppBar의 색상은 backgroundColor 속성을 이용해서 변경하면 된다.

아래 사이트에서 세부 색상 팔레트를 참고해서 값을 정하면 된다.

https://material.io/design/color/the-color-system.html#tools-for-picking-colors

또는 아래 그림과 같이, 빨간색 계열의 경우, "Colors.r"까지 입력하고, Ctrl + Q를 누르면 아래 그림과 같이 세부 색상 표를 제공해준다.

AppBar의 색상은 backgroundColor 속성 변경의 소스코드와 결과는 아래와 같다.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home : Scaffold(
    appBar: AppBar(
      title: Text('코딩 공부방'),
      centerTitle: true,
      backgroundColor: Colors.red[600],
    ),
    body: Center(
      child : Text("Hello 코딩 방"),
    ),
    floatingActionButton: FloatingActionButton(
      child : Text('click'),
    ),
  ),
));

이제 FloatingActionButton의 색상과 중간에 Text의 색상 및 폰트를 변경해보자.

Text의 색상 및 폰트는 style 속성에 TextStyle 위젯의 설정을 통해 변경할 수 있다.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home : Scaffold(
    appBar: AppBar(
      title: Text('코딩 공부방'),
      centerTitle: true,
      backgroundColor: Colors.red[600],
    ),
    body: Center(
      child : Text(
          "Hello 코딩 방",
          style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
            letterSpacing: 4.0,
            color: Colors.grey[600],
        ),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      child : Text('click'),
      backgroundColor: Colors.red[600],
    ),
  ),
));

위 소스코드를 보면, Text의 인자 중 첫 번째 인자는 "??" 형태로 직접 인자 값을 주고, 두 번째 인자의 경우 style : 후에 인자를 기입한 이유는 뭘까?

Text위에 마우스 커서를 위치시키고 Ctrl + q를 누르면 아래와 같이 설명 창이 뜬다. 

아래 그림의 노란색 노무의 경우 "{}"로 묶여 있지 않다. 이경우는 직접 인자 값을 주면 되고, 필수 매개변수이다.

하지만 "{}" 안에 있는 옵션 인자들의 경우 인자 전달을 해도 되고 안 해도 됨으로, 한다면 꼭 "style :" 과 같이 현재 어느 인자에 대해 설정한다는 것을 명확히 해주어야 한다.

그리고 새로운 폰트를 추가하고 싶다면, 아래 구글폰트에서 다운받아서 해당 flutter 프로젝트에 포함 시키면 된다.

https://fonts.google.com/

flutter 프로젝트에 font는 추가하는 과정은 아래와 같다.

1. 구글폰트에서 폰트 검색 및 다운로드

2. 프로젝트에 오른마우스 클릭 -> NEW -> Directory 선택

3. fonts 폴더 생성

4. 다운로드한 ttf파일을 fonts 폴더에 드래그 드롭한다.

5. 이제 폰트를 사용할 준비가 되었다. pubspec.yaml 파일을 연다.

그리고 아래 fonts 관련 코드를 찾는다. Ctrl + / 를 누르면 주석이 지워진다.

6. 아래와 같이 새로 추가한 폰트의 이름으로 수정한다.

7. pubspec.yaml을 저장하고, main.dart로 가면 아래 같이 pubspec.yaml이 변경되었다는 표시가 뜨고, "Get Dependencies"를 눌러서 반영해준다.

8. fontFamily 속성을 추가해주고, 다시 실행시켜보면 새로운 폰트가 반영된 것을 볼 수 있다.

본글은 아래와 같이 Flutter SDK와 Android Studio / toolchain이 먼저 설치되야 한다.

그리고 Android Studio에 Flutter 와 Dart plugin을 설치하고,

AVD 를 추가하고, Flutter 프로젝트를 생성해서 아래와 같이 "Flutter Demo : Home Page"까지는 실행되었다는 전제고 글을 쓰고자 한다.

기본 예제 소스를 모두 삭제하고 아래와 같이 androi MaterialApp의 home property에 text 위젯을 추가해보자.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home : Text('hey guy!!')
));

Flutter에는 모든 위젯의 이름은 첫자와 각 단어를 대문자로 표기한다.

그리고 home같이 각 property는 "," 로 구분한다.

이제 Scaffold와 AppBar 위젯을 추가해보자.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home : Scaffold(
    appBar: AppBar(
      title: Text('코딩 공부방'),
    ),
  ),
));

다음은 AppBar 위젯의 centerTitle 속성을 이용해 Text는 중앙정렬 시켜보자.

또한 Scaffold의 두번째 속성으로 body에 Text위젯으로 글을 추가해보자.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home : Scaffold(
    appBar: AppBar(
      title: Text('코딩 공부방'),
      centerTitle: true,
    ),
    body: Text('Hellow Coding gongboobang')
  ),
));

Flutter 샘플프로젝트와 같이 Scaffold 의 body에 들어는 Text는 중앙에 위치시키도록 수정해보자.

이를 위해 Center 위젯을 아래와 같이 사용하면 된다.

그리고 샘플프로젝트에서 본 FloatingActionButton 위젯도 추가해보자.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home : Scaffold(
    appBar: AppBar(
      title: Text('코딩 공부방'),
      centerTitle: true,
    ),
    body: Center(
      child : Text("Hello 코딩 방"),
    ),
    floatingActionButton: FloatingActionButton(
      child : Text('click'),
    ),
  ),
));

Scaffold 위젯은 아주많이 사용됨으로 아래 링크에서 좀더 자세한 사항을 확인 하는것을 추천한다.

https://api.flutter.dev/flutter/material/Scaffold-class.html