플러터 앱프로그래밍 Day5

플러터 앱프로그래밍 Day5

지금부터는 본격적으로 플러터 앱을 개발하는 데 필요한 내용을 하나씩 살펴보려고 한다.

그 중에서 구글의 머티리얼 디자인이 적용된 위젯을 사용하는 방법과 앱에 이미지, 폰트 등을 추가하는 방법 등 공부할 것이다.

 

 

 

스캐폴드를 이용한 머티리얼 디자인 적용

머티리얼 디자인은 구글에서 2014년부터 사용한 플랫 디자인 지침이다. 

머티리얼 디자인을 적용하면 평면, 단색 위주의 간결한 디자인을 바탕으로

앱의 용량을 줄이고 동시에 속도를 개선할 수 있다. 

 

플러터 앱을 제작할 때 머티리얼 디자인을 적용하려면 스캐폴드 클래스를 이용한다.

스캐폴드 클래스는 각종 위젯을 머티리얼 디자인 레이아웃으로 설계하는 것을 돕는다.

 

 

 

제목 줄 추가하기

 

1. 스캐폴드에 appBar를 선언하고 새로운 AppBar를 생성한다.

그리고 AppBar에서 title 값에 Text() 함수로 'Material Design App'이라는 문자열을 입력한다.

Widget build(BuildContext context) {
    return Scaffold(
      appBar : AppBar(title : Text('Material Design App'),),
    );
  }

 

 

2. 스캐폴드에 floating ActionButton을 선언한 후 새로운 FloatingActionButton() 함수를 생성한다.

이 함수에 child를 선언하고 Icon을 이용해 Icons.add를 선택하면 버튼 안에 아이콘이 표시된다. 

  Widget build(BuildContext context) {
    return Scaffold(
      appBar : AppBar(title : Text('Material Design App'),),
      floatingActionButton : FloatingActionButton(child: Icon(Icons.add),
        onPressed: () {
      }),
    );
  }

 

 

 

위젯을 여러 개 만들기

지금까지는 하나의 위젯만 만들었지만, 이번에는 여러 개의 위젯을 만들어 보려고 한다.

위젯을 여러 개 만들려면 Row와 Column 위젯을 이용한다.

Row는 가로, Column은 세로로 배치한다. 이 때 옵션 안에는 child가 아닌 children을 이용해 배열 형태로 선언한다.

body : Container(
    child : Center(
        children : <Widget>[
        Icon(Icons.android),
        Text('android')
        ],
        mainAxisAlignment: MainAxisAlignment.center,
    ),
),

 

앱의 화면을 확인하면 본문 한 가운데로 정렬된 아이콘과 텍스트가 보일 것이다. 

 

 

 

 

이미지와 폰트 추가하기

앱을 만들다 보면 기본 이미지 외에 추가로 이미지를 만들어 넣어야 할 때가 있다.

자주 사용되는 이미지는 앱에 넣었다가 직접 호출하는 게 데이터 사용이나 속도 면에서 유리하기 때문에

이번에는 이미지와 폰트를 추가하는 방법을 보려고 한다.

 

 

 

 

이미지 표시하기

1. image_font_add_app 이라는 이름으로 새로운 플러터 프로젝트를 생성한 후,

lib 폴더에 imageWidget이라는 이름의 새로운 다트 파일을 추가한다.

 

2. material.dart를 import하고, StatefulWidget을 상속받는 ImageWidgetApp 클래스를 생성한다. 

 

3. image 폴더에 이미지를 넣는다. 

 

4. 프로젝트에 이미지를 추가하고, pubspec.yaml 파일에 해당 이미지 정보를 추가한다.

(기존 안드로이드나 스위프트 앱 개발에서는 프로젝트에 이미지만 추가하면 바로 사용할 수 있지만,

플러터 앱은 pubspec.yaml 파일에 해당 이미지 정보를 추가해야 한다.)

 

5. 위젯을 만든다. 이미지를 호출하는 방법은 file, asset, memory 세 가지가 있다.

우리는 assets으로 선언했으므로 Image.asset 형태로 호출하면 된다. 

 

6. imageWidget.dart 파일에서 이미지를 불러오는 코드를 수정해 크기를 조절할 수 있다. 

Image.asset('image/flutter_logo.png', width: 200, height: 100)

 

 

 

 

 

폰트 변경하기 

1. 프로젝트에 font 라는 새 폴더를 만들고 준비한 폰트 파일을 끌어서 넣는다. 

 

2. pubspec.yaml 파일을 열고 폰트를 추가한다. fonts: 를 입력하고 그 하위에 폰트 정보를 입력한다.

 

3. 앱 화면에 imageWidget.dart 파일을 열고 Text를 추가한 후 TextStyle()함수를 이용해 설정한다.