입력 위젯

•

TextField

•

Checbox

•

Radio

•

Switch

•

Button

◦

TextButton

◦

ElevatedButton

◦

OutlineButton

TextField

사용자로부터 텍스트를 입력받을 수 있는 위젯

문법

TextField(
  controller: TextEditingController(),  // 텍스트 필드의 값과 상호 작용하기 위한 컨트롤러 (옵션)
  decoration: InputDecoration(
    labelText: 'Enter your text',  // 텍스트 필드의 라벨 (옵션)
    hintText: 'Type something...',  // 텍스트 필드 내에 힌트를 제공 (옵션)
  ),
  onChanged: (value) {
    // 텍스트가 변경될 때 실행되는 콜백 함수
  },
)
Dart
복사

예시

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField Example'),
        ),
        body: Center(
          child: TextField(
            controller: TextEditingController(),
            decoration: InputDecoration(
              labelText: 'Enter your text',
              hintText: 'Type something...',
            ),
            onChanged: (value) {
              print('Text value changed: $value');
            },
          ),
        ),
      ),
    );
  }
}
Dart
복사

Checbox

사용자가 선택 여부를 나타낼 수 있는 위젯

문법

Checkbox(
  value: true,  // 체크박스의 초기값 (true 또는 false)
  onChanged: (value) {
    // 체크박스의 상태가 변경될 때 실행되는 콜백 함수
  },
)
Dart
복사

예시

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Checkbox Example'),
        ),
        body: Center(
          child: Checkbox(
            value: true,
            onChanged: (value) {
              print('Checkbox value changed: $value');
            },
          ),
        ),
      ),
    );
  }
}
Dart
복사

Radio

여러 옵션 중 하나를 선택할 수 있는 라디오 버튼 위젯

문법

Radio(
  value: 1,  // 라디오 버튼의 값
  groupValue: selectedValue,  // 그룹 내에서 현재 선택된 값
  onChanged: (value) {
    // 라디오 버튼의 상태가 변경될 때 실행되는 콜백 함수
  },
)
Dart
복사

예시

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  int selectedValue = 1;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Radio Example'),
        ),
        body: Center(
          child: Radio(
            value: 1,
            groupValue: selectedValue,
            onChanged: (value) {
              print('Radio value changed: $value');
            },
          ),
        ),
      ),
    );
  }
}
Dart
복사

Switch

사용자가 특정 옵션의 상태를 토글할 수 있는 스위치 위젯

문법

Switch(
  value: true,  // 스위치의 초기값 (true 또는 false)
  onChanged: (value) {
    // 스위치의 상태가 변경될 때 실행되는 콜백 함수
  },
)
Dart
복사

예시

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Switch Example'),
        ),
        body: Center(
          child: Switch(
            value: true,
            onChanged: (value) {
              print('Switch value changed: $value');
            },
          ),
        ),
      ),
    );
  }
}
Dart
복사

Button

•

TextButton

•

ElevatedButton

•

OutlineButton

TextButton

간단한 텍스트 버튼

문법

TextButton(
  onPressed: () {
    // 버튼이 눌렸을 때 실행되는 콜백 함수
  },
  child: Text('Press me'),  // 버튼에 표시될 텍스트
)
Dart
복사

예시

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextButton Example'),
        ),
        body: Center(
          child: TextButton(
            onPressed: () {
              print('TextButton pressed');
            },
            child: Text('Press me'),
          ),
        ),
      ),
    );
  }
}
Dart
복사

ElevatedButton

높은 표면에서 떠오르는 효과를 가진 버튼

문법

ElevatedButton(
  onPressed: () {
    // 버튼이 눌렸을 때 실행되는 콜백 함수
  },
  child: Text('Press me'),  // 버튼에 표시될 텍스트
)
Dart
복사

예시

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ElevatedButton Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('ElevatedButton pressed');
            },
            child: Text('Press me'),
          ),
        ),
      ),
    );
  }
}
Dart
복사

OutlineButton

외곽선이 있는 버튼

문법

OutlinedButton(
  onPressed: () {
    // 버튼이 눌렸을 때 실행되는 콜백 함수
  },
  child: Text('Press me'),  // 버튼에 표시될 텍스트
)
Dart
복사

예시

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('OutlinedButton Example'),
        ),
        body: Center(
          child: OutlinedButton(
            onPressed: () {
              print('OutlinedButton pressed');
            },
            child: Text('Press me'),
          ),
        ),
      ),
    );
  }
}
Dart
복사

Flutter 입력 위젯 분류

1. 일반 입력 위젯 (Form과 관계 없음)

Form의 validate(), save()와 연결되지 않는 위젯

위젯	설명
TextField	텍스트 입력
Checkbox	체크박스
Radio	라디오 버튼
Switch	스위치
Slider	슬라이더
DropdownButton	드롭다운
Button	일반 버튼
TextButton	텍스트 버튼
ElevatedButton	강조 버튼
OutlinedButton	테두리 버튼

특징

•

Form 없이 사용

•

validator 없음

•

onSaved 없음

•

onChanged로 값 처리

•

Controller로 값 관리

예시

TextField(
  onChanged: (value) {
    print(value);
  },
)

Checkbox(
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value!;
    });
  },
)
Dart
복사

2. Form용 입력 위젯 (FormField 계열)

Form 안에서 사용하며, validate(), save() 사용 가능

Form 위젯	설명
TextFormField	텍스트 입력
DropdownButtonFormField	드롭다운
FormField	커스텀 폼 위젯
Checkbox → FormField로 감싸서 사용
Radio → FormField로 감싸서 사용
Switch → FormField로 감싸서 사용

특징

•

Form 안에서 사용

•

validator 사용 가능

•

onSaved 사용 가능

•

FormState.validate()

•

FormState.save()

예시

TextFormField(
  validator: (value) {
    if (value!.isEmpty) return "값 입력";
    return null;
  },
  onSaved: (value) {
    print(value);
  },
)
Dart
복사

3. Checkbox / Radio / Switch 사용하는 방법

checkbox, radio, switch 이 위젯들은 Form 전용 위젯이 없어서, FormField로 감싸서 사용

FormField<bool>(
  initialValue: false,
  onSaved: (value) {
    print(value);
  },
  builder: (state) {
    return CheckboxListTile(
      value: state.value,
      onChanged: (value) {
        state.didChange(value);
      },
      title: Text("약관 동의"),
    );
  },
)
Dart
복사

핵심 코드

state.didChange(value);
Dart
복사

→ Form에 값 전달

4. 전체 위젯 분류 정리 (매우 중요)

일반 입력 위젯

TextField
Checkbox
Radio
Switch
Slider
DropdownButton
Plain Text
복사

Form 입력 위젯

TextFormField
DropdownButtonFormField
FormField (Checkbox, Radio, Switch 커스텀)
Plain Text
복사

버튼

TextButton
ElevatedButton
OutlinedButton
Plain Text
복사

버튼은 Form 위젯이 아니라

Form 실행 트리거 역할

5. Flutter Form 구조 (중요)

Form
 ├─ TextFormField
 ├─ DropdownButtonFormField
 ├─ FormField (Checkbox)
 ├─ FormField (Radio)
 └─ ElevatedButton (Submit)
Plain Text
복사

6. 실무 기준 사용 구분

화면	위젯
로그인	TextFormField
회원가입	TextFormField + Form
검색창	TextField
설정 화면	Switch
설문조사	FormField
게시글 작성	TextFormField
필터	DropdownButton

정리

•

일반 입력 위젯: TextField, Checkbox, Radio, Switch (Form 없이 사용)

•

Form 입력 위젯: TextFormField, DropdownButtonFormField, FormField (validate/save 가능)

•

Button: TextButton, ElevatedButton, OutlinedButton (Form 실행 트리거)

graph TD
    A["입력 위젯"] --> B{"Form 사용?"}
    B -->|"No"| C["일반 입력 위젯"]
    B -->|"Yes"| D["Form 입력 위젯"]
    
    C --> C1["TextField"]
    C --> C2["Checkbox"]
    C --> C3["Radio"]
    C --> C4["Switch"]
    
    D --> D1["TextFormField"]
    D --> D2["DropdownButtonFormField"]
    D --> D3["FormField"]
    
    D1 --> E["Form"]
    D2 --> E
    D3 --> E
    
    E --> F["FormState"]
    F --> F1["validate()"]
    F --> F2["save()"]
    F --> F3["reset()"]
    
    G["Button"] --> H["Form 실행"]
    H --> F1
Mermaid
복사

Flutter 입력 위젯 구조 핵심 개념

Flutter 입력 시스템 구조를 이해하는 것이 중요합니다.

graph TD
    A["Input Widget"] --> B["FormField"]
    B --> C["Form"]
    C --> D["FormState"]
    D --> E["validate()"]
    D --> F["save()"]
    D --> G["reset()"]
Mermaid
복사

이 구조 이해하면 Flutter Form 거의 완전히 이해한 것입니다.

강의노트용으로 Flutter 입력 위젯 데이터 처리 방법 3가지 정리해드리겠습니다.

이거 실무에서 매우 중요한 개념입니다.

Flutter 입력 위젯 값 가져오는 방법 3가지

1. Controller 방식

2. Form 방식

3. Map 방식 (Form + onSaved)

1. Controller 방식

가장 기본적인 방법

각 TextField / TextFormField마다 Controller를 연결하고

controller.text 로 값을 가져옵니다.

구조

TextEditingController controller = TextEditingController();
Dart
복사

TextField(
  controller: controller,
)
Dart
복사

print(controller.text);
Dart
복사

예제

final emailController = TextEditingController();
final passwordController = TextEditingController();

ElevatedButton(
  onPressed: () {
    print(emailController.text);
    print(passwordController.text);
  },
  child: Text("로그인"),
)
Dart
복사

특징

항목	설명
값 가져오기	controller.text
실시간 변경	가능
초기값 설정	controller.text =
입력값 제어	가능
단점	필드 많으면 controller 많아짐

언제 사용?

로그인
검색창
채팅 입력
프로필 수정
텍스트 제어 필요할 때
Plain Text
복사

2. Form 방식 (onSaved)

Form + TextFormField + onSaved 사용

Form의 save()가 호출될 때

각 TextFormField의 onSaved 실행됨

구조

Form
TextFormField
onSaved
formKey.currentState!.save()
Dart
복사

예제

final _formKey = GlobalKey<FormState>();

String email = '';
String password = '';

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        onSaved: (value) {
          email = value!;
        },
      ),
      TextFormField(
        onSaved: (value) {
          password = value!;
        },
      ),
      ElevatedButton(
        onPressed: () {
          _formKey.currentState!.save();
          print(email);
          print(password);
        },
        child: Text("저장"),
      )
    ],
  ),
)
Dart
복사

특징

항목	설명
값 저장 시점	save() 호출
validator	사용 가능
controller 필요	없음
입력 많을 때	좋음

언제 사용?

회원가입
설문조사
게시글 작성
관리자 입력폼
입력 필드 많은 화면
Plain Text
복사

3. Map 방식 (실무에서 많이 사용)

Form + onSaved + Map 저장 방식

API 전송할 때 가장 편함

구조

Map<String, String> formData = {};
Dart
복사

TextFormField(
  onSaved: (value) => formData['email'] = value!,
)
Dart
복사

_formKey.currentState!.save();
print(formData);
Dart
복사

예제

final _formKey = GlobalKey<FormState>();
Map<String, String> formData = {};

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        decoration: InputDecoration(labelText: "Email"),
        onSaved: (value) => formData['email'] = value!,
      ),
      TextFormField(
        decoration: InputDecoration(labelText: "Password"),
        onSaved: (value) => formData['password'] = value!,
      ),
      ElevatedButton(
        onPressed: () {
          _formKey.currentState!.save();
          print(formData);
        },
        child: Text("전송"),
      )
    ],
  ),
)
Dart
복사

결과

{
  email: test@test.com,
  password: 1234
}
Dart
복사

API 보내기 매우 좋음

4. 세 가지 방법 비교 (중요)

방식	특징	사용
Controller	직접 제어	로그인, 검색
Form	save 시 저장	입력폼
Map	API 전송	회원가입
onChanged	실시간	검색

5. 실무 기준 선택 방법 (중요)

입력 필드 적다 → Controller
입력 필드 많다 → Form
서버 전송 → Map
실시간 검색 → onChanged
Plain Text
복사

Flutter 입력 처리 전체 구조 정리

입력 위젯 값 가져오기 방법

1. Controller 방식
   controller.text

2. Form 방식
   onSaved → save()

3. Map 방식
   onSaved → Map 저장 → API 전송
Plain Text
복사

실무에서 가장 많이 사용하는 패턴

if (_formKey.currentState!.validate()) {
  _formKey.currentState!.save();
  api.send(formData);
}
Dart
복사

이 구조는

Flutter 로그인 / 회원가입 / 게시판 / 쇼핑몰 / 관리자 페이지 전부 동일한 패턴입니다.