Flutter 게시판 앱 만들기 — TextField와 Form으로 완성하는 입력 폼

이제 우리가 만들 게시판 앱에 글을 쓸 수 있는 기능을 더해보자.
Flutter에서는 TextField와 Form 위젯을 이용해 사용자의 입력을 받을 수 있다.

이번 글에서는 제목과 내용을 입력할 수 있는 폼을 만들고,
유효성 검사(Validation)까지 구현해보자.

---

🧾 입력 폼 구성하기

우선 입력창을 만들기 위한 TextEditingController를 준비하자:

final _titleController = TextEditingController();
final _contentController = TextEditingController();

다음은 전체 글쓰기 화면 예시이다:

class WritePostScreen extends StatefulWidget {
  @override
  _WritePostScreenState createState() => _WritePostScreenState();
}

class _WritePostScreenState extends State<WritePostScreen> {
  final _formKey = GlobalKey<FormState>();
  final _titleController = TextEditingController();
  final _contentController = TextEditingController();

  void _submitPost() {
    if (_formKey.currentState!.validate()) {
      final title = _titleController.text;
      final content = _contentController.text;

      // 저장 로직은 이후 구현
      print('제목: $title');
      print('내용: $content');

      Navigator.pop(context); // 저장 후 돌아가기
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('글쓰기')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                controller: _titleController,
                decoration: InputDecoration(labelText: '제목'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '제목을 입력해주세요';
                  }
                  return null;
                },
              ),
              SizedBox(height: 12),
              TextFormField(
                controller: _contentController,
                decoration: InputDecoration(labelText: '내용'),
                maxLines: 5,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '내용을 입력해주세요';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submitPost,
                child: Text('등록하기'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

이 폼은 제목과 내용을 검사해서 입력이 없을 경우 에러 메시지를 띄우고,
입력이 완료되면 저장 처리 후 뒤로 돌아가는 구조야.

---

📌 주요 개념 요약

• TextEditingController: 입력값을 제어하는 도구
• Form & GlobalKey: 전체 폼의 상태를 추적
• validator: 각 필드에 유효성 검사 적용

Flutter에서는 이 구조를 이용해 거의 모든 입력 폼을 깔끔하게 구현할 수 있다.

---

🌱 다음 단계

다음 글에서는 글 작성 후 작성된 내용을 리스트에 반영하고,
앱에 저장하는 기능까지 구현해보자. (SharedPreferences 혹은 Firebase)

이제 게시판에 글을 '진짜로' 남길 수 있는 준비가 되었다!

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 앱 만들기 여정입니다.