[ 2025. 07. 27 ] ✨ Flutter 기본 레이아웃 연습: Wrap으로 박스형 UI 구현

 

이번 실습에서는 Flutter를 이용해 간단한 박스형 UI 그리드 를 구현해보았습니다.  
`Wrap` 위젯을 활용해 A~H 알파벳 박스를 자동 줄바꿈 형태로 배치했으며,

각 박스는 파스텔톤 배경을 적용하여 부드럽고 깔끔한 느낌의 레이아웃 을 구성했습니다.

구현된 요소는 다음과 같습니다:

- `AppBar`: 상단 고정 헤더, 앱 타이틀 "App" 표시
- `Wrap`: 알파벳 박스를 유연하게 나열하고 줄바꿈 처리
- `AlphabetBox`: 재사용 가능한 커스텀 박스 위젯, 알파벳과 배경색 주입 가능
- `Scaffold`: 전체 레이아웃의 기본 구조 제공

Flutter의 기본 구조인 `StatelessWidget`, `Scaffold`, `MaterialApp` 등 핵심 위젯에 익숙해질 수 있는 연습이었습니다.

 

 

이번에 실무 처럼 lib 아래 모듈화 폴더를 따로 두어 정리를 했습니다.

제일 많이 쓰게 되는곳이 "screens" 이고 web에서는 "view" 라고 하는게 맞겠네요.

 

 위 폴더에 대한 설명 

• core
  • 앱의 전역 설정 또는 공통 유틸리티
    • theme.dart: 앱 전체 테마 설정
    • constants.dart: 공통으로 쓰는 상수들
    • logger.dart: 공통 로깅 처리
    • app_config.dart: 환경 변수 설정 등
• services
  • API 통신, 로컬 저장소, 인증 처리 등 비즈니스 로직
    • api_service.dart: REST API 요청 처리
    • auth_service.dart: 로그인/로그아웃
    • storage_service.dart: SharedPreferences
• models
  • 앱에서 사용되는 데이터 구조 클래스(모델) 를 정의
    • User, Post, Product, Category 등
    • API에서 받아오는 JSON 데이터를 Dart 객체로 변환할 때도 사용
• screens
  
  • 앱의 "화면" 단위로 구성된 모든 UI 페이지
• widgets
  • 재사용 가능한 UI 구성 요소들
  • 화면 전체가 아닌 조각 단위의 위젯