floating_label_inputs

A Flutter package providing highly customizable text input fields with beautifully animated floating labels, inspired by modern design trends.

Preview

Floating Animated Input Preview

This package offers a FloatingAnimatedInput widget that enhances the standard TextFormField with:

  • A label that smoothly animates to a "floating" position above the input field when focused or when text is entered.
  • Extensive customization options for both the floating label and the text input field itself.

Features

  • Animated Floating Label: Smooth transition for the label from placeholder to floating state.
  • Customizable Label Appearance:
    • Control text style for both normal and floated states.
    • Set active text color for the floated label.
    • Unique background color for the floated label.
    • Padding and border radius for the floated label's background.
  • Customizable TextFormField:
    • Control overall widget height and width.
    • Define input text style and cursor color.
    • Set background fill color for the input area.
    • Customize border radius for the input field.
    • Specify border colors and styles (via BorderSide) for enabled and focused states.
  • Standard TextFormField Features: Integrates with TextEditingController, FocusNode, validator, onChanged, autovalidateMode, etc.

Getting started

Add this to your package's pubspec.yaml file:

dependencies:
  floating_label_inputs: ^0.1.0 # Replace with the latest version

Then, run flutter pub get in your terminal.

Usage

Import the package in your Dart file:

import 'package:floating_label_inputs/floating_label_inputs.dart';

Here's a basic example:

FloatingAnimatedInput(
  labelText: 'Your Name',
  // controller: _yourNameController, // Optional: for getting the value
  // focusNode: _yourNameFocusNode,   // Optional: for managing focus
)

Customization Options

The FloatingAnimatedInput widget offers numerous parameters for customization:

Label Customization:

  • labelText: (required) The text for the label.
  • labelStyle: TextStyle for the label when it's acting as a placeholder.
  • floatingLabelStyle: Base TextStyle for the floated label (primarily for font size, letter spacing).
  • floatingLabelActiveColor: Color for the text of the floated label.
  • floatingLabelActiveBackgroundColor: Color for the background of the floated label.
  • floatingLabelPadding: EdgeInsetsGeometry for padding within the floated label's background.
  • floatingLabelBorderRadius: BorderRadiusGeometry for the floated label's background.

TextFormField Customization:

  • height: double? to set a fixed height for the widget. Note: If set, it's recommended to use a value that accommodates the font size and internal padding (e.g., at least 45.0 for default settings). The widget will internally clamp any explicitly set height to a minimum of 45.0 to prevent text clipping. If not provided, the widget sizes itself intrinsically.
  • width: double? to set a fixed width for the widget.
  • textStyle: TextStyle for the user input text.
  • cursorColor: Color for the input cursor.
  • fillColor: Color for the background of the input area (ensure filled: true in InputDecoration).
  • textFieldBorderRadius: BorderRadiusGeometry for the input field's border.
  • enabledTextFieldBorderColor: Color for the border when the field is enabled but not focused.
  • focusedTextFieldBorderColor: Color for the border when the field is focused.
  • enabledTextFieldBorderSide: BorderSide? for more detailed control over the enabled border (width, style).
  • focusedTextFieldBorderSide: BorderSide? for more detailed control over the focused border.

Example with more customization:

FloatingAnimatedInput(
  labelText: 'Email Address',
  height: 60,
  textFieldBorderRadius: BorderRadius.circular(15.0),
  focusedTextFieldBorderColor: Colors.deepPurpleAccent,
  floatingLabelActiveBackgroundColor: Colors.deepPurpleAccent,
  floatingLabelActiveColor: Colors.white,
  floatingLabelPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
  floatingLabelBorderRadius: BorderRadius.circular(4.0),
)

Additional information

  • Issue Tracker: If you find a bug or have a feature request, please file an issue at TODO: Link to your GitHub issues page if you create one.
  • Contributing: Contributions are welcome!.

This package is currently under development.

Libraries

floating_label_inputs