Flutter에서 위젯(Widget)이란?

1. 위젯이란 무엇일까?

위젯을 레고 블럭에 비유할 수 있다. 레고 블럭을 조립해서 무언가를 만들어내는 것처럼, Flutter에서도 다양한 위젯을 조합하여 UI를 구성한다. Flutter에서는 모든 것이 위젯이다. 즉, 위젯은 UI를 구성하는 가장 작은 단위이며, 이러한 위젯들을 모아서 우리가 보는 화면이 만들어진다!

 

2. 위젯의 주요 분류

위젯은 크게 두 가지 유형으로 나눌 수 있다.

1. StatelessWidget
   • 한 번 그려지면 변경되지 않는 위젯
   • 예를 들어, 앱의 로고나 정적인 텍스트와 같은 변경되지 않는 요소에 사용
   • 비교적 간단하고 사용하기 쉽다.
2. StatefulWidget
   • 상태를 가지며, 이 상태가 변경될 때마다 UI가 업데이트된다.
   • 사용자 입력에 따라 변하는 버튼이나 폼 필드와 같은 동적인 요소에 사용

 

3. StatelessWidget의 기본 사용법

StatelessWidget을 사용하려면 해당 클래스를 상속받아 build 메서드를 구현해야 한다.

(build 메서드 → 위젯 UI 만드는 것)

import 'package:flutter/material.dart';

void main() {
  runApp(App()); // App 위젯은 앱의 루트입니다.
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 위젯을 리턴해야 합니다.
    throw UnimplementedError();
  }
}

• @override
  • 부모 클래스에 이미 있는 메서드를 오버라이드하겠다는 의미 
  • StatelessWidget 클래스에 build 메서드가 있기 때문에 오버라이드한다.

 

4. 루트 위젯(Root Widget)

Flutter 앱의 루트 위젯은 아래 두 가지 옵션 중 하나를 반환해야 한다.

MaterialApp 또는 CupertinoApp

각각 구글과 애플의 디자인 시스템을 따르는데, Flutter는 구글에서 개발되었기 때문에 MaterialApp이 더 자연스러운 선택일 수?!

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Text('Hello, world'),
    ); // MaterialApp
  }
}

5.  Basic Widget

1. Scaffold

• 플러터에서는 화면의 기본 구조를 Scaffold 위젯이 제공한다.
• 모바일 앱의 모든 화면은 Scaffold를 사용하여 구성해야 한다.

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Text('Hello, world'),
      ), // Scaffold
    ); // MaterialApp
  }
}

2. AppBar
3. Text
4. 그 외 위젯에 대한 내용은 Flutter 공식 문서 참고

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter!'),
          backgroundColor: Colors.blue,
        ), // AppBar
        body: Center(
          child: Text('Hello world!'),
        ), // Center
      ), // Scaffold
    ); // MaterialApp
  }
}

 

위 코드를 실행하면 아래 이미지와 같은 화면이 나타난다.