Flutter – Restrict TextField to Input Special Characters

In Flutter, user input validation is essential for maintaining data integrity and ensuring a smooth user experience. One common requirement is to restrict the input of special characters in a TextField to prevent unwanted characters in certain fields, such as usernames or any other text-based input. In this article we are going to implement a TextField in Flutter that restricts the input of Special Characters In Simple Words we cannot Enter Special Characters into the TextField. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package

First of all import material.dart file.

import 'package:flutter/material.dart';

Step 3: Execute the main Method

Here the execution of our app starts.

Dart

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

Step 4: Create MyApp Class

In this class we are going to implement the MaterialApp and the Scaffold , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: MyTextField(),
    );
  }
}

Step 5: Create MyTextField Class

The MyTextField class is a Flutter StatefulWidget that defines a text input field with the purpose of restricting the input to exclude special characters. It utilizes a TextEditingController to manage the text input and applies an input formatter that denies the entry of specific special characters using a regular expression. The widget is presented within a Scaffold and styled with InputDecoration, providing a labeled text field to prompt users to enter text without including special characters specified in the regular expression. This class serves as a reusable component for creating text input fields with restricted character sets in a Flutter application.

Dart

class MyTextField extends StatefulWidget {
  @override
  _MyTextFieldState createState() => _MyTextFieldState();
}

class _MyTextFieldState extends State<MyTextField> {
  // Controller for managing the text input
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Restricting Special Characters in TextField'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TextField(
            controller: _controller,

            // Input formatter to deny special characters
            // using a regular expression
            inputFormatters: [
              FilteringTextInputFormatter.deny(
                  RegExp(r'[!@#$%^&*(),.?":{}|<>]'))
            ],

            // Decoration for the TextField
            decoration: InputDecoration(
              labelText: 'Enter text (no special characters)',
            ),
          ),
        ),
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

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(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: MyTextField(),
    );
  }
}

class MyTextField extends StatefulWidget {
  @override
  _MyTextFieldState createState() => _MyTextFieldState();
}

class _MyTextFieldState extends State<MyTextField> {
  // Controller for managing the text input
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Restricting Special Characters in TextField'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TextField(
            controller: _controller,

            // Input formatter to deny special characters
            // using a regular expression
            inputFormatters: [
              FilteringTextInputFormatter.deny(
                  RegExp(r'[!@#$%^&*(),.?":{}|<>]'))
            ],

            // Decoration for the TextField
            decoration: InputDecoration(
              labelText: 'Enter text (no special characters)',
            ),
          ),
        ),
      ),
    );
  }
}

Output: