# Input

# FLAutoComplete

FLAutoComplete provides the ability for sub-widgets to display a list of auto-completion hints.

FLAutoComplete(
    key: _key,
    focusNode: _focusNode,
    itemBuilder: (context, suggestion) => Padding(
      padding: EdgeInsets.all(8.0),
      child: ListTile(
        title: Text(suggestion),
      ),
    ),
    onSelectedSuggestion: (suggestion) {
      FLToast.text(text: 'Select - $suggestion');
    },
    child: TextField(
      focusNode: _focusNode,
      onChanged: (text) {
        List<String> sugList = [];
        if (text != null && text.isNotEmpty) {
          for (String option in acData) {
            if (option.toLowerCase().contains(text.toLowerCase())) {
              sugList.add(option);
            }
          }
        }
        _key.currentState.updateSuggestionList(sugList);
      },
    ),
)

You can customize the style of the display list with itemBuilder. Also note that FLAutoComplete and TextField use the same FocusNode object to ensure consistent focus behavior.

# FLPinCodeTextField

WARNING

After Flutter v1.10, attach assertion is added, which will cause an assert exception when modifying the state of a non-current input. The relevant issue#40755. So if you see the exception when using this control, you can consider commenting out the line of attatch assertion or do not use this control. I will continue to track the official update on this issue.

FLPinCodeTextField is applicable to the scenario of inputting digital verification code.

FLPinCodeTextField(
    controller: _pinController,
    boxWidth: 45,
    boxHeight: 60,
    pinLength: 6,
    obscure: true,
    minSpace: 20,
    autofocus: false,
    textStyle: TextStyle(fontSize: 22),
    decoration: InputDecoration(
        contentPadding: const EdgeInsets.symmetric(vertical: 20),
        border: UnderlineInputBorder(),
    ),
    onChanged: (text) {
        print('change -- $text');
    },
    onSubmitted: (text) {
        print('submit -- $text');
    },
    onEditingComplete: () {
        print('editing complete');
    },
)

You can use pinLength to control the number of input boxes required, and use obsure to control whether it is encrypted mode.

WARNING

Since the TextField class itself cannot set the height, it needs to be adjusted with boxHeight, the contentPadding of InputDecoration and the font size.