fitted_text_field_container 1.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 77

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 prefxiIcon (if used)
suffixIconWidthdouble48Width of the suffxiIcon (if used)
prefixIconWidthdoublenullMinimum width - null means there is no hard minimum width - it will depend on the labelText and hintText
prefixIconWidthdoublenullMaximum width - null means the maximum width is only contrained by the parent widget

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)
prefixIconWidthdoublenullMinimum width - null means there is no hard minimum width - it will depend on the labelText and hintText
prefixIconWidthdoublenullMaximum width - null means the maximum width is only contrained by the parent widget

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

Contribute #

Pull requests are welcome!

Licence #

MIT License

Copyright (c) 2020 Huy Dinh

1.1.0 #

  • Added prefixIconWidth for specifying the width of the prefix icon (if used)
  • Added suffixIconWidth for specifying the width of the suffix icon (if used)
  • Added minWidth property for specifying a minimum width
  • Added maxWidth property for specifying a maximum width
  • Minimum width takes labelText and hintText into account (if specified)

1.0.0+3 #

  • Updated demo & documentation

1.0.0+2 #

  • Formatted code

1.0.0+1 #

  • Initial release - take 2

1.0.0 #

  • Initial release

example/README.md

Example app that uses fitted_text_field_container #

This is an app that demonstrates using the FittedTextFieldContainer and AnimatedFittedTextFieldContainer widgets of the fitted_text_field_container package.

Getting Started #

  1. Clone the project
  2. Get dependancies
  3. Run the app
$ git clone https://github.com/huyffs/fitted_text_field_container.git
$ cd fitted_text_field_container/example
$ flutter packages get
$ flutter run

Unanimated example #

The unanimated version uses Container

FittedTextFieldContainer(
    child: TextField(
        textAlign: TextAlign.right,
        decoration: InputDecoration(
            prefixText: "£",
            hintText: "0",
        ),
    ),
)

Animated example #

The animated version uses the AnimatedContainer, you can customise the grow/shrink animations as desired.

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

Use this package as a library

1. Depend on it

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


dependencies:
  fitted_text_field_container: ^1.1.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:fitted_text_field_container/fitted_text_field_container.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
53
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
77
Learn more about scoring.

We analyzed this package on Jan 16, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Health suggestions

Format lib/src/animated_fitted_text_field_container.dart.

Run flutter format to format lib/src/animated_fitted_text_field_container.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test