코영방

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

먼저, 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

What is flutter?

- Mobile UI framwork for creating native apps for iOS & Android

- Single code-base(dart) meaqns we only have to write our app once for multiple devices.

Why use Flutter?

- Only 1 code base

- Good layout methodology borrowed from responsive web

- Very smooth and quick experience when running apps

- Works well with Firebase as a backend

- Uses Dart, which is a really easy language to pick up

- Uses Material Design out-of-the-box

- Great docs & guides on the Flutter website

Flutter의 기본 위젯들 사용법을 좀더 쉽게 익힐수 있는 사이트 : https://flutterstudio.app/

위젯들을 화면에 올려서 설정값들을 직관적으로 바꿔 볼수 있다. 그리고 그 내용에 해당하는 소스코드를 확인 할 수 있다.

<TextBox를 올린 모습>

<TextBox를 올린 모습에 대한 소스코드>

앞으로 사용할 소스코드

https://github.com/iamshaunjp/flutter-beginners-tutorial

Flutter를 이용해 앱들 만들어 보기로 했다.
​
앱만드는 방법은 다양한다. 첫째와 함께 만들기위해 앱인벤터를 사용해 보려고 했지만, 좀더 욕심을 내서 Flutter를 사용해 앱개발을 시작할 예정이다. 
​
Flutter로 앱개발을 하기로 결정한 이유는 간단하다. 
- Google
- 한방에 안드로이드 , 아이폰 앱을 만들수있다
- 예쁘고 고민할 것이 별로 없는 UI 만들기
- 개발 과정에서 선택폭이 거의 없다보니, 고민할것이 없고 앱개발에만 집중할수있을것 같다. 결과적으로 이 이유가 Flutter를 결정하는데 가장큰 이유였다.
​
나의 여러가지 시행착오를 여기 블로그에 남길것이고, 나와 비슷한 경험을 하는 이들에게 조금이나마 도움이 되었으면 한다.

그리고 나에게도 passive income이 만들어지길 기대해본다.^^