Flutter에서 Widget은 사용자 인터페이스(UI)의 구성 요소입니다.
앱의 모든 것은 위젯으로 이루어져 있으며, 화면의 모든 구성 요소를 생성하고 배치하는 데 사용됩니다.

Widget은 전부 객체지향형으로 프로그래밍 되어있기에 복잡한 위젯을 만들기 위해 중첩될 수 있고, 상속이나 추상화의 개념도 적용할 수 있습니다.

Widget?

Flutter에서 말하는 Widget이란 UI(User Interface)를 구성하는 기본 단위를 뜻합니다.

아래의 소스코드를 보며 위젯이 무엇인가 확인해봅시다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

위의 코드에서 main함수는 runApp을 실행시키고 runApp은 MaterialApp을 실행시키는 것을 알 수 있습니다.

runApp 함수에 대한 설명을 보면 왜 Flutter는 Widget으로 이루어져있고, Widget은 모든 UI를 구성하는 기본단위인지 알 수 있습니다.

Dart는 main함수를 통해 모든게 실행 됩니다.

그런데 이 main함수가 runApp함수를 실행 시키는데 runApp에서 받는 매개변수가 Widget인걸보면 Widget을 사용하여 실행되는 함수인것을 알 수 있고 runApp에서 실행되는 MaterialApp은 Widget인걸 알 수 있습니다.

class MaterialApp extends StatefulWidget {

abstract class StatefulWidget extends Widget {

위의 소스를 보면 MaterialApp은 StatefulWidget을 상속받고 있고, StatefulWidget은 Widget이란 추상화 클래스를 상속받고 있는것을 알 수 있습니다.

MaterialApp이 위젯인거 알겠고 무엇을 하는놈인지 알아봅시다.

MaterialApp?

MaterialApp은 구글이 지향하는 Material Design을 사용할 수 있게 해주는 Widget Class 입니다.

Figma, Android 스타일에서 대표적으로 사용하고 있습니다.

추가적으로 애플에서 제공하는 디자인 가이드인 Cupertino(쿠퍼티노) 디자인도 Flutter에서 사용 할 수 있습니다.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

이전에 보여준 MaterialApp 대신 CupertinoApp을 사용하면 Cupertino 디자인 구성 요소를 설정한다.
MaterialApp에서 사용되는 매개변수와 CupertinoApp에서 사용되는 매개변수는 공통적인 부분도 있겠지만 다른 부분도 존재하므로 각 위젯에서 사용할 수 있는 매개변수를 잘 확인하여 사용해야 합니다.

조금더 상세한 내용이 필요하시다면 구글에서 제공하는 공식 문서를 보시면 좋을 것 같습니다.
MaterialApp(공식문서)
Cupertino(공식문서)