Home > Enterprise >  how can I force user to enter the first letter is number 1
how can I force user to enter the first letter is number 1

Time:09-19

I have a textfield that should enter an ID, I need to force the user to enter the first number to be (1) also, can anyone suggest how to learn RegExp package.. I find it solve most of this problems

import 'package:flutter/material.dart';

class TestDate extends StatelessWidget {
  TestDate({Key? key}) : super(key: key);

  var controller = TextEditingController();
  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.all(40),
        child: Form(
          key: formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextFormField(
                controller: controller,
                decoration: InputDecoration(border: OutlineInputBorder()),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter some text';
                  }
                  return null;
                },
              ),
              ElevatedButton(
                onPressed: () {
                  if (formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('Processing Data')),
                    );
                  }
                },
                child: const Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

CodePudding user response:

It depends on what you really want.

Should the user have the freedom to write the text how he wants and you just want to validate at the end? Then update your validator callback:

validator: (value) {
  if (value == null || value.isEmpty) {
    return 'Please enter some text';
  } else if (!value.startsWith("1")) {
    return 'Text needs to start with \'1\'';
  }
  return null;
},

However, if you want to force the user to always give a text which starts with 1, then you can create a class which extends TextInputFormatter:

class MyTextInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    if (!newValue.text.startsWith("1")) {
      return oldValue;
    }
    return newValue;
  }
}

Then:

TextFormField(
  ...
  inputFormatters: [
    MyTextInputFormatter()
  ],
),

By the way: If you don't need the controller, then don't instantiate one. If you do, then don't forget to dispose it.

CodePudding user response:

Welcome. instead of forcing a user to enter number one(1). what you can do is show prefix widget on the front of textFormField and when the user submit the form you will pass the number one(1) value with you logic

 class TestDate extends StatelessWidget {
  TestDate({Key? key}) : super(key: key);

  var controller = TextEditingController();
  final formKey = GlobalKey<FormState>();

    var idContainer= Container(
  margin: const EdgeInsets.fromLTRB(0, 0, 10, 0),
  width: 70,
  decoration: BoxDecoration(
    border: Border(
      right: BorderSide(
        width: 0.9,
        color: Colors.grey,
      ),
    ),
  ),
  child: Center(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          '1', //1 or what ever you want
          style: TextStyle(
            fontSize: 2.3 * SizeConfig.heightMultiplier,
          ),
        ),
      ],
    ),
  ),
);  

   @override
   Widget build(BuildContext context) {
   return Scaffold(
   body: Container(
     margin: EdgeInsets.all(40),
     child: Form(
      key: formKey,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextFormField(
           prefixIcon: idContainer, //here you add prefix
            controller: controller,
            decoration: InputDecoration(border: OutlineInputBorder()),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          ElevatedButton(
            onPressed: () {
              if (formKey.currentState!.validate()) {
               //here you can pass text value to fuction of what ever 
                  //you want
               String val = '1   ${controller.text}';
                sendData(val); //you can pass it to a function
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Processing Data')),
                );
              }
            },
            child: const Text('Submit'),
          ),
        ],
      ),
    ),
  ),
);

} }

  • Related