[3] Flutter 위젯 정리

2025-09-17

  플러터 위젯들의 사용 방법과 기능들을 알아보았다.

Flutter 프로젝트 구조

• lib/
  • 앱 개발을 위한 Dart 코드 작성 위치. main.dart가 진입점
• pubspec.yaml
  • 프로젝트 정보 기록
  • 패키지 의존성 추가 (pub.dev 사용)
  • 이미지, 폰트 파일 위치 선언 (/asset 경로 등록)
  • 패키지 추가 시 → 직접 추가보다는 flutter pub add 패키지명 권장
• pubspec.lock
  • 설치된 패키지 버전을 고정하여 기록
• android, ios, … 그 외 네이티브 폴더들
  • 디바이스 권한 설정
  • 앱 이름 및 아이콘 관리
  • 네이티브 기능 직접 개발 시 활용

Flutter의 위젯

• Flutter는 위젯 트리 기반으로 화면을 렌더링한다.
• StatelessWidget : 상태 없음
• StatefulWidget : 내부적으로 상태를 가짐. setState()를 통해 UI 갱신

StatefulWidget

• StatefulWidget은 createState메서드를 오버라이딩해야한다.
• 상태 클래스(State<위젯명>을 상속받는)를 정의하고 createState에서 이걸 반환하는 형태이다.

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      	onTap: () {
	  count++;
	  setState((){});
	  },
          child: Text('$count'),
        );
  }
}

작성 TIP

• 그냥 StatelessWidget으로 코드작성하고 💡를 통해 StatefulWidget으로 변환하는게 편하다!

주요 위젯

• MaterialApp
  • 플러터 앱의 최상위 위젯. 앱 전체의 테마, 페이지 라우트, 타이틀, 홈, 폰트을 설정 할 수 있는 핵심 컨테이너
• Scaffold
  • 화면의 기본 뼈대가 되는 위젯
  • 화면 당 하나의 Scaffold 를 갖는다
  • 속성 : appBar, body, floatingActionButton, drawer, bottomNavigationBar 등
• Column / Row
  • children, mainAxisAlignment, crossAxisAlignment
• SingleChildScrollView
  • Column/Row를 스크롤 가능하게 감싸는 위젯. child로 Column/Row를 갖는다
• SizedBox
  • 자식 위젯 크기를 지정하거나 공백 생성 할 때 주로 사용
• Container
  • SizedBox 기능 + 레이아웃/스타일/정렬
• Expanded
  • Column/Row 내부에서 남은 공간을 모두 차지. flex로 비율 지정 가능
• Spacer
  • 위젯 사이에 단순 공간만 추가
• Stack
  • 자식 위젯을 겹쳐 배치.
• Positioned
  • 위젯의 위치 지정 (top/bottom/left/right 만큼 떨어진 공간에 자식을 생성)
• width: double.infinity 속성
  • 가로 채우기할 때 쓰인다

버튼 및 제스처

• ElevatedButton
  • Material 스타일 기본 버튼
  • 눌렀을 때 살짝 튀어나오는 효과
  • 부모 위젯 크기에 따라 크기가 결정됨 (부모 위젯 크기가 없다면 자녀위젯 크기를 따라 감)
• GestureDetector
  • 모든 위젯을 클릭/터치 가능하게 만듦. child로 위젯을 갖는다
  • 주요 이벤트 : onTap, onDoubleTap, onLongPress

단축키

• Ctrl + . : 빠른 액션(자동 생성, 래핑 등)