Colin's Blog
[flutter] 플러터에서 훅(hook)을 사용해 사용자 입력 제한 기능 구현하기

플러터(Flutter)에서 입력 필드의 텍스트를 제한하려면 훅(hook)을 사용하여 사용자 입력을 관리할 수 있습니다. 이 블로그 포스트에서는 훅을 사용하여 입력 필드에서 사용자 입력을 제한하는 방법에 대해 알아보겠습니다.

입력 필드에 훅(hook) 적용하기

우선, useTextEditingController 훅을 사용하여 입력 필드의 상태를 관리합니다. 이 훅을 사용하면 입력 필드의 텍스트를 제어하고, 사용자의 입력에 반응할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final textController = useTextEditingController();

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Input Limit Example'),
        ),
        body: Center(
          child: TextField(
            controller: textController,
            maxLength: 10,
            decoration: InputDecoration(
              labelText: 'Enter text',
            ),
          ),
        ),
      ),
    );
  }
}

위의 예제에서 useTextEditingController 훅을 사용하여 텍스트 필드의 상태를 관리합니다. 또한, maxLength 속성을 사용하여 입력을 제한할 수 있습니다.

특수 문자 제한

특정 문자나 패턴을 입력에서 제한하려면, textEditingController를 사용하여 입력된 문자열을 검증하고, 필터링할 수 있습니다. 예를 들어, 특수 문자를 입력할 수 없도록 하려면 TextInputFormatter를 사용하여 검증합니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final textController = useTextEditingController();

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Special Characters Limit Example'),
        ),
        body: Center(
          child: TextField(
            controller: textController,
            inputFormatters: [
              FilteringTextInputFormatter.deny(RegExp(r'[!@#%^&*]')),
            ],
            decoration: InputDecoration(
              labelText: 'Enter text',
            ),
          ),
        ),
      ),
    );
  }
}

위의 예제에서 FilteringTextInputFormatter를 사용하여 입력된 문자열에서 특정 문자를 거부하고, 입력을 제한합니다.

훅을 사용하여 입력 제한 기능을 구현하는 방법에 대해 알아보았습니다. 입력 필드에서 사용자 입력을 효과적으로 관리하고 제한함으로써, 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

참고 문헌:

© 2018 Colin. All rights reserved.