Dart/Flutter

[Flutter] Basic Widsgets & 기본 사용법

728x90

Flutter는 다음과 같이 일반적으로 사용되는 기본 Widget이 제공된다.

Text
- 스타일이 지정된 텍스트를 생성할 수 있다.
Row, Column
- 웹의 Flexbox 레이아웃 모델을 기반으로하여, Row, Column 방향 모두에서 유연한 레이아웃을 만들 수 있다.
Stack
- 선형 방향(수평 또는 수직) 대신 Stack 위젯을 사용하여 페인트 순서에 따라 위젯을 서로 포개어 배치할 수 있다.
Container
- 컨테이너는 배경, 테두리, 그림자 등으로 장식될 수 있고, 여백(margin), 안쪽 여백(padding) 및 크기에 대한 제약 조건이 적용될 수 있다. 또한 컨테이너는 행렬을 사용하여 3차원 공간에서 변환될 수 있다.

기본 사용법

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "",
        home: Scaffold(
          appBar: AppBar(title: const Text('HI')),
          body: const Center(
            child: Text("hello"),
          ),
        ));
  }
}

import 'package:flutter/material.dart';

material은 구글이 제공하는 모바일, 데스크톱, 웹 등 다양한 디바이스들을 아우르는 디자인 시스템이다.

flutter에서는 material.dart는 flutter 앱을 구성하는 material 디자인의 여러 위젯을 가지고있는 패키지를 기본적으로 제공한다.

void main() 함수

프로젝트를 실행할 때 가장 먼저 기본적으로 실행되는 함수이다.

runApp()

runApp() 함수는 flutter 앱을 시작할 때 사용된다. 이 함수에 실행할 위젯을 전달하여 사용한다.

class App extends StatelessWidget {}

App이라는 이름을 가지는 클래스는 StatelessWidget 클래스를 extends 키워드를 사용하여 상속받는다.

build

StatelessWidget을 상속받은 App에는 build함수를 정의해야한다.

build 함수는 어떤 위젯을 만들것인지 정의하는 함수로, 위젯을 생성할 때 호출되며 화면에 그려지는 위젯을 반환한다.

이는 StatelessWidget 클래스가 가진 메서드이므로 오버라이딩하여 가져온다.

오버라이딩이란 상속받은 클래스에 선언된 메서드와 같은 이름으로 메서드를 생성하는 것을 말한다. 이 때 @override 어노테이션으로 명시해주어야한다.

호출 시점

해당 위젯이 주어진 BuildContext의 위젯 트리에 삽입될 때
의존하는 위젯이 변경될 때

BuildContext

현재 빌딩되는 위젯의 트리 속 위치 정보를 저장하는 클래스
- 위젯의 고유한 요소
- 위젯 트리 속 위젯의 위치를 찾을 수 있고, 트리에서 가까운 위젯으로 접근할 수 있다.
빌드에 대한 정보를 저장하는 객체
- 지원되는 최소 및 최대 플러터 버전, 기기 화면 크기 및 픽셀 밀도, 현재 활성화된 테마 등 정보를 저장한다.