创建具有不同格式和多种建议的文本字段

时间:2019-06-02 20:45:30

标签: flutter dart flutter-plugin

我想在我的应用程序中模拟Facebook / Twitter标签功能。我使用flutter_typeahead作为插件,但是我很难在TextField中取消选择的建议与文本以及不同格式的关联。

我不确定如何: -允许用户在选择建议后继续输入 -如果用户仅删除部分建议,则将其全部删除(一个Facebook标签) -将表单另存为文本+选定的@标签

Widget _buildAtalakuRecipientsField(String sField, Atalaku atalaku) {
    return ScopedModelDescendant<MainModel>(
      builder: (BuildContext context, Widget child, MainModel model) {
        return EnsureVisibleWhenFocused(
          focusNode: _recipientsFocusNode,
          child: TypeAheadField(
            textFieldConfiguration: TextFieldConfiguration(
              focusNode: _recipientsFocusNode,
              autofocus: true, //to change maybe
              controller: _typeAheadController,
              decoration: InputDecoration(
                labelText: sField,
                prefixIcon: Icon(Icons.people),
              ),
              onSubmitted: (value) {
                _typeAheadController.text = value;
                _formData['recipients'] = List<Map<String, dynamic>>.from([
                  {'recipient': value}
                ]);
              },
              //onEditingComplete:
            ),
            suggestionsCallback: (value) async {
              if (value != null && value != '') {
                if (value.startsWith('@') && value.length >= 3)
                  return await model.getProfilesBySuggestion(value);
                else
                  return [];
              } else
                return [];
            },
            itemBuilder: (context, suggestion) {
              return SingleChildScrollView(
                child: ListTile(
                  leading: CircleAvatar(
                    backgroundImage: (suggestion['photoURL'] != null &&
                            suggestion['photoURL'] != '')
                        ? NetworkImage(suggestion['photoURL'])
                        : AssetImage('assets/images/profile_placeholder.png'),
                    radius: 20,
                  ),
                  title: Text(suggestion['name']),
                ),
              );
            },
            onSuggestionSelected: (suggestion) {
              //set the full name as part of the field, add a coma and allow the user to select another recipient
              _typeAheadController.text = suggestion['name'];
              _formData['recipients'] =
                  List<Map<String, dynamic>>.from([suggestion]);
            },
            noItemsFoundBuilder: (BuildContext context) =>
                Container(height: 0, width: 0),
            transitionBuilder: (context, suggestionsBox, controller) {
              return suggestionsBox;
            },
            /* loadingBuilder: (BuildContext context) {
              return CircularProgressIndicator();
            }, */
            //onSa
          ),
        );
      },
    );
  }

完全是Facebook。在帖子中标记一个或多个,然后将其保存在后端,以便他们可以收到通知:

enter image description here

0 个答案:

没有答案