GithubHelp home page GithubHelp logo

Comments (2)

Shiba-Kar avatar Shiba-Kar commented on July 20, 2024 1

Come Up with this solution

FormBuilderChipsInput<String>(
                  decoration: InputDecoration(
                    labelText: 'Skills',
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10.w),
                      borderSide: BorderSide.none,
                    ),
                  ),
                  name: 'skills',
                  maxChips: 5,
                  findSuggestions: (String query) {
                    if (query.isNotEmpty) {
                      var lowercaseQuery = query.toLowerCase();
                      List<String> res = skills.where((skill) {
                        return skill
                            .toLowerCase()
                            .contains(query.toLowerCase());
                      }).toList(growable: false)
                        ..sort(
                          (a, b) =>
                              a.toLowerCase().indexOf(lowercaseQuery).compareTo(
                                    b.toLowerCase().indexOf(lowercaseQuery),
                                  ),
                        );
                      if (res.isNotEmpty) return res;

                      return ['Add $query'];
                    } else {
                      return const [];
                    }
                  },
                  chipBuilder: (context, state, skill) {
                    return InputChip(
                      key: ObjectKey(skill),
                      label: Text(skill),
                      /*  avatar: CircleAvatar(
                    backgroundImage: NetworkImage(skill.imageUrl),
                                    ), */
                      onDeleted: () => state.deleteChip(skill),
                      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                    );
                  },
                  suggestionBuilder: (context, state, skill) {
                    final bool isAddSkillPresent = skill.startsWith('Add');
                    final formattedSkill = skill.replaceAll('Add', '');
                    return Container(
                      alignment: Alignment.centerLeft,
                      child: InkWell(
                        onTap: () => state.selectSuggestion(formattedSkill),
                        child: Chip(
                          key: ObjectKey(skill),
                          // onDeleted: () => state.selectSuggestion(skill),
                          label: Text(
                            skill,
                            style: TextStyle(
                              fontWeight: isAddSkillPresent
                                  ? FontWeight.bold
                                  : FontWeight.normal,
                            ),
                          ),
                          // avatar: const CircleAvatar(),
                        ),
                      ),
                    );
                   
                  },
                  allowChipEditing: true,
                  suggestionsBoxMaxHeight: 300.h,
                ),

from flutter_chips_input.

AAverin avatar AAverin commented on July 20, 2024

A bit simpler solution:

return ChipsInput<String>(
                          decoration: const InputDecoration(
                            labelText: "Tags (optional)",
                            hintText:
                                "Type to get suggestions or add a new tag",
                          ),
                          chipBuilder: (context, state, item) {
                            return InputChip(
                              key: ObjectKey(item),
                              label: Text(item),
                              onDeleted: () => state.deleteChip(item),
                              materialTapTargetSize:
                                  MaterialTapTargetSize.shrinkWrap,
                            );
                          },
                          suggestionBuilder: (context, state, item) {
                            return ListTile(
                              key: ObjectKey(item),
                              title: Text(item),
                              onTap: () => state.selectSuggestion(item),
                            );
                          },
                          findSuggestions: (String query) {
                            if (query.isNotEmpty) {
                              final suggestions = {
                                tags.firstWhere(
                                    (element) => element.name
                                        .toLowerCase()
                                        .contains(query.toLowerCase()),
                                    orElse: () => query) // <= here we are "adding" the new entry to suggestions list
                              };
                              if (suggestions.isNotEmpty) {
                                return {...suggestions, HabitTag(name: query)} // <= here we make sure there is no duplicate 
                                    .toList();
                              }
                            }
                            return [];
                          },
                          onChanged: (t) {
                            print(t);
                          },
                        );

from flutter_chips_input.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.