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

ParamTypeDefaultDescription
childTextField* requiredThe TextField to fit
prefixIconWidthdouble48Width of the prefixIcon (if used)
suffixIconWidthdouble48Width of the suffixIcon (if used)
minWidthdouble0Minimum width - 0 means there is no minimum width - the width will be affected by labelText and hintText
maxWidthdoubledouble.infinityMaximum width - double.infinity means that the maximum width is only constrained by the parent widget
builderWidget Function(BuildContext context, TextField child)nullA 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

ParamTypeDefaultDescription
childTextField* requiredThe TextField to fit
growDurationDurationDuration(milliseconds: 300)Duration to animate the container's width when TextField grows
shrinkDurationDurationDuration(milliseconds: 600)Duration to animate the container's width when TextField shrinks
growCurveCurveCurves.easeOutCircThe curve to use in the grow animation
shrinkCurveCurveCurves.easeInCircThe curve to use in the shrink animation
prefixIconWidthdouble48Width of the prefixIcon (if used)
suffixIconWidthdouble48Width of the suffixIcon (if used)
minWidthdouble0Minimum width - 0 means there is no minimum width - the width will be affected by labelText and hintText
maxWidthdoubledouble.infinityMaximum width - double.infinity means that the maximum width is only constrained by the parent widget
builderWidget Function(BuildContext context, TextField child)nullA builder that can be used to build complex layouts. The child TextField is provided to the build function

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",
        ),
    ),
)

Using the builder

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",
        ),
    ),
    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

Libraries

fitted_text_field_container