[Flutter] Everything is a Widget - 플러터 기본기 다지기

 

Flutter는 현대 모바일 애플리케이션 개발에서 주목받는 UI 프레임워크로,
선언적 UI와 위젯 기반 아키텍처를 통해 개발자에게 높은 생산성과 효율성을 제공합니다.
이번 포스팅에서는 Flutter의 사용자 정의 위젯, 프로젝트 구조, 화면 구성 패턴 등을 알아보겠습니다.

 

"Everything is a Widget"

• Flutter의 핵심 철학
• Flutter는 위젯 기반의 UI 프레임워크로, 모든 UI 요소를 위젯으로 표현합니다. 이는 개발의 일관성과 효율성을 크게 높여줍니다.
• 선언적 UI 구성

 

선언형 UI란?

// 빨간색 A가 노란색 B를 child로 가지고 있다.
return ViewA(
  color: red,
  child: ViewB(
		color: yello,
	),
);

• 상태만 선언하면 UI는 자동으로 업데이트된다.
• 최종 상태 선언에만 집중할 수 있다.
• 예시) Flutter StatefulWidget

 

Flutter의 위젯은 현재 상태에 따라서 UI 관리를 합니다.
상태 변화 시 Flutter는 필요한 부분만을 효과적으로 업데이트하여 성능을 최적화합니다.

이러한 접근 방식은 성능 향상뿐만 아니라 개발자의 생산성도 높입니다.
복잡한 UI 업데이트 로직 대신 위젯 구성에만 집중할 수 있기 때문입니다.

요약하면, Flutter 개발은 위젯을 조합하여 반응형 크로스 플랫폼 애플리케이션을 만드는 과정입니다.

 

1. 사용자 정의 Flutter 위젯

Flutter는 풍부한 UI 위젯을 제공하며 이 위젯들을 이해하고 활용하는 것이 Flutter 개발의 핵심입니다.
자세한 내용은 공식 문서에서 확인할 수 있습니다.

1) 플랫폼별 위젯

• Material (Android) 위젯 - Google의 Material Design 가이드라인을 따르는 위젯
• Cupertino (iOS) 위젯 - Apple의 Human Interface Guidelines를 기반으로 한 iOS 스타일 위젯

2) 기본 위젯 (Basic Widgets)

• Text: 다양한 스타일의 텍스트를 표현
• Row와 Column: CSS의 flexbox와 유사한 방식으로 수평, 수직 레이아웃을 구성
• Stack: 위젯들을 겹쳐 배치할 수 있으며, Positioned 위젯과 함께 사용하여 정교한 위치 조정이 가능
• Container: 다재다능한 박스 위젯으로, 배경, 테두리, 그림자 등 다양한 스타일링이 가능

3) 상태 관리에 따른 위젯 분류

• Stateless Widget: 내부 상태가 없는 정적 위젯으로, 한 번 렌더링된 후 변경되지 않음.
• Stateful Widget: 동적 상태를 가진 위젯으로, 사용자 상호작용이나 이벤트에 따라 UI 변경 가능.

💡 성능 최적화를 위해서는 가능한 Stateless Widget을 사용하는 것이 좋습니다.
     Stateless Widget은 빌드 시 한 번만 생성되지만, Stateful Widget은 상태 변경 시마다 재빌드되기 때문입니다.

 

2. Flutter 프로젝트 구조

• 프로젝트 폴더 구조
  • 플랫폼별 폴더 (android, ios, linux, macos, web, windows): 각 플랫폼에 필요한 네이티브 코드 포함
  • lib 폴더: 주요 Dart 코드가 위치하는 곳
  • pubspec.yaml: 프로젝트 설정, 의존성, 리소스 등을 관리하는 파일
• 시작점 (Entry Point)
  • lib/main.dart 파일의 main() 함수가 앱의 시작점
  • 새 프로젝트 시작 시 기본 예제 코드는 삭제하고 시작하는 것이 일반적

•  패키지와 임포트
  • 패키지: Flutter와 커뮤니티에서(다른 개발자들) 제공하는 재사용 가능한 코드 모듈
  • import 문으로 필요한 패키지와 위젯을 프로젝트에 추가
  • 패키지 종류:
    • Dart 기본 패키지 (예: import 'dart:math')
    • Flutter 제공 패키지 (예: import 'package:flutter/material.dart')
    • 외부 또는 사용자 정의 패키지 (예: import '../models/mypackage.dart')

 

3. 기초적인 Flutter 화면을 구성하는 패턴

1. 'package:flutter/material.dart' 임포트
2. MaterialApp으로 메인 위젯 트리 감싸기
3. title과 theme과 같은 속성 설정
4. home : 속성을 주 페이지로 정의
5. Scaffold:
   • 앱의 시각적 레이아웃에 대한 기본 구조 제공
   • appBar 및 body와 같은 속성 설정
     • 레이아웃 요소 제공 (예: AppBar, Drawer, BottomNavigationBar)
     • body에 실제 화면 관련 위젯 정의

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
          child: Scaffold(
        appBar: AppBar(
          title: Text('pageView'),
        ),
        body: ~코드~,
      )),
    );
  }
}

 

Flutter의 가장 큰 매력은 단순하면서도 강력한 위젯 시스템을 통해 복잡한 UI를 손쉽게 구현할 수 있다는 점입니다.
이제 다양한 위젯을 조합하고 커스터마이징하며 Flutter 개발의 새로운 가능성을 발견해보시길 바랍니다.
앞으로도 Flutter와 관련된 더 많은 정보와 실용적인 팁을 공유드릴 테니, 계속 함께해 주세요!