Flutter TypeAhead显示所选项目

时间:2020-06-07 13:18:45

标签: flutter dart

我正在尝试使用Typeahead插件提供建议。我可以显示数据并进行选择,但是我希望选择的数据在Chips之类的TextBox中可见。 也多选。

例如

我建议有数据1,2,3,4,5,6。 如果我要选择多个项目,则可以完成操作,并且所有内容都应在筹码样式的文本框中显示。

这是代码。

Container(

                child: Column(
                  children: <Widget>[
                    SizedBox(
                      height: 40,

                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 0),

                      child: Material(
                        color: Colors.black38,
                        elevation: 5.0,
                       /////// Auto Suggestion Method Trying ///////////
                        child: Container(
                        decoration: BoxDecoration(
                        color:  Colors.white70,
                        borderRadius: BorderRadius.all(Radius.circular(22.0)), 

                        ),
                        margin: const EdgeInsets.only(right: 10, left: 10),
                        child: TypeAheadField(

                textFieldConfiguration: TextFieldConfiguration(
                  textAlign: TextAlign.center,
                  controller: typeAheadController,

                  decoration: InputDecoration(

                     prefixIcon: Icon(
                       Icons.search,
                       color:Colors.black38
                       ),
                     hintText: 'Search Profile',
                     hintStyle: TextStyle(
                    color: Colors.black38, fontSize: 16),
                      ),


                ),
                suggestionsCallback: (pattern) async {
                return await getSearchData(pattern);
                },
                itemBuilder: (context, suggestion) {
                  return ListTile(

                    title: 
                    Chip(
                    avatar: CircleAvatar(
                      backgroundColor: Theme.of(context).accentColor,
                      child: Text('D'),
                    ),
                    label: Text(suggestion.tagname),
                  )

                  );
                },
                onSuggestionSelected: (suggestion) {
                  // This when someone click the items
                  print(suggestion.tagname);
                  selectedtags.add(suggestion.tagname);
                },
                ),
              ),

                      ),
                    ),
                  ],
                ),
              ),

强调文字

0 个答案:

没有答案