[Flutter] Flutter Material API

Flutter App을 개발하기 위해선 먼저 Widget에 대해 알아야 합니다.

Flutter App은 Widget을 기반으로 개발하기 때문입니다.

개발하고자 하는 기능에 맞는 Widget을 찾고, 이를 적재적소에 활용하는 것이 중요합니다.

그렇기 때문에 Flutter에는 어떠한 Widget이 있는 지, 또 어떻게 사용할 수 있는 지 알아보도록 하겠습니다.

 

https://api.flutter.dev/flutter/material/material-library.html

material library - Dart API

Flutter Material API 사이트에 들어가보시면, Flutter App 개발에 필요한 많은 Widget 정보들이 정리되어 있습니다.

간단한 예로, App의 Layout이 되는 Scaffold Widget을 살펴보도록 하겠습니다.

<Scaffold Widget 설명>

Material 디자인의 기본 레이아웃 구조라는 설명과 함께 생성자(CONSTRUCTORS), 속성(PROPERTIES), 메소드(METHODS) 등에 대한 설명이 기재되어 있습니다.

Scaffold의 속성 중 가장 먼저 보이는 appBar 속성을 한번 알아보겠습니다.

<appBar 속성>

appBar 속성은 PreferredSizeWidget 타입을 입력받습니다.

그렇다면 PreferredSizeWidget은 무엇인지 찾아보겠습니다.

<PreferredSizeWidget 클래스>

PreferredSizeWidget은 추상 클래스로써, 이를 구현한 Widget을 반환해주는 Widget용 인터페이스입니다.

PreferredSizeWidget을 구현할 수 있는 Widget에는 AppBar, CupertinoTabBar 등이 있습니다.

이 중에서 AppBar Widget은 구체적으로 어떤 기능이 있는 지와 어떻게 사용해야 하는 지 찾아보겠습니다.

<AppBar Widget 설명>

AppBar는 App 상단에 위치하여 제목, 작업 등을 표시해주는 Widget입니다.

대표적인 속성으로 backgroundColor, title 등이 있습니다.

title 속성에 대해 알아보겠습니다.

<title 속성>

title 속성은 속성명만 봤을 때는 문자열을 입력받을 것으로 생각되지만, Widget 타입을 입력받습니다.

만약 title 속성을 사용한다면, Text Widget을 추가하여 다음과 같은 코드를 만들 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Basic App'),
        ),
      ),
    ),
  );
}

코드를 Emulator로 실행한 결과는 다음과 같습니다.

<title 속성 사용>

처음부터 모든 Widget의 역할과 사용법을 알 수는 없기 때문에, 하나씩 알아보고 사용해보는 과정이 필요합니다.

API 사이트를 통해 개발에 필요한 Widget을 찾는 것이 어렵다면, Google 검색을 통해 필요한 Widget을 찾고 역으로 API 사용법을 알아보는 것도 하나의 방법이 될 수 있습니다.

다음 글부터는 Flutter Material API에 있는 Function과 Widget을 하나씩 사용해보도록 하겠습니다.