플러터 TextFormField에서 블루투스 키보드 입력 제한하기: inputFormatters 사용법

Flutter 앱 개발 시 TextFormField를 사용해 사용자 입력을 처리하는 경우가 많습니다.

특히, 모바일 디바이스에서는 화면 내 소프트 키보드 외에 블루투스 키보드로 입력을 받을 수 있습니다.

그러나 때로는 블루투스 키보드의 입력을 제한해야 할 필요가 있을 수 있습니다.

이 글에서는 이를 구현하기 위한 방법으로 inputFormatters를 활용하는 방법을 소개하겠습니다.

1. 왜 블루투스 키보드 입력을 제한해야 하나?

블루투스 키보드 입력을 제한해야 하는 이유는 상황에 따라 다릅니다:

• 보안 요구사항: 일부 앱은 특정 방식으로만 데이터를 입력받도록 요구됩니다.
• UX 개선: 사용자가 소프트 키보드 외부에서 입력하면 의도하지 않은 데이터가 입력될 가능성이 있습니다.
• 입력 제어: 키보드 외부 장치에서 잘못된 문자나 포맷을 입력할 가능성을 방지합니다.

2. inputFormatters란?

Flutter의 inputFormatters는 TextInputFormatter 클래스를 사용해 TextFormField에 입력을 제어하는 도구입니다. 주로 다음과 같은 작업에 사용됩니다:

• 특정 문자 또는 숫자만 허용
• 입력 길이 제한
• 포맷 적용 (예: 전화번호, 날짜)

3. 블루투스 키보드 입력 제한 구현

Flutter에서 블루투스 키보드인지 소프트 키보드인지를 직접 감지하는 API는 제공되지 않습니다.

하지만 inputFormatters를 활용해 블루투스 키보드로 입력되는 특정 입력 유형(예: 모든 입력을 차단)을 제어할 수 있습니다.

예제 코드

아래는 TextFormField에서 블루투스 키보드 입력을 제한하는 간단한 예제입니다.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('블루투스 키보드 입력 제한'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: RestrictedTextField(),
        ),
      ),
    );
  }
}

class RestrictedTextField extends StatefulWidget {
  @override
  _RestrictedTextFieldState createState() => _RestrictedTextFieldState();
}

class _RestrictedTextFieldState extends State<RestrictedTextField> {
  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
        labelText: '입력 제한 필드',
        border: OutlineInputBorder(),
      ),
      inputFormatters: [
        FilteringTextInputFormatter.deny(
          RegExp(r'.'), // 모든 입력을 차단
          replacementString: '',
        ),
      ],
    );
  }
}

코드 설명

1. FilteringTextInputFormatter.deny: RegExp를 사용해 특정 패턴의 입력을 차단할 수 있습니다.
   여기서는 RegExp(r'.')로 모든 입력을 차단하도록 설정했습니다.
2. replacementString: 차단된 입력을 대체할 문자열을 지정합니다.
   빈 문자열로 설정해 아무것도 입력되지 않도록 합니다.

4. 사용자의 소프트 키보드 입력 허용하기

만약 소프트 키보드는 허용하고, 블루투스 키보드만 차단하고 싶다면 RawKeyListener와 함께 디바이스 이벤트를 감지하는 방식으로 확장 구현이 가능합니다.

import 'package:flutter/material.dart';

class ConditionalTextField extends StatefulWidget {
  @override
  _ConditionalTextFieldState createState() => _ConditionalTextFieldState();
}

class _ConditionalTextFieldState extends State<ConditionalTextField> {
  @override
  Widget build(BuildContext context) {
    return RawKeyboardListener(
      focusNode: FocusNode(),
      onKey: (event) {
        if (event.runtimeType.toString() == 'RawKeyUpEvent') {
          // 블루투스 키보드 감지 로직 추가 가능
          print('키 입력 감지: ${event.logicalKey}');
        }
      },
      child: TextFormField(
        decoration: InputDecoration(
          labelText: '소프트 키보드만 허용',
          border: OutlineInputBorder(),
        ),
      ),
    );
  }
}

 

Flutter에서 블루투스 키보드 입력을 제한하려면 inputFormatters를 활용하거나, RawKeyboardListener를 사용해 보다 세부적인 제어를 추가할 수 있습니다.

하지만 블루투스 키보드 제한이 UX에 부정적인 영향을 줄 수 있으므로, 이를 구현하기 전에 사용자 요구사항과 실제 사용 사례를 충분히 고려해야 합니다.

이 방법이 여러분의 프로젝트에서 입력 제어를 개선하는 데 도움이 되길 바랍니다! 😊

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱