Flutter - Restrict TextField to Input Special Characters
Last Updated :
28 Apr, 2025
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:
Similar Reads
Retrieve Data From TextFields in Flutter In this article, we'll learn how to retrieve data from TextFields. TextField() widget is the most common widget used in flutter apps to take user input. We'll talk about two major methods used to extract text from TextField.Using VariablesThe TextField widget has various callback properties through
4 min read
Flutter - Prefix and Suffix Icon in TextField In this article, we will implement how to add prefix and Suffix icons in the TextField. A sample image 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 Stu
2 min read
Retrieve the Value of the TextField in Flutter The text field is widely used in Android Applications for taking user input, using TextEditingController we can retrieve the data from the text field. A sample video gives you an idea of what we are going to do in this article. Step By Step ImplementationStep 1: Create a New Project in Android Studi
2 min read
Custom Label Text in TextFormField in Flutter Today we will explore how to make a custom label above the text field whose style will change according to your tap on the text field/text form field. So that user can easily understand which text field is currently active. Example: In this, there are two fields, the first is email and the second is
5 min read
Multiline TextField in Flutter Multiline TextField is the input TextField which takes the input in more than one line, This type of TextField is used in the scenario like taking Feedback from the user, User Comments, and Description, etc., We can achieve multiline TextField by setting the property keyBoardType and maxLines of the
2 min read
Flutter - Disable Cut, Copy, Paste and Select All Options in TextFormField Every app uses TextFields in one place or another in their apps. In this article, we will see how to disable the native cut, copy, paste, and select all options when the user long-presses on the text.ApproachFor the TextFormField widget in Flutter, the enableInteractiveSelection property states whet
2 min read