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

Libraries

input_history_text_field