Flutter의 폼(Form)과 입력 처리

Flutter에서 Form 위젯은 사용자의 입력을 수집하고 처리하는 데 매우 유용한 도구입니다. Form 위젯은 다양한 입력 필드를 포함하여 복잡한 사용자 입력 양식을 쉽게 만들 수 있도록 도와줍니다. 이번 글에서는 Flutter의 Form 위젯과 입력 처리 방법에 대해 자세히 살펴보겠습니다.

1. 기본 Form 사용법

Form 위젯은 여러 입력 필드를 그룹화하여 하나의 폼을 생성합니다. 각 입력 필드는 TextFormField 위젯을 사용하여 정의됩니다.

 

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('Form Demo')),
        body: MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(labelText: 'Enter your name'),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Processing Data')),
                  );
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

 

위 코드는 간단한 이름 입력 폼을 생성합니다. Form 위젯은 _formKey를 사용하여 상태를 관리하고, TextFormField 위젯은 이름을 입력받습니다. 제출 버튼을 누르면 폼이 검증되고, 유효성 검사를 통과하면 스낵바 메시지를 표시합니다.

2. 여러 입력 필드 처리

하나의 폼에 여러 입력 필드를 추가하여 사용자로부터 다양한 정보를 수집할 수 있습니다.

 

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('Form Demo')),
        body: MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();
  String? _name;
  String? _email;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextFormField(
              decoration: InputDecoration(labelText: 'Enter your name'),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter your name';
                }
                return null;
              },
              onSaved: (value) {
                _name = value;
              },
            ),
            TextFormField(
              decoration: InputDecoration(labelText: 'Enter your email'),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter your email';
                }
                return null;
              },
              onSaved: (value) {
                _email = value;
              },
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 16.0),
              child: ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    _formKey.currentState!.save();
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Processing Data: $_name, $_email')),
                    );
                  }
                },
                child: Text('Submit'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 이름과 이메일을 입력받는 폼을 생성합니다. 각 TextFormField 위젯은 onSaved 콜백을 사용하여 입력된 데이터를 저장합니다. 폼이 제출되면 입력된 데이터가 스낵바 메시지로 표시됩니다.

 

 

반응형

 

 

3. 입력 필드의 유효성 검사

TextFormField 위젯의 validator 속성을 사용하여 입력 필드의 유효성을 검사할 수 있습니다. 유효성 검사는 사용자가 올바른 데이터를 입력하도록 돕습니다.

 

TextFormField(
  decoration: InputDecoration(labelText: 'Enter your email'),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter your email';
    }
    if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
      return 'Please enter a valid email';
    }
    return null;
  },
  onSaved: (value) {
    _email = value;
  },
)

 

위 코드는 이메일 입력 필드의 유효성을 검사하는 예제입니다. 이메일 형식이 올바른지 정규 표현식을 사용하여 검사합니다.

4. 비밀번호 입력 필드

비밀번호 입력 필드는 obscureText 속성을 사용하여 입력된 비밀번호가 보이지 않도록 설정할 수 있습니다.

 

TextFormField(
  decoration: InputDecoration(labelText: 'Enter your password'),
  obscureText: true,
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter your password';
    }
    if (value.length < 6) {
      return 'Password must be at least 6 characters long';
    }
    return null;
  },
  onSaved: (value) {
    _password = value;
  },
)

 

위 코드는 비밀번호 입력 필드를 생성합니다. obscureText: true 속성을 사용하여 입력된 비밀번호를 숨깁니다.

5. 폼의 초기값 설정

TextFormField 위젯의 initialValue 속성을 사용하여 폼 필드의 초기값을 설정할 수 있습니다.

TextFormField(
  decoration: InputDecoration(labelText: 'Enter your name'),
  initialValue: 'John Doe',
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter your name';
    }
    return null;
  },
  onSaved: (value) {
    _name = value;
  },
)

 

위 코드는 이름 입력 필드에 초기값 "John Doe"를 설정합니다.

6. 폼 리셋

폼을 리셋하여 모든 입력 필드를 초기 상태로 되돌릴 수 있습니다.

 

ElevatedButton(
  onPressed: () {
    _formKey.currentState!.reset();
  },
  child: Text('Reset'),
)

 

위 코드는 폼을 리셋하는 버튼을 추가합니다. 버튼을 클릭하면 모든 입력 필드가 초기 상태로 되돌아갑니다.

결론

Form 위젯은 Flutter 애플리케이션에서 사용자 입력을 수집하고 처리하는 데 매우 유용한 도구입니다. 기본적인 사용법부터 여러 입력 필드 처리, 유효성 검사, 비밀번호 입력, 초기값 설정, 폼 리셋 등 다양한 기능을 활용하여 사용자 경험을 향상시킬 수 있습니다. Form 위젯을 적절히 활용하여 직관적이고 효율적인 입력 양식을 제공하는 애플리케이션을 만들어보세요.