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

TextFormField

오늘 배워볼 것은 TextFormField.
공식페이지에는 TextField를 FormField로 감싸놓은 위젯이라고 하는데,
FormField는 현재 상태를 바탕으로 업데이트, 유효성 검사를 통한 에러를 UI에 시각적으로 반영한다고 한다. 즉, TextFormField안에 값을 입력했을 때 요구하는 조건을 만족시키지 않는다면, 오류 메시지를 띄워주는 등 화면에 표시를 해주는 것이다. 쓰는 속성이 몇개 다르지만, TextField와 거의 비슷하다.

코드 예시로 알아보자

공식 페이지 코드를 가져다가, 저번 시간 TextField코드에 일부만 넣어서 돌려보았다.

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: MyTextFormFieldWidget(),
    );
  }
}

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

  @override
  State<MyTextFormFieldWidget> createState() => _MyTextFormFieldWidgetState();
}


class _MyTextFormFieldWidgetState extends State<MyTextFormFieldWidget> {

  @override
 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Test TextField')),
      body: Center(
        child: Padding(
          //상하좌우로 띄워주기 (아이콘 왼쪽과 텍스트 필드 오른쪽이 화면 테두리와 조금 떨어져 있다.)
          padding: const EdgeInsets.all(20),
          child: TextFormField(
            autovalidateMode: AutovalidateMode.always,
            // controller: _controller,
            decoration: InputDecoration(
                labelText: 'Your Name',
                hintText: 'What do people call you?',
                icon: Icon(Icons.android),
                border: OutlineInputBorder(),
            ),
            validator: (String? value) {
              return (value != null && value.contains('@')) ? 'Do not use the @ char.' : null;
            },
          ),
        ),
      ),
    );
  }
}

TextFormField 안에 '@' 문자를 포함시켜 입력하면, validator에 설정한 에러 메시지를 띄운다. 저번 TextField와 거의 유사한데, autovalidateMode 속성을 설정하였다.

autovalidateMode 는 FormField가 가지고 있는 속성을 상속받은 것인데, validator에 지정된 유효성 검사에서 반환된 에러 메시지를 자동으로 띄워주는 역할을 한다. (사실 validator만 설정하면 되는 줄 알고 엄청 헤맸는데, autovalidateMode의 기본값은 autovalidateMode.disabled였다...)

그리고 controller 지정을 안해줘도 된다는 걸 알았다...!

TextField 도 동일하다. 없으면 알아서 만들어 쓴댄다. 하지만 일반적인 경우 텍스트 필드를 하나만 만들지는 않을 것이므로, 각각의 필드에 입력된 값을 제어하기 위해 컨트롤러를 만들어 쓰는 듯하다. 뇌피셜이다.

실행결과를 보자

@ 안 넣었다	@ 넣었다

사실 Form 으로 감싸서 하는 방법을 주로 쓰는듯 한데, GlobalKey를 아직 이해 못해서 요건 다음에...




오늘의 일기는 여기까지!