fitted_text_field_container 1.3.1

A Container that automatically resizes to fit a the text value of a Material TextField.

Fitted TextField Container

A Container that automatically resizes it's width to fit the containing TextField's text value.

Read the short blog: https://medium.com/@huyffs/fitted-textfield-container-for-flutter-c9c63644441c

Usage

FittedTextFieldContainer

Param	Type	Default	Description
child	TextField	* required	The TextField to fit
calculator	CalculateFunction	FittedTextFieldCalculator.fitVisible	A function to calculate the width. The default function fits the visible content & decorations (i.e. it collapses to the content/label's width when hint text disappears)
builder	Widget Function(BuildContext context, TextField child)	null	A builder that can be used to build complex layouts. The child TextField is provided to the build function

Example

FittedTextFieldContainer(
    child: TextField(
        controller: someTextEditingController,
        textAlign: TextAlign.right,
        decoration: InputDecoration(
            prefixText: "£",
            labelText: "Amount",
        ),
    ),
)

AnimatedFittedTextFieldContainer

All params from FittedTextFieldContainer plus the following

Param	Type	Default	Description
growDuration	Duration	Duration(milliseconds: 300)	Duration to animate the container's width when TextField grows
shrinkDuration	Duration	Duration(milliseconds: 600)	Duration to animate the container's width when TextField shrinks
growCurve	Curve	Curves.easeOutCirc	The curve to use in the grow animation
shrinkCurve	Curve	Curves.easeInCirc	The curve to use in the shrink animation

Example

AnimatedFittedTextFieldContainer(
    growDuration: Duration(milliseconds: 300),
    shrinkDuration: Duration(milliseconds: 600),
    growCurve: Curves.easeOutCirc,
    shrinkCurve: Curves.easeInCirc,
    child: TextField(
        controller: someTextEditingController,
        textAlign: TextAlign.right,
        decoration: InputDecoration(
            prefixText: "£",
            labelText: "Amount",
        ),
    ),
)

FittedTextFieldMeasurer

A class that takes a TextField and TextStyle and returns the following measurements:

• textField The fitted textfield
• textStyle The fitted textfield's style or the default style
• textWidth Width of the text content
• labelWidth Width of the label
• hintWidth Width of the hint text
• fixedWidths Width of fixed elements (prefixText, suffixText, contentPadding and cursorWidth)

CalculateFunction

This function takes measured values and returns a width value.

Signature:

double CalculateFunction(FittedTextFieldMeasurer)

Example:

FittedTextFieldContainer(
    calculator: (m) =>
        m.fixedWidths +
        max(m.labelWidth, max(m.hintWidth, m.textWidth)),
    child: TextField(
        controller: someTextEditingController,
        textAlign: TextAlign.right,
        decoration: InputDecoration(
            hintText: "Width of hint text",
        ),
    ),
);

Predefined functions

A few calculators are provided for common use-cases

• fitAll fits content, label and hint texts
• fitVisible fits the visible content & decorations (i.e. it collapses to the content/label's width when hint text disappears)
• fitVisibleWithPadding(double padding) in addition to fitting visible content it adds a fixed padding value
• fitVisibleWithRange(double min, double max) in addition to fitting visible content it enforces a minimum and (optional) maximum width

Example:

Fit all

FittedTextFieldContainer(
    calculator: FittedTextFieldCalculator.fitAll,
    child: ...
);

Fit visible with minimum

FittedTextFieldContainer(
    calculator: FittedTextFieldCalculator.fitVisibleWithRange(120),
    child: ...
);

Fit visible with maximum

FittedTextFieldContainer(
    calculator: FittedTextFieldCalculator.fitVisibleWithRange(0, 180),
    child: ...
);

Using the builder

AnimatedFittedTextFieldContainer(
    child: TextField(
        controller: someTextEditingController,
        textAlign: TextAlign.right,
        decoration: InputDecoration(
            labelText: "Twinkle twinkle",
        ),
    ),
    builder: (context, child) => Container(
        child: Stack(
            overflow: Overflow.visible,
            children: <Widget>[
                child,
                Positioned(
                    top: 0,
                    right: -22,
                    child: _aniWholePoundCtl.text.isEmpty
                        ? Icon(Icons.star_border)
                        : Icon(Icons.star, color: Colors.amber),
                ),
            ],
        ),
    ),
)

Contribute

Pull requests are welcome!

Licence

MIT License

Copyright (c) 2020 Huy Dinh