input_history_text_field 0.0.9

Flutter Android iOS web

A input_history_text_field widget is automatically saved and suggest as you type.

input_history_text_field #

A input_history_text_field widget is automatically saved and suggest as you type.

Overview #

List #

example1example2
imageimage

Badge #

example1example2
imageimage

Customize #

 
image

Getting Started #

Usage #

The only key in the your widget of application set to historyKey, supports like a text_field.

InputHistoryTextField(
    historyKey: "01",
),

a saved automatically as you type.( save up to limit, default to 5 )

input_history_text_field-1

a input history is suggested.

input_history_text_field-2

input history can be deleted.

input_history_text_field-3

Example #

simple #

All you need is a historyKey.

InputHistoryTextField(
    historyKey: "01",
),

badge style

Change style to badge is listStyle = ListStyle.Badge

InputHistoryTextField(
    historyKey: "01",
    listStyle: ListStyle.Badge,
),

 
image

Default items

If there is an item you want to display from the beginning or an item you want the user to selected.

InputHistoryTextField(
    historyKey: "01",
    lockItems: ['Flutter', 'Rails', 'React', 'Vue'],
),

List
image

change icon #

Can hide or change the icon.

InputHistoryTextField(
    historyKey: "01",
    showHistoryIcon: true,
    showDeleteIcon: true,
    historyIcon: Icons.add,
    deleteIcon: Icons.delete,
),
 
image

gradually transmitted #

enableOpacityGradient is input history list is gradually transmitted.

InputHistoryTextField(
    historyKey: "01",
    enableOpacityGradient: true,
),
 
image

lines decoration #

listRowDecoration is input history lines as a decoration.

InputHistoryTextField(
    historyKey: "01",
    listRowDecoration: BoxDecoration(
        border: Border(
        left: BorderSide(color: Colors.blue, width: 8),
        ),
    ),
),

 
image

list decoration #

listDecoration is input history list as a decoration.

InputHistoryTextField(
    historyKey: "01",
    listDecoration: BoxDecoration(
        color: Colors.cyan,
        borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20)),
        boxShadow: [
        BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 8,
            blurRadius: 8,
            offset: Offset(0, 3)),
        ],
    ),
),

 
image

list layout builder

If you want to customize everything, to use historyListItemLayoutBuilder.

InputHistoryTextField(
    historyKey: "01",
    historyListItemLayoutBuilder: (controller, value, index) {
        return InkWell(
        onTap: () => controller.select(value.text),
        child: Row(
            children: [
            Expanded(
                flex: 1,
                child: Container(
                    margin: const EdgeInsets.only(left: 10.0),
                    padding: const EdgeInsets.only(left: 10.0),
                    decoration: BoxDecoration(
                    border: Border(
                        left: BorderSide(
                        width: 5.0,
                        color: index % 2 == 0
                            ? Colors.red
                            : Colors.blue,
                        ),
                    ),
                    ),
                    child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                        Text(
                        value.textToSingleLine,
                        overflow: TextOverflow.ellipsis,
                        style:
                            TextStyle(fontWeight: FontWeight.bold),
                        ),
                        Text(
                        DateTime.fromMillisecondsSinceEpoch(
                                value.createdTime)
                            .toUtc()
                            .toString(),
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                            fontSize: 10,
                            color: Theme.of(context).disabledColor),
                        ),
                    ],
                    )),
            ),
            IconButton(
                icon: Icon(
                Icons.close,
                size: 16,
                color: Theme.of(context).disabledColor,
                ),
                onPressed: () {
                controller.remove(value);
                },
            ),
            ],
        ),
    );}
)
 
image

API #

nameexnote
historyKeykey-01Stringa only key in the your application,saved with this key.
limit5intmax limit of input history
hasFocusExpandtrueboolshow input history of edit text focused
showHistoryIcontrueboolicon of input history at left positioned
showDeleteIcontrueboolicon of delete at right positioned
enableHistorytrueboolenabled/disabled of input history
enableSavetrueboolenabled/disabled saved history
enableOpacityGradienttrueboolmake the input history list gradually transparent
historyIconIcons.addIconDataIconData for history icon.
historyIconThemeIconThemeIconThemeIconTheme for history icon.
deleteIconIcons.deleteIconDataIconData for delete icon.
deleteIconThemeIconThemeIconThemeIconTheme for delete icon.
listOffsetOffset(0, 5)Offsetset a position for list.
listTextStyleTextStyle(fontSize: 30)TextStylesets a text style for list.
listRowDecorationBoxDecorationDecorationa row of input history for decoration
listDecorationBoxDecorationDecorationa list of input history for decoration
listStyleListStyle.ListListStylechange style List or Badge
textColorColors.blackColora text color
backGroundColorColors.greyColora background color
historyIconColorColors.whiteColora history icon color
deleteIconColorColors.whiteColora delete icon color
lockItems['Flutter', 'Rails', 'React', 'Vue']List
fixed shown, cannot be delete items
lockTextColorColors.blackColora lock items text color
lockBackgroundColorColors.greyColora lock items background color
historyListItemLayoutBuilderWidgetWidgeta customize full layout.
InputHistoryControllerInputHistoryControllerInputHistoryControllerSelect or delete the input history list
5
likes
100
pub points
31%
popularity

Publisher

trashfeed.net

A input_history_text_field widget is automatically saved and suggest as you type.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, shared_preferences

More

Packages that depend on input_history_text_field