NyTextField

• Introduction
• Validation
  • Validation error message
• Faking data
• Usage
  • NyTextField.compact
  • NyTextField.emailAddress
  • NyTextField.password

Introduction to NyTextField

The NyTextField class is a text field widget that provides extra utility.

It provides the additional features:

• Validation
• Handling fake data (e.g. development)

The NyTextField widget behaves like the TextField, but it features the above additional utilities to make handing text fields easier.

Validation

You can handle validation for your text fields by providing the validationRules parameter like in the below example.

TextEditingController _textEditingController = TextEditingController();
  
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
       child: Container(
         child: NyTextField(
             controller: _textEditingController, 
             validationRules: "not_empty|postcode_uk"
         ),
       ),
    ),
  );
}

You can pass your validation rules into the validationRules parameter. See all the available validation rules here.

Validation Error Messages

Error messages will be thrown when the validation fails on the text field. You can update the error message by setting the validationErrorMessage parameter. All you need to do is pass the message you want to display when an error occurs.

TextEditingController _textEditingController = TextEditingController();
  
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
       child: Container(
         child: NyTextField(
             controller: _textEditingController, 
             validationRules: "not_empty|postcode_uk",
             validationErrorMessage: "Data is not valid"
         ),
       ),
    ),
  );
}

Faking data

When testing/developing your application, you may want to display some fake dummy data inside your text fields to speed up development.

First make sure your .env file is set to 'developing' mode.

// .env
APP_ENV="developing"
...

You can set the dummyData parameter to populate fake data.

TextEditingController _textEditingController = TextEditingController();
  
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
       child: Container(
         child: NyTextField(
             controller: _textEditingController, 
             validationRules: "not_empty|postcode_uk",
             dummyData: "B3 1JJ" // This value will be displayed
         ),
       ),
    ),
  );
}

If you need to dynamically set dummyData, try a package like faker.

Usage NyTextField Compact

The NyTextField.compact widget is a helpful widget for handling text fields in your Flutter projects.

It will display a compact text field, styled by the Nylo team.

Here's how you can start using the NyTextField.compact widget.

import 'package:nylo_framework/nylo_framework.dart';
... 
final TextEditingController myTextField = TextEditingController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
       child: Column(
         children: [
            NyTextField.compact(controller: myTextField)
         ],
       ),
    ),
  );
}

Usage NyTextField Email Address

The NyTextField.emailAddress widget is a helpful widget for handling email address text fields in your Flutter projects.

Here's how you can start using the NyTextField.emailAddress widget.

import 'package:nylo_framework/nylo_framework.dart';
... 
final TextEditingController myTextField = TextEditingController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
       child: Column(
         children: [
            NyTextField.emailAddress(controller: myTextField)
         ],
       ),
    ),
  );
}

Usage NyTextField Password

The NyTextField.password widget is a helpful widget for handling password text fields in your Flutter projects.

Here's how you can start using the NyTextField.password widget.

import 'package:nylo_framework/nylo_framework.dart';
...
final TextEditingController myTextField = TextEditingController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
       child: Column(
         children: [
            NyTextField.password(controller: myTextField)
         ],
       ),
    ),
  );
}