Flutter Form & TextoFormFiled 사용법

이번에는 TextoFormFiled를 사용해 보겠다

TextoFormFiled를 사용하면 스타일과 입력체크등을 설정할 수 있다

 

1. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(),
      ),
    );
  }
}

 

 

2. TextoFormFiled

practice_page.dart

이렇게 만들면 바로 만들어지긴 하다

아래를 보도록 하자

잘 안 보이지만 중간에 파란 줄이 입력란이다

 

2-1. obscureText

obscureText를 true로 설정하면 비밀번호처럼 된다.

확인했으니 지워주자. 지우면 기본값 false로 설정된

 

2-3. hintText

decoration: InputDecoration(

),

위의 코드로 인풋박스의 스타일을 변경시킬 수 있다

hintText는 placeholder라고 보면 된다. 뭘 적어야 하는지 알려줄 때 사용한다

아래처럼 말이다

 

2-4. enabledBorder

기본 TextFormField의 디자인을 설정 한다.

enabledBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(30),
),

변화가 생겼다고 생각한다. 혹시 변화가 없다면 넘어가자. 글을 입력을 한 번이라도 했을 경우 입력창이 focus상태라서 그렇다

 

2-5. focusedBorder

그래서 여기서 바뀌는지 확인해 보자.

focusedBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(20),
),

위의 코드를 추가하였다. 아래를 확인해 보자

커서가 있는 게 focus상태이다

 

2-6. errorBorder

errorBorder는 에러가 생겼을 때의 테투리 스타일을 설정할 수 있다

2-6-1. validator

우선 에러조건을 만들어야 한다

validator: (value) => value!.isEmpty ? "입력해줘요" : null,

decoration위에다가 위의 코드를 넣어주도록 한다

입력값이 들어왔을 때, 빈값인지 아닌지 체크한 뒤, 빈값일 경우 [입력해 줘요]를 반환하고 빈값이 아닐 경우 null를 반환한다

2-6-2. Border 작성

이제 errorBorder를 작성해 보자

errorBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(20),
),

위의 코드를 추가하였다. 하지만 지금은 확인할 수가 없기 때문에 5번에서 확인하도록 하겠다

 

2-7. focusedErrorBorder

focusedErrorBorder는 Error가 발생한 후, 입력란을 터치했을 때(focus상태)의 스타일이다

focusedErrorBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(20),
),

위의 코드를 추가하였다

 

 

3. Form

에러를 확인하려면 서브밋(submit)이 필요하다

그래서 Form으로 저기 있는 TextFormField를 감싸줘야 할 필요가 있다

감싸주기 위해서 어느 정도의 수정이 필요하다. 귀찮기 때문에 아래의 코드를 복사해서 사용한다

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.only(top: 250),
        child: Form(
          child: Column(
            children: [
              TextFormField(
                validator: (value) => value!.isEmpty ? "입력해줘요" : null,
                decoration: InputDecoration(
                  hintText: "아무거나 입력하기",
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(30),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  errorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  focusedErrorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

대충 바뀐 부분이 빨간색 부분이다

 

 

4. 글로벌 Key

글로벌 Key는 Button을 눌러서 서브밋을 보낼 때, Form의 상태 (에러인지 아닌지) 등의 정보를 얻게 하기 위해서 사용한다

final _formatKey = GlobalKey<FormState>();

위의 코드를 작성해주었다

Form내부에 key를 추가해준다. 그럼 연결되었다

 

5. Button생성

서브밋을 하기 위해서는 Button이 필요하기 때문에 Button을 대충 만들어준다

ElevatedButton(
  onPressed: () {
    if (!_formatKey.currentState!.validate()) {
      print("fail");
    }
  },
  child: Text("Test"),
)

위의 코드를 넣어주었다

버튼을 눌렀을 때, onPressed가 실행이 되면서 formKey로 form상태를 불러와 에러인지 아닌지 확인할 수 있는 코드를 넣었다

 

6. 실행

실행한 뒤, 아무것도 입력 안 하고 버튼을 눌러보았다

 

이렇게 에러메시지가 표시된다

이번에는 뭔가를 입력해서 다시 버튼을 눌러보겠다

뭔가를 입력하고 버튼을 눌렀더니 에러메시지가 사라졌다