📍 튜터님과 Widget 공부
✏️ Placeholder
UI 레이아웃에서 임시 자리 표시용 위젯
주로 개발 중 디자인 확인이나 공간 확보용으로 사용
사각형 모양에 X 표시가 그려짐
주요 속성
| 속성 | 설명 | 기본값 |
|---|---|---|
color | 표시 선 색상 | Color(0xFF455A64) (회색 계열) |
strokeWidth | 표시 선 굵기 | 2.0 |
fallbackWidth | 최소 가로 크기 | 400.0 |
fallbackHeight | 최소 세로 크기 | 400.0 |
child | 실제 자식 위젯으로 나중에 대체 가능 | null |
사용 예시
Placeholder(
color: Colors.red,
strokeWidth: 4,
fallbackHeight: 100,
fallbackWidth: 100,
)화면에 빨간색 X 표시된 100x100 사각형이 나타남
특징 / 주의점
레이아웃 확인용으로만 사용
실제 앱에서는 Placeholder가 노출되지 않도록 주의
디자인 단계에서 공간 확보용으로 자주 사용됨
✏️ RichText
RichText는 텍스트의 일부 스타일을 다르게 하고 싶을 때 사용하는 위젯
Text 위젯은 단일 스타일만 가능하지만, RichText는 부분별로 다른 스타일 적용 가능
기본 구조
RichText(
text: TextSpan(
text: '안녕하세요 ',
style: TextStyle(color: Colors.black, fontSize: 20),
children: [
TextSpan(
text: 'Flutter',
style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
),
TextSpan(
text: ' World!',
style: TextStyle(color: Colors.red),
),
],
),
)- text: 필수. TextSpan 타입 사용
- text 속성: 기본 문자열
- style 속성: 텍스트 기본 스타일
- children: 하위 TextSpan 목록. 각 부분별 스타일 적용 가능
특징
부분별 글자 색, 폰트, 크기, 굵기, 장식(underline, overline 등) 변경 가능
클릭 이벤트 가능: GestureRecognizer 사용
줄 바꿈, 정렬 등은 TextAlign, TextDirection 사용 가능
RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: '클릭 ',
style: TextStyle(color: Colors.black, fontSize: 18),
children: [
TextSpan(
text: '여기',
style: TextStyle(color: Colors.blue),
recognizer: TapGestureRecognizer()
..onTap = () {
print('텍스트 클릭!');
},
),
TextSpan(
text: ' 하세요!',
),
],
),
)📝 Freezed 패키지
https://pub.dev/packages/freezed
✏️ Freezed란?
Dart에서 데이터 클래스, union types, 객체 복제(copyWith) 등을 쉽게 생성하기 위한 코드 생성기
수동으로 모델 정의 시 반복되는 작업(생성자, toString, ==, hashCode, copyWith, JSON 직렬화 등)을 자동화
Immutable 클래스를 기본으로 제공하며, 필요시 mutable 클래스도 생성 가능
✏️ 설치 방법
Flutter 프로젝트
flutter pub add freezed_annotation
flutter pub add dev:build_runner
flutter pub add dev:freezed
# JSON 직렬화 필요 시
flutter pub add json_annotation
flutter pub add dev:json_serializable순수 Dart 프로젝트
dart pub add freezed_annotation
dart pub add dev:build_runner
dart pub add dev:freezed
# JSON 직렬화 필요 시
dart pub add json_annotation
dart pub add dev:json_serializable- freezed_annotation: Freezed 전용 annotation
- freezed: 코드 생성기
- build_runner: 코드 생성 실행 도구
✏️ 기본 사용법
analysis_options 추가
analyzer:
errors:
invalid_annotation_target: ignore예시 구조
import 'package:freezed_annotation/freezed_annotation.dart';
part 'main.freezed.dart'; // 필수, Freezed가 생성하는 코드
part 'main.g.dart'; // JSON 직렬화용 (선택)part는 Freezed가 생성한 파일을 원본 파일과 연결하는 역할
반드시 파일 이름과 맞춰야 함 (main.dart → main.freezed.dart)
@freezed
abstract class Person with _$Person {
const factory Person({
required String firstName,
required String lastName,
required int age,
}) = _Person;
factory Person.fromJson(Map<String, Object?> json)
=> _$PersonFromJson(json);
}- @freezed → 이 클래스를 Freezed로 처리하겠다는 표시
- abstract class Person with _$Person → mixin을 통해 Freezed 코드와 연결
- const factory → immutable 생성자 정의
- _Person → Freezed가 내부적으로 만드는 private class
- fromJson → JSON → 객체 변환용, 직렬화가 필요할 때만 사용
코드 생성
Freezed는 코드 자동 생성이 필수
# 기존 build_runner 명령
flutter pub run build_runner build --delete-conflicting-outputs
# 추천: 최신 방식
dart run build_runner build --delete-conflicting-outputs오류 없이 생성되면 main.freezed.dart와 main.g.dart가 생성
이 파일들은 수정하지 않고 사용만 함
정리
- 파일 생성 → part 연결
- @freezed + abstract class + const factory 정의
- JSON 직렬화 필요시 fromJson 추가
- build_runner로 코드 생성
- 생성된 mixin과 메서드(copyWith, toJson, etc.) 사용
✏️ Freezed의 장점
- 불변 객체(immutable) 생성
final p = Person(firstName: "Hyun", lastName: "Seo", age: 24);
// p.firstName = "Other"; // ❌ 불가- copyWith 지원 → 일부 필드만 변경 가능
final p2 = p.copyWith(age: 31);- ==와 hashCode 자동 생성 → 값 비교 가능
final p3 = Person(firstName: "Hyun", lastName: "Seo", age: 24);
print(p == p3); // true- toString 자동 생성
print(p); // Person(firstName: Hyun, lastName: Seo, age: 24)- JSON 직렬화
final json = p.toJson();
final pFromJson = Person.fromJson(json);공부 소감
오늘은 강의 5강을 완강하는 것보다 과제를 시작하는 게 좋을 것 같아서 freezed 패키지를 따로 공부하고 과제를 시작했다 확실히 데이터 모델을 내가 직접 작성하는 것보다 패키지를 쓰는 게 코드 양도 줄고 효율적이라 앞으로도 이용하면 편리할 것 같다 다음주는 개인 과제에 집중해서 후딱 끝낸 뒤에 강의 마저 들어야겠다
