animated_text_field 0.0.1+2

animated_text_field: ^0.0.1+2 copied to clipboard

Animated Text Custom Field which can be used to animate text field and errors by modifying the text field widget. It use custom fade animation from package simple_animations to animate the text field and errors and hide error after interval of time (default 10 seconds).

Features #

• Easy to handle errors
• Easy to handle text field
• Keep remove boilerplate code
• String extension to Capitalize first letter of string
• Some Validation are already added
  • Email
  • Password
  • Phone
  • Url
  • Credit Card:Add following card types
    • Visa
    • MasterCard
    • American Express
    • Diners Club
    • Discover
    • JCB
    • UnionPay
    • Maestro
    • Mir
    • Forbrugsforeningen
    • dankort
    • Laser
    • InstaPayment
    • Laser
    • Switch
    • RuPay
  • CVV
  • Date
  • Time
  • IP Address
  • IP4 Address
  • IP6 Address
  • JSON
  • Pin Code
  • Passport Number
  • Latitude
  • Longitude

Getting started #

• Add the dependency to your pubspec.yaml file

    dependencies:
        animated_text_custom_field: 
  

  for latest version check animated_text_custom_field

• Import the package

      import 'package:animated_text_custom_field/animated_text_custom_field.dart';
  

• Use the widget

      CustomTextField(
                      errorKey: 'password',
                      controller: passwordController,
                      keyboardType: TextInputType.visiblePassword,
                      decoration: CustomTextInputDecoration(
                        prefixIcon: const Icon(Icons.lock),
                        hintText: "Enter your password",
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: const BorderSide(
                            color: Colors.grey,
                            width: 2,
                          ),
                        ),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: const BorderSide(
                            color: Colors.grey,
                            width: 2,
                          ),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: const BorderSide(
                            color: Colors.blue,
                            width: 2,
                          ),
                        ),
                      ),
                      validator: (String? value) {
                        if (value != null) {
                          if (!TextErrorservice.isValidPasswordLength(value,  //using TextErrorService to validate password 
                              length: 8)) {
                            return "Password must be at least 8 characters";
                          }
                        }
                        return null;
                      },
                    ),
  

• Use String extension to Check if string is valid email

      String email = "[email protected]";
        if (email.isEmail()) {
          //do something
          }
  

Output #

Usage #

A simple usage example:

• open code folder "example" in code editor (VS Code, Android Studio, etc).
• run the following command in terminal

    flutter run -d chrome

Properties and Methods #

Other methods and properties are inherited from TextFormField widget.

Extension Methods #

Contributing #

• Fork it
• Create your feature branch (git checkout -b my-new-feature)
• Commit your changes (git commit -am 'Add some feature')
• Push to the branch (git push origin my-new-feature)
• Create new Pull Request
• If you have any questions, please open an issue.
• If you found a bug, please open an issue.
• If you have a feature request, please open an issue.
• If you want to contribute, please submit a pull request.
• If you use this package, please add a star on GitHub.
• If you use this package, please tweet about it.
• If you use this package, please mention it in a blog post.