regex_pattern_text_field

Description:

regex pattern text field

Regex Pattern Text Field #
The RegexPatternTextField is a custom Flutter widget that allows you to perform pattern matching and apply styles to matched patterns in a text field. It is particularly useful when you want to highlight specific patterns or extract information from user input.

Usage #
To use the RegexPatternTextField, follow these steps:


Add the regex_pattern_text_field package to your pubspec.yaml file:
dependencies:
regex_pattern_text_field: ^1.0.0
copied to clipboard


Then, run flutter pub get to fetch the package.


Import the required packages:
import 'package:regex_pattern_text_field/regex_pattern_text_field.dart';
copied to clipboard


Use the RegexPatternTextField widget in your application:
RegexPatternTextField(
maxLines: null,
regexPatternController: _controller,
// Controller for the text field that will store the user-entered text.
onSubmitted: (List<RegexPatternMatched> matches, String text) {
// Function called when the user submits the text by pressing the "Enter" key or "Submit" button.
// The 'matches' list contains the corresponding regex patterns matched in the entered text.
print(matches);
},
onChanged: (List<RegexPatternMatched> matches, String text) {
// Function called whenever the text in the text field is changed.
// The 'matches' list contains the corresponding regex patterns matched in the updated text.
print(matches);
},
defaultRegexPatternStyles: true,
// Set to 'false' to disable default pattern styles
// Set to 'true' to enable default pattern styles
regexPatternStyles: [
// Defines the styles for different regex patterns to be applied to the matched text.
// Each 'RegexPatternTextStyle' object represents a pattern style.
RegexPatternTextStyle(
type: "github",
regexPattern: RegexPatternHelper.github,
textStyle: const TextStyle(color: Colors.redAccent),
),
RegexPatternTextStyle(
type: "facebook",
regexPattern: RegexPatternHelper.facebook,
textStyle: const TextStyle(color: Colors.lightGreen),
),
RegexPatternTextStyle(
type: "twitter",
regexPattern: RegexPatternHelper.twitter,
textStyle: const TextStyle(color: Colors.deepOrangeAccent),
),
RegexPatternTextStyle(
type: "instagram",
regexPattern: RegexPatternHelper.instagram,
textStyle: const TextStyle(color: Colors.brown),
),
RegexPatternTextStyle(
type: "phone",
regexPattern: RegexPatternHelper.phone,
textStyle: const TextStyle(color: Colors.amber),
),
RegexPatternTextStyle(
type: "date",
regexPattern: RegexPatternHelper.dateTime,
textStyle: const TextStyle(color: Colors.red),
),
RegexPatternTextStyle(
type: "myRegexPattern",
regexPattern: "%+([a-zA-Z]+)",
textStyle: const TextStyle(color: Colors.pink),
),
// Add more pattern styles as needed
],
onNonMatch: (String text) {
// Callback for non-matches (when no regex pattern is matched in the text).
print("Non-match: $text");
},
onMatch: (RegexPatternMatched model) {
// Callback for matches (when a regex pattern is matched in the text).
if (model.type == "myRegexPattern") print("Is my regex pattern");
print("Match text: ${model.text}");
print("type: ${model.type}");
// The 'model' object represents the matched text and its properties.
// It has the following attributes:
// - text: The matched text string.
// - start: The starting index of the matched text within the entered text.
// - end: The ending index of the matched text within the entered text.
// - pattern: The regular expression pattern used for matching.

// Additionally, it has a dynamic 'type' attribute that can be used to validate the type of the matched text.
// You can access it as: model.type
// The 'type' attribute can be of any data type, and its usage depends on your application's specific needs.
// For example, you can use it to assign different types to different patterns and perform type-specific actions.
// It provides flexibility in handling matched text based on its type.
},
);
copied to clipboard
Replace the standard TextField widget with RegexPatternTextField. Set the onNonMatch and onMatch properties to provide custom logic for handling non-matches and matches, respectively. The model object passed to the onMatch callback provides information about the matched text, such as the text itself, start and end indices, and the matching pattern.
Define the regex pattern styles using the regexPatternStyles property. It expects a list of RegexPatternTextStyle objects, where each object contains a regular expression pattern (regexPattern) and a text style (textStyle) to be applied to the matched text. The regexPattern should be a valid regex pattern string.
You can also customize the appearance and behavior of the RegexPatternTextField using its various properties, such as decoration, keyboardType, textInputAction, etc.


Customization #
The RegexPatternTextEditingController provides the following customization options:


setOnMatch: Set a callback function that will be called when a pattern match occurs. Pass a function that takes a RegexPatternMatchedText object as a parameter. This object contains details about the matched text, such as the text itself, start and end indices, and the matching pattern.


setOnNonMatch: Set a callback function that will be called when a non-match occurs. Pass a function that takes a String parameter representing the non-matched text.


setRegexPatternStyle: Set the regex pattern styles using a list of `Regex


Example #
Here's an example of how to use the RegexPatternTextField:
import 'package:flutter/material.dart';
import 'package:regex_pattern_text_field/regex_pattern_text_field.dart';

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

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
final RegexPatternTextEditingController _controller = RegexPatternTextEditingController();

List<RegexPatternMatched> allMatches = [];

@override
void initState() {
_controller.addListener(() => setState(() => allMatches = _controller.regexPatternMatchedList));
// Access allMatches to get the list of RegexPatternMatched using _controller.regexPatternMatchedList
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Regex Pattern Text Field'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: RegexPatternTextField(
maxLines: null,
regexPatternController: _controller,
// Controller for the text field that will store the user-entered text.
onSubmitted: (List<RegexPatternMatched> matches, String text) {
// Function called when the user submits the text by pressing the "Enter" key or "Submit" button.
// The 'matches' list contains the corresponding regex patterns matched in the entered text.
print(matches);
},
onChanged: (List<RegexPatternMatched> matches, String text) {
// Function called whenever the text in the text field is changed.
// The 'matches' list contains the corresponding regex patterns matched in the updated text.
print(matches);
},
defaultRegexPatternStyles: true,
// Set to 'false' to disable default pattern styles
// Set to 'true' to enable default pattern styles
regexPatternStyles: [
// Defines the styles for different regex patterns to be applied to the matched text.
// Each 'RegexPatternTextStyle' object represents a pattern style.
RegexPatternTextStyle(
type: "github",
regexPattern: RegexPatternHelper.github,
textStyle: const TextStyle(color: Colors.redAccent),
),
RegexPatternTextStyle(
type: "facebook",
regexPattern: RegexPatternHelper.facebook,
textStyle: const TextStyle(color: Colors.lightGreen),
),
RegexPatternTextStyle(
type: "twitter",
regexPattern: RegexPatternHelper.twitter,
textStyle: const TextStyle(color: Colors.deepOrangeAccent),
),
RegexPatternTextStyle(
type: "instagram",
regexPattern: RegexPatternHelper.instagram,
textStyle: const TextStyle(color: Colors.brown),
),
RegexPatternTextStyle(
type: "phone",
regexPattern: RegexPatternHelper.phone,
textStyle: const TextStyle(color: Colors.amber),
),
RegexPatternTextStyle(
type: "date",
regexPattern: RegexPatternHelper.dateTime,
textStyle: const TextStyle(color: Colors.red),
),
RegexPatternTextStyle(
type: "myRegexPattern",
regexPattern: "%+([a-zA-Z]+)",
textStyle: const TextStyle(color: Colors.pink),
),
// Add more pattern styles as needed
],
onNonMatch: (String text) {
// Callback for non-matches (when no regex pattern is matched in the text).
// print("Non-match: $text");
},
onMatch: (RegexPatternMatched model) {
// Callback for matches (when a regex pattern is matched in the text).
if (model.type == "myRegexPattern") print("Is my regex pattern");
print("Match text: ${model.text}");
print("type: ${model.type}");
// The 'model' object represents the matched text and its properties.
// It has the following attributes:
// - text: The matched text string.
// - start: The starting index of the matched text within the entered text.
// - end: The ending index of the matched text within the entered text.
// - pattern: The regular expression pattern used for matching.

// Additionally, it has a dynamic 'type' attribute that can be used to validate the type of the matched text.
// You can access it as: model.type
// The 'type' attribute can be of any data type, and its usage depends on your application's specific needs.
// For example, you can use it to assign different types to different patterns and perform type-specific actions.
// It provides flexibility in handling matched text based on its type.
},
),
),
),
);
}
}
copied to clipboard
In this example, we have a HomePage widget that uses the RegexPatternTextField widget. The RegexPatternTextField widget is wrapped in a Center widget and placed in the body of the Scaffold.
The RegexPatternTextField widget has two callback functions: onNonMatch and onMatch. When a non-match occurs, the onNonMatch function is called with the non-matched text as a parameter. Similarly, when a match occurs, the onMatch function is called with a RegexPatternMatchedText object containing details about the matched text.
In this example, we simply print the non-matched and matched texts to the console. However, you can customize these functions to perform any desired actions based on the pattern matches and non-matches.
The MyApp widget is the root widget of the application and sets the HomePage as the home screen of the app.
Please note that you will need to import the necessary packages and ensure that the regex_pattern_text_field package is added to your pubspec.yaml file for this code to work correctly.
Here's the code with additional comments to provide more clarity: