내가 보려고 쓰는 Flutter 일기
참고1 : https://api.flutter.dev/flutter/widgets/TextEditingController-class.html
참고2 : https://api.flutter.dev/flutter/material/TextField-class.html

TextField

오늘 배워볼 것은 TextField.
사용자가 글자를 입력할 수 있는 영역을 만들어준다. 사용자가 텍스트필드에 글자를 입력해 변화가 발생하면, onChanged callback을 호출하고, 입력이 완료(키보드의 엔터를 눌러야 완료된다.)되면 onSubmitted callback을 호출한다. 각각의 속성에 설정된 함수를 호출하는 것이다.

TextField 위젯에 값을 입력하고 그 값을 TextField 위젯 밖에서 이용하려면, controller가 필요하다. 텍스트 필드에 '값을 입력하세요' 같이 기본 텍스트 설정도 가능하다. controller의 경우 StatefulWidget에서 쓴다면, dispose()호출 때 같이 버려? 지워?주면 된다.

+) 22.12.21 수정
아래 코드 예시는 TextField 위젯 밖으로 입력값을 들고 나가지 않았으므로, controller가 없어도 된다. 그냥 initialize와 dispose 예시를 위해 넣었다.

decoration 속성이 기본으로 들어가 있는데, 텍스트필드 아래에 구분선을 만들어 주는 것이다. 그게 다라서, 추가로 설정하려면 할 수 있다. label 이나 Icon같은걸로! label 은 텍스트 필드 제목 같은 거라고 보면 된다.

유사한 위젯으로 TextFormField가 있다.

코드 예시로 알아보자

공식 페이지의 코드를 가져다가 조금 수정해서 돌려보았다. 저번 일기에서 배운 AlertDialog도 들어가 있어서 이해하기에 좋다.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyTextFieldWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyTextFieldWidget extends StatefulWidget {
  const MyTextFieldWidget({Key? key}) : super(key: key);

  @override
  State<MyTextFieldWidget> createState() => _MyTextFieldWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyTextFieldWidgetState extends State<MyTextFieldWidget> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Test TextField')),
      body: Center(
        child: Padding(
          //상하좌우로 띄워주기 (아이콘 왼쪽과 텍스트 필드 오른쪽이 화면 테두리와 조금 떨어져 있다.)
          padding: const EdgeInsets.all(20),
          child: TextField(
            controller: _controller,
            decoration: InputDecoration(
                labelText: '아무거나 입력하세요',
                helperText: '공백, 글자, 숫자, 특수문자가 가능해요',
                hintText: '???',  //글자를 입력하면 사라진다.
                icon: Icon(Icons.android),
                border: OutlineInputBorder(),
                contentPadding: EdgeInsets.all(3)
            ),
            onSubmitted: (String value) async {
              await showDialog<void>(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: const Text('Thanks!'),
                    content: Text(
                        'You typed "$value", which has length ${value.characters.length}.'),
                    actions: <Widget>[
                      TextButton(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        child: const Text('OK'),
                      ),
                    ],
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

실행화면은 아래와 같다.

우선, onSubmitted 속성에 showDialog를 설정해서, 텍스트필드의 텍스트 값 수정이 완료되면 Dialog가 뜨도록 하였다. value를 받아서,
(니가 입력한건 value야. 그리고 얘 길이는 value.characters.length야.)
라고 띄워준다.

+) 22.12.21 수정
아래에 다룬 코드 예시에서는 사실상 controller가 필요없다. 특정 객체에 넣어서 넘겨줄 곳도 없기 때문. Dialog Box로 넘어가는 입력값은 onSubmitted에서 처리하고 있다. TextField 위젯 밖에서 입력값을 사용해야 할 때 controller를 사용하도록 하자.

가져온 코드에서 내가 수정한 부분은 요기이다.

decoration: InputDecoration(
      labelText: '아무거나 입력하세요',
      helperText: '공백, 글자, 숫자, 특수문자가 가능해요',
      hintText: '???',  //글자를 입력하면 사라진다.
      icon: Icon(Icons.android),
      border: OutlineInputBorder(),
      contentPadding: EdgeInsets.all(3)
),

labelText에 설정한 값은 텍스트 필드를 누르면 위쪽으로 살짝 밀린다.
helperText에 설정한 값은, 말 그대로 입력을 어떻게 하면 되는지 힌트를 주는 도우미 글이다.
hintText는 텍스트 필드에 커서를 위치시키면 뜨는데, 뭔가 입력을 하면 사라진다. 아무것도 입력하지 않으면 ??? 글자가 그대로 있긴 한데, 입력으로 인식되지는 않는다.
icon은 텍스트 필드 왼쪽에 뜬다.
contentPadding은 있을 때와 없을 때의 차이를 살펴보자.

contentPadding: EdgeInsets.all(3)	contentPadding: EdgeInsets.all(30)	설정 안 함

텍스트 필드 안의 content 주변으로 padding을 주는 것이다.





오늘의 일기는 여기까지!