Skip to content

a widget is auto saved and suggest as you type for flutter.

License

Notifications You must be signed in to change notification settings

trashfeed/input_history_text_field

Repository files navigation

input_history_text_field

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

Overview

List

example1 example2
image image

Badge

example1 example2
image image

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

name ex note
historyKey key-01 String a only key in the your application,saved with this key.
limit 5 int max limit of input history
hasFocusExpand true bool show input history of edit text focused
showHistoryIcon true bool icon of input history at left positioned
showDeleteIcon true bool icon of delete at right positioned
enableHistory true bool enabled/disabled of input history
enableSave true bool enabled/disabled saved history
enableOpacityGradient true bool make the input history list gradually transparent
enableFilterHistory true bool suggest filters when input text
showHistoryList true bool show/hide of input history list
historyIcon Icons.add IconData IconData for history icon.
historyIconTheme IconTheme IconTheme IconTheme for history icon.
deleteIcon Icons.delete IconData IconData for delete icon.
deleteIconTheme IconTheme IconTheme IconTheme for delete icon.
listOffset Offset(0, 5) Offset set a position for list.
listTextStyle TextStyle(fontSize: 30) TextStyle sets a text style for list.
listRowDecoration BoxDecoration Decoration a row of input history for decoration
listDecoration BoxDecoration Decoration a list of input history for decoration
listStyle ListStyle.List ListStyle change style List or Badge
textColor Colors.black Color a text color
backGroundColor Colors.grey Color a background color
historyIconColor Colors.white Color a history icon color
deleteIconColor Colors.white Color a delete icon color
lockItems ['Flutter', 'Rails', 'React', 'Vue'] List
fixed shown, cannot be delete items
lockTextColor Colors.black Color a lock items text color
lockBackgroundColor Colors.grey Color a lock items background color
historyListItemLayoutBuilder Widget Widget a customize full layout.
InputHistoryController InputHistoryController InputHistoryController Select or delete the input history list