Search bar not displaying relevant results based on the entered text in flutter

25 Views Asked by At

This code provided below essentially creates a search bar that the user can interact with. When the user types into the search bar (onChanged is triggered), a search operation is performed to filter and display relevant results based on the entered text. The filtered results are likely used to update the UI to show matching stories or content.

Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: ClipRRect(
        borderRadius: BorderRadius.circular(100),
        child: TextFormField(
        controller: _ctrlSearch,
        onChanged: (text) {
                                    final searchText = text.toLowerCase();

                                    filterList = Provider.of<StoryDatabaseProvider>(context, listen: false).stories.where((e) {
                                      final title = e.title?.toLowerCase() ?? '';
                                      final story = e.story?.toLowerCase() ?? '';
                                      
                                      // Check if the title or story contains the whole word (case-insensitive)
                                      final titleContainsWord = title.contains(searchText);
                                      final storyContainsWord = story.contains(searchText);

                                      // Check if the title or story contains the search text as a whole word (case-insensitive)
                                      final titleContainsSearchText = title.split(' ').any((word) => word.contains(searchText));
                                      final storyContainsSearchText = story.split(' ').any((word) => word.contains(searchText));

                                      return titleContainsWord || storyContainsWord || titleContainsSearchText || storyContainsSearchText;
                                    }).toList();

                                    print(filterList.length);

                                    setState(() {});
                                  },
                                      cursorColor: DisplayTheme(widget.appTheme!.themeName,Provider.of<ThemeManager>(context).themeMode == ThemeMode.dark).topNavBarIconColor,
                                       textInputAction: TextInputAction.done,
                                       style: TextStyle(
                                         fontSize: 20.0,
                                         color: DisplayTheme(widget.appTheme!.themeName,Provider.of<ThemeManager>(context).themeMode == ThemeMode.dark).primaryTextColor,
                                         fontFamily: 'VarelaRound',
                                       ),
                                       decoration: InputDecoration(
                                        fillColor:Provider.of<ThemeManager>(context).themeMode ==
                            ThemeMode.dark?null: Color(0xffEFF2F3),
                                        filled: true,
                                        isDense: true,
                                        labelStyle: TextStyle(fontSize: 12),
                                        contentPadding: const EdgeInsets.symmetric(horizontal: 16,vertical: 8),
                                         border: InputBorder.none,
                                         hintText: 'Search',
                                         hintStyle: TextStyle(
                                           color: DisplayTheme(widget.appTheme!.themeName,Provider.of<ThemeManager>(context).themeMode == ThemeMode.dark).topNavBarIconColor,
                                           fontSize: 14.0,
                                           fontWeight: FontWeight.bold,
                                           fontFamily: 'VarelaRound',
                                         )
                                       ),
                                       
                                     ),
                                   ),
                                 ),

Changes needed:

  1. I want that when I type a single word "a" it should fetch me stories containing letter 'a' either in the title or in their story.

  2. When I type a full word "Story" it should fetch me stories containing letter 'story' either in the title or in their story.

  3. When I type a word that contains spaces in between like "A story" it should fetch me the respective stories.

Make changes in the provided code and provide me the updated code. Please let me know if any extra code segment or entire code file is required.

0

There are 0 best solutions below