Hwan'Story › @kim-hwan

Flutter의 위젯 소개

· (수정 ) · 조회 738

flutter-logo-sharing.png

플러터의 위젯

플러터의 화면에 보여지는 모든 UI 요소는 위젯으로 구성이 된다. 위젯은 자신의 상태(State)를 기반으로 화면에 그려지며, 해당 상태가 변경되면 기존 상태와 비교하여 화면에서 새로 그려야 하는 부분을 산출하여 해당 부분만 화면을 다시 그린다. 이런 방식으로 화면을 갱신되므로 성능상에 이점이 크다.

Hello world

화면에 Hello, world! 텍스트를 표시하는 간단한 앱을 만들어본다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

image.png

위 예제를 실행하면 화면 가운데에 "Hello, World!" 라는 텍스트가 표시되는 것을 볼 수 있다.

코드에서 보면 느끼듯이 위젯들은 자식으로 또 다른 위젯을 가지는 경우가 일반적이다. 위의 예제에서는 하나의 위젯이 하나의 위젯을 가지고 있는 구조인데, 하나의 위젯이 여러 위젯을 자식으로 가지는 경우도 존재한다. 일반적으로 자식의 매개변수 이름은 child(단일자식), children(여러자식)으로 표현된다.

runApp()

runApp 함수는 위젯을 인자로 받는데 해당 위젯을 위젯 트리의 루트로 만드는 동작을 수행한다. 위 예제에서는 Center 라는 위젯 안에 Text 라는 위젯이 있는 형태로 총 2개의 위젯이 있다고 볼 수 있다.

머티리얼 컴포넌트 사용하기

플러터에서는 Material Design Pattern을 바탕으로 하위 위젯들을 사용하기 위해 MaterialApp 이라는 위젯을 기본으로 제공한다. 따라서 아래와 같이 최상위 위젯에 MaterialApp 위젯을 사용하면 그 아래에 사용되는 모든 위젯들은 Material Design에 따르는 앱을 쉽게 만들 수 있게 된다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'my-first-flutter-app',
      home: Center(
        child: Text(
          'Hello, world!',
        ),
      ),
    ),
  );
}

image.png

Scaffold

플러터에서는 머티리얼 디자인 패턴 형태의 앱을 위한 여러가지 위젯을 제공하는데 그중에 Scaffold라는 녀석이 있다.

scaffold.png

위 사진과 같이 Scaffold 위젯은 상단의 appBar, 내용을 표시하는 body 로 이루어져 있다.

Hello, World 예제에 Scaffold 위젯을 추가하면 아래와 같다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'my-first-flutter-app',
      home: Scaffold(
        appBar: AppBar(
          title: Text('AppBar Title')
        ),
        body: Center(
          child: Text(
            'Hello, world!',
          ),
        ),
      ),
    ),
  );
}

image.png

일반적으로 많이 보이는 앱의 형태로 만들어진 것을 볼 수 있다.

Scaffold에 대한 더 자세한 내용은 아래 주소에서 확인이 가능하다.

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

기본 위젯들

플러터에서 제공하는 기본 위젯들은 아래와 같다. 이런 위젯들이 있다는 것만 인지한 상태에서 필요할 때 찾아서 사용하면 될 것 같다.

  • 문자열 관련 위잿
    • Text
  • 제스처 관련 위젯
    • Button, TextButton, OutlinedButton, ElevatedButton, IconButton, GestureDetector, FloatingActionButton
  • 디자인 관련 위젯
    • Container, SizedBox, Padding, SafeArea
  • 레이아웃 관련 위젯
    • Row, Column, Flexible, Expanded, Stack

각 위젯의 기능은 이름 자체에서 기능의 유추가 쉽게 가능하고, 실제 자세한 동작은 따로 찾아보자.

참고 사이트

https://flutter-ko.dev/docs/development/ui/widgets-intro

관련 게시글