중급

입력, 폼, 상호작용

사용자 입력을 받고 검증하며 버튼, 제스처, 스낵바로 반응합니다.

핵심 개념

입력, 폼, 상호작용 주요 항목

입력 처리

TextField는 사용자가 텍스트를 입력하는 기본 위젯입니다.

언제 쓰나: TextEditingController는 입력값을 직접 읽거나 제어할 때 사용합니다.

Flutter에서: FocusNode를 사용하면 키보드 포커스 흐름을 관리할 수 있습니다.

Card(
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text('입력 처리', style: TextStyle(fontWeight: FontWeight.bold)),
        SizedBox(height: 8),
        Text('TextField는 사용자가 텍스트를 입력하는 기본 위젯입니다.'),
      ],
    ),
  ),
)

폼 검증

Form은 여러 입력 필드를 하나의 검증 단위로 묶습니다.

언제 쓰나: validator는 입력값이 올바른지 확인하고 오류 문구를 반환합니다.

Flutter에서: 사용자에게 바로 수정할 수 있는 구체적인 오류 메시지를 보여주는 것이 중요합니다.

testWidgets('폼 검증', (tester) async {
  await tester.pumpWidget(const MaterialApp(home: HomePage()));
  expect(find.text('Flutter Wiki'), findsOneWidget);
});

확장 개념

TextField와 Form

  • TextField는 단일 입력을 받을 때 사용하고, 여러 입력을 검증해야 하면 Form과 TextFormField를 묶어 사용합니다.
  • validator는 입력값이 유효하지 않을 때 오류 문자열을 반환하고, 문제가 없으면 null을 반환합니다.
  • TextEditingController를 만들었다면 State가 사라질 때 dispose로 정리해야 합니다.

확장 개념

피드백과 포커스

  • 저장 성공이나 오류처럼 짧은 피드백은 SnackBar로 보여줄 수 있습니다.
  • FocusNode를 사용하면 입력칸 이동, 키보드 포커스, 접근성 흐름을 제어할 수 있습니다.
  • 버튼은 처리 중 중복 클릭을 막기 위해 로딩 상태와 비활성 상태를 함께 설계합니다.

코드

예제

TextFormField(
  validator: (value) {
    if (value == null || value.trim().isEmpty) {
      return '제목을 입력하세요';
    }
    return null;
  },
)

다음 단계

실습 체크리스트

TextField 만들기validator 작성SnackBar로 결과 알림
  • 출처세부 기준과 최신 변경 사항을 확인할 수 있습니다.
  • Flutter API Reference클래스, 메서드, 생성자 세부 정의를 확인합니다.
  • Flutter UI위젯, 레이아웃, 입력, 내비게이션 흐름을 함께 봅니다.