Flutter Widget 및 앱 구조

이은지·2024년 1월 25일

flutter mobile

Widget은 플러터에서 가장 중요한 개념으로, Flutter는 위젯(Widget)으로 구성되어 있음

1. Flutter 상에서의 위젯이란?

UI를 만들고 구성하는 모든 기본 단위 요소
- text, icon, image, text field, button 등의 요소를 통틀어 widget이라고 함
- 예를 들어, Text는 글자를 전문적으로 표시하는 위젯인 것
눈에 보이지 않는 요소들까지 위젯이라고 함
- 요소들을 정중앙에 위치 시키기 위한 CENTER, PADDING
대표적으로 다음과 같은 기본 위젯들이 있음
- 레이아웃 : Row, Column, Scaffold, Stack
- 구조 : Button, Toast, MenuDrawer
- 스타일 : TextStyle, Color, Padding
- 애니메이션 : FadeInPhoto, Transform
- 위치 & 정렬 : Center, Padding

2. Stateless widgets vs Stateful widgets

플러터 앱의 위젯은 stateless와 statefull 두 가지로 구분하는데, 이 두 가지 구분의 기준은 상태 연결이다.
- 상태연결: 앱의 상태가 변하냐/변하지 않느냐

상태가 변화하지 않고 정적인 상태인 위젯
화면 상에서는 존재하지만 실시간 데이터를 저장하지 않고 어떠한 상태도 가지지 않는 위젯
이 위젯들은 처음 할당 받은 모습대로 UI가 그려지며, 이후 앱 생명주기 동안 변경되지 않음

상태가 있는 위젯으로 사용자의 이벤트나 데이터에 따라 값이 바뀌는 위젯
동적인 위젯으로 생각하면 됨

Flutter가 앱을 구성하기 위해서는 몇가지 필수 위젯이 존재함. 이는 Widget tree 내에서 최상단에 존재하며 이 위에서 Widget을 구성하고 만들어감

💡 플러터 위젯의 특징
1. Widget들은 tree 구조로 정리될 수 있음
2. 한 Widget내에 얼마든지 다른 widget들이 포함될 수 있음
3. Widget은 부모 위젯과 자식 위젯으로 구성
4. Parent widget을 widget container라고 부르기도 함

[0Level] CustomApp(=MyApp)

보통 처음 시작할때 MyApp이라고 부름.
전체 앱을 감싸는 껍데기 이며 이 클래스에서 MaterialApp(안드로이드 디자인)이나 CupertinoApp(iOS 디자인)를 리턴해줌

[1Level] MaterialApp

Flutter에서 지원해주는 두 개의 디자인(안드로이드, iOS) 중 어느 디자인 뼈대를 사용할지 지정
이 두가지 위젯은 Flutter SDK에서 지원하며 이름을 커스텀할 수 없음
위의 CustomApp이 이름이 있는 껍데기라면 이 레벨의 두 위젯은 Flutter 앱에서 UI를 그릴 수 있도록 지원.이 두가지 위젯안에서 Flutter SDK에서 제공하는 위젯들을 전부 사용 가능

[2Level] Custom PageApp

0Level과 1Level에서 이름 및 환경을 제공해 줬으니 이제부턴 그런 환경을 이용해 UI를 그려야함
각 페이지의 이름을 정의해 주며 이 class에서 Scaffold를 리턴해줌
한 페이지 내에서의 환경과 이름을 정하는 역할

[3Level] - Scaffold

앱 화면을 구성하기 위한 빈 페이지를 준비해주는 위젯
네비게이션 바, 본문, 하단의 탭바 등 이 Scaffold 위젯에서 쉽게 구현할 수 있도록 제공해줌

[4Level] ~

Scaffold 내에서 위젯들을 부모 자식 관계로 엮어가며 UI를 만들어 갈 수 있음
뷰, 버튼, 슬라이드 등 유저에게 보여지는 UI 구성요소를 구현

import 'package:flutter/material.dart';
//1. 해당 패키지를 임포트 해야만, flutter sdk에서 제공하는 모든 기본 위젯과 material design 테마요소들을 사용할 수 있음

void main() { //2. 앱의 시작점 
  runApp(const MyApp()); //runApp함수는 반드시 Widget을 argument로 받아야함 
}

//3.MyApp 위젯은 최초로 앱의 Layout을 빌드하는 역할, 
즉 뼈대를 만드는 역할을 하므로 StatelessWidget 상속 
class MyApp extends StatelessWidget { 

  const MyApp({super.key});

	//4. 모든 custom 위젯은 또다른 Widget을 return하는 build 함수를 가지고 있음 
  @override
  Widget build(BuildContext context) { 
	//5. MaterialApp은 기능을 가진 위젯, Flutter가 제공하는 기본 위젯을 여기서 사용 가능, 실질적으로 모든 위젯을 감싸고 있음 
    return MaterialApp( 
      title: 'Flutter Demo', //5-1.앱의 이름 지정 
      theme: ThemeData( //5-2. 앱의 기본적인 테마를 지정하는 곳 
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ), 
			//ThemeData
      home: const MyHomePage(title: 'Flutter Demo Home Page'), 
			// 5-3. home은 앱이 정상적으로 실행되었을 때 제일 먼저 보여주는 경로 
    );//MaterialApp
  }
}

//MyHomePage custom 위젯 
class MyHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
 
    return Scaffold( //빈 위젯 제공 
      appBar: AppBar( //argument를 통해 AppBar 위젯 불러옴
        title: Text('first app'), //AppBar에 나타날 text 
      ),
      body: Center( //모든 요소를 화면 정중앙에 위치하기 위함 
        child: Column( //위젯 내 모든 요소를 세로로 배치 
          children: <Widget>[ //괄호 안에 세로로 정렬할 위젯들을 나열 
            const Text(
              'Hello',
            ),
            Text(
              'Hello',
            ),
          ],
        ),
      ),
    );
  }
}