[Flutter_개발] 상품등록 페이지 구현

오늘은 Flutter에서 상품 등록 페이지를 구현하며 입력 검증, 상태 관리, Navigator를 통한 화면 전환, 그리고 데이터 전달 흐름을 학습했다.

1. 핵심 구현 기능

상단바(AppBar)에 뒤로가기 버튼과 제목(‘상품 등록’)을 추가했다.
이미지 선택 버튼을 누르면 AlertDialog 팝업이 나타나고, ‘텍스트로 표시’ 또는 ‘샘플 이미지 사용(picsum)’을 선택할 수 있다.
이미지 선택 결과는 _imageSelection 변수('text', 'network', null)로 관리된다.
ImagePreview 위젯에서 선택된 상태에 따라 표시 내용이 달라진다.
- 'text': “이미지 선택됨” 텍스트 표시
- 'network': Image.network로 샘플 이미지 표시
- null: “이미지가 선택되지 않았습니다.” 문구 표시
상품 이름, 가격, 설명 입력 필드는 TextFormField와 validator를 이용해 검증을 수행한다.
- 이름은 30자, 설명은 1000자로 제한(maxLength)
- 가격은 숫자만 입력 가능(FilteringTextInputFormatter.digitsOnly)
등록하기 버튼을 누르면 submit()이 실행되어 전체 검증과 데이터 전달이 이루어진다.
- 모든 필드가 유효하면 ProductEntity 객체를 생성하고
- AlertDialog를 통해 등록 완료 메시지를 표시한 뒤
- Navigator를 이용해 홈 화면으로 돌아가며 데이터를 전달한다.

2. submit() 메서드의 동작 순서

FocusScope.of(context).unfocus()로 키보드를 닫는다.
formKey.currentState!.validate()를 통해 모든 입력 필드의 validator를 실행한다.
- 하나라도 유효하지 않으면 return으로 종료된다.
hasSelectedImage를 통해 이미지가 선택되지 않았으면 SnackBar를 띄우고 종료한다.
입력값을 기반으로 ProductEntity를 생성한다.

final product = ProductEntity(
  id: DateTime.now().millisecondsSinceEpoch.toString(),
  name: _nameController.text.trim(),
  price: int.parse(_priceController.text),
  description: _descController.text.trim(),
  imageUrl: imageUrl,
);

id는 현재 시각의 밀리초 단위로 자동 생성된다.
showDialog()로 AlertDialog를 띄워 등록 완료 정보를 표시한다.
“확인” 버튼을 누르면

Navigator.pop(ctx);
Navigator.pop(context, product);

가 실행되어 팝업과 페이지가 닫히며 상품 정보가 홈 화면으로 전달된다.

3. Navigator를 통한 데이터 전달

홈 화면에서 등록 페이지를 열 때 Navigator.push<ProductEntity>(...)로 이동한다.
등록 페이지에서 Navigator.pop(context, product)로 데이터를 반환한다.
홈 화면에서는 final result = await Navigator.push(...)로 반환된 상품 정보를 수신한다.
수신된 데이터를 setState(() => _lastSubmitted = result)로 상태에 반영해 화면을 갱신한다.

즉, 등록 완료 후 홈 화면에 상품이 자동으로 추가되는 구조로 되어 있다.

4. id의 역할

ProductEntity의 id는 사용자가 입력하지 않아도 자동 생성되는 고유 식별자이다.
DateTime.now().millisecondsSinceEpoch.toString()을 사용해 중복되지 않는 값을 만든다.
데이터베이스 저장 시 기본 키(primary key)로 활용할 수 있다.
현재 코드에서는 UI에 표시하지 않지만, 원하면 팝업이나 리스트의 Key 값으로 표시할 수 있다.

5. 학습 포인트

Form과 GlobalKey<FormState>를 이용한 전체 입력 검증 구조
TextEditingController를 이용한 입력값 제어
SnackBar를 이용한 예외 처리 및 사용자 피드백
showDialog를 이용한 AlertDialog 구성
Navigator.pop(context, result)를 통한 데이터 반환 및 화면 이동
DateTime.now().millisecondsSinceEpoch을 이용한 고유 ID 생성 방식 이해

6. 느낀 점

폼 입력, 검증, 팝업, 데이터 전달까지 하나의 흐름으로 연결되는 과정을 직접 구현하면서
Flutter 앱의 상태 관리와 화면 간 데이터 흐름을 명확히 이해할 수 있었다.
UI는 단순한 시각적 구성요소가 아니라, 데이터의 생성과 전달을 담당하는 로직의 일부라는 점을 실감했다.

ok0530 님의 블로그