FLUI

# 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.

# API

# FLAutoComplete

property description type default value
focusNode focus node object FocusNode
onSelectedSuggestion selected callback ValueChanged<T>
hideAfterSelection automatically hide the suggestion list bool true
hideWhenUnfocus hide when losing focus bool true
itemBuilder item widget builder FLAutoCompleteItemBuilder<T>
child child widget Widget

# FLPinCodeTextField

property description type default value
pinLength pin length int 6
controller text editing controller TextEditingController
focusNode focus node object FocusNode
textStyle text style TextStyle
autofocus auto focus when showing text field bool false
obscure display in encryption mode bool false
onChanged text change callback ValueChanged<String>
onEditingComplete editing complete callback VoidCallback
onSubmitted submit callback ValueChanged<String>
enabled enabled bool
boxWidth pin box width double
boxHeight pin box height double
minSpace min space between pin box double

← Avatar →