animated_input_border 0.0.3

A Flutter package that provides an animated Input Border for Input Fiels . The border dynamically animates as the user interacts with the field, changing its appearance based on the animation value.

Animated Input Border

A Flutter package that provides a customizable, animated border for text fields, enhancing UI design with smooth transitions based on user interaction (e.g., focus or input changes)

Key Features

Animate text field borders when gaining or losing focus. Customizable border radius, width, and colors. Support for gap padding to accommodate floating labels or gaps. Smooth and visually appealing animations using an AnimationController. Seamless integration with TextFormField and InputDecoration.

Getting Started 🔥

Begin by adding AnimatedInputBorder as a dependency to your project.

dependencies:
  animated_input_border: <latest_version>

Run the command get the dependency

$ flutter pub get

Import it in your dart code, you can use

import 'package:animated_input_border/animated_input_border.dart';

TextFormField(
            focusNode: focusNode,
            decoration: InputDecoration(
                label: const Text("Focused Border Animation"),
                border: const OutlineInputBorder(),
                focusedBorder: AnimatedInputBorder(
                    animationValue: _animationFocusedBorder.value, // Create animation controller .
                    borderRadius: BorderRadius.circular(20.0),
                    borderSide: const BorderSide(
                      width: 2,
                      color: Colors.deepPurple,
                    )),
                hintText: "Enter value"),
          );

Other Examples 🤯

There is a scaled animation.Developers can try it . Here is the code snippet.

TextFormField(
            focusNode: focusNode,
            decoration: InputDecoration(
                border: const OutlineInputBorder(),
                focusedBorder: AnimatedInputBorder(
                    borderRadius: BorderRadius.circular(20.0),
                    borderSide: const BorderSide(
                      width: 3,
                      color: Colors.green,
                    )).scale(_animationFocusedBorder.value),
                hintText: "Enter value"),
          )

Contributions

Contributions, issues, and feature requests are welcome! Feel free to check out the GitHub repo.

Author

Developed with ❤️ by Pranim S. Thakuri.