Flutter로 첫 입력 필드 만들기: 초보 개발자의 도전기

안녕하세요! 스테디빌더입니다. 😁

지난번에는 Flutter 위젯과 상태 관리를 알아봤는데요, 이번에는 사용자 입력 필드를 만들어보고, 그 입력 값을 처리하는 간단한 앱을 만들어보려 합니다. 처음에는 조금 막막했지만, 하나씩 따라 하다 보니 생각보다 재미있었어요.

목차

1. Flutter에서 입력 필드란?
2. TextField와 상태 관리
3. 간단한 할 일 추가 앱 만들기
4. Flutter 초보자의 시행착오
5. 다음 단계: 데이터를 저장하는 앱으로 발전하기

---

1. Flutter에서 입력 필드란?

입력 필드는 사용자가 텍스트를 입력할 수 있는 UI 요소예요. Flutter에서는 TextField라는 위젯으로 입력 필드를 만들 수 있어요. 처음 TextField를 사용했을 때는 "이게 작동하려면 뭘 해야 하지?"라는 생각이 들었는데, 상태 관리와 함께 사용해야 한다는 걸 알게 됐어요.

기본 사용법

TextField(
  decoration: InputDecoration(
    labelText: "여기에 입력하세요",
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    print("입력한 값: $value");
  },
)

• decoration: 입력 필드의 외형을 꾸밉니다.
• onChanged: 사용자가 입력할 때마다 호출됩니다.
• 실제 동작 가능한 예제는 아래쪽에 있습니다 : )

---

2. TextField와 상태 관리

입력한 데이터를 화면에 표시하려면 상태 관리를  해요. 사용자가 입력한 값을 State에 저장하고, 화면에 즉시 반영되도록 만들어봅시다.

실행 가능한 예제: 입력 필드와 상태 관리

import 'package:flutter/material.dart';

void main() => runApp(InputApp());

class InputApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: InputScreen(),
    );
  }
}

class InputScreen extends StatefulWidget {
  @override
  _InputScreenState createState() => _InputScreenState();
}

class _InputScreenState extends State<InputScreen> {
  String _inputText = ""; // 입력 값을 저장할 변수

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter 입력 필드")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              decoration: InputDecoration(
                labelText: "텍스트를 입력하세요",
                border: OutlineInputBorder(),
              ),
              onChanged: (value) {
                setState(() {
                  _inputText = value;
                });
              },
            ),
            SizedBox(height: 20),
            Text(
              "입력된 값: $_inputText",
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드를 실행하면 사용자가 입력한 값이 아래에 실시간으로 표시됩니다.

---

3. 간단한 할 일 추가 앱 만들기

입력 필드와 버튼을 조합해서 To-Do List 앱을 만들어볼 거예요. 사용자가 텍스트를 입력하고 "추가" 버튼을 누르면 목록에 새로운 할 일이 추가됩니다.

실행 가능한 예제: 할 일 추가 앱

import 'package:flutter/material.dart';

void main() => runApp(TodoApp());

class TodoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TodoScreen(),
    );
  }
}

class TodoScreen extends StatefulWidget {
  @override
  _TodoScreenState createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  List<String> _todoList = []; // 할 일 목록
  TextEditingController _controller = TextEditingController(); // 입력 필드 컨트롤러

  void _addTodo() {
    if (_controller.text.isNotEmpty) {
      setState(() {
        _todoList.add(_controller.text);
        _controller.clear(); // 입력 필드 초기화
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("To-Do List")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                      labelText: "할 일을 입력하세요",
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                SizedBox(width: 10),
                ElevatedButton(
                  onPressed: _addTodo,
                  child: Text("추가"),
                ),
              ],
            ),
            SizedBox(height: 20),
            Expanded(
              child: ListView.builder(
                itemCount: _todoList.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_todoList[index]),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

---

4. Flutter 초보자의 시행착오

앱을 만들면서 이런 실수들을 했어요.

1. 입력 필드 초기화를 빼먹어서, 추가한 후에도 텍스트가 남아 있던 문제.
   • 해결: TextEditingController를 사용해 clear() 메서드로 초기화.
2. setState()를 놓쳐서 UI가 갱신되지 않았던 문제.
   • 해결: 상태 변경 시 setState()로 화면을 다시 빌드.

---

5. 다음 단계: 데이터를 저장하는 앱으로 발전하기

지금은 앱을 껐다 켜면 데이터가 사라지는데요, 다음에는 SharedPreferences를 사용해서 데이터를 저장하고 불러오는 기능을 추가해볼 계획입니다. 저장된 할 일 목록을 유지하는 앱으로 발전시켜 봅시다!

---

마무리

Flutter를 배우며 입력 필드를 활용한 간단한 앱을 만들어봤어요. 처음에는 입력 값 처리와 상태 관리가 낯설었지만, 직접 해보니 어렵지 않았어요. 초보 개발자로서 하나씩 배우는 재미가 정말 큽니다.

혹시 비슷한 도전을 하고 계신 분들이 있다면 댓글로 의견을 나눠주세요! 다음에는 더 발전된 앱을 만들어볼게요. 😊