Git Product home page Git Product logo

search_widget's Introduction

Search Widget Cirrus CI - Base Branch Build Status GitHub stars Twitter Follow GitHub last commit Website shields.io Open Source Love style: effective dart

This Flutter package provides a Search Widget for selecting an option from a data list. Provides filtering of items based on the search text.

PieChart

๐Ÿ’ป Installation

In the dependencies: section of your pubspec.yaml, add the following line:

Version

dependencies:
  search_widget: <latest version>

โ” Usage

Import this class

import 'package:search_widget/search_widget.dart';

Add Search Widget

  • Accepts data list as input
  • Option for getting selected item. Returns selected item or null if item is deleted
onItemSelected: (item) {
    //Do whatever you would like
    setState(() {
       _selectedItem = item;
    });
 },
  • Option for pop list item builder. This basically returns a widget to show as list item in popup
popupListItemBuilder: (LeaderBoard item) {
   return PopupListItem(item);
 }
  • Option for filtering data list based on search query
queryBuilder: (String query, List<LeaderBoard> list) {
   return list.where((LeaderBoard item) => item.username.toLowerCase().contains(query.toLowerCase())).toList();
 }
  • Option provided for selected list item builder which enables when a user selects an item from pop up list
selectedItemBuilder: (LeaderBoard selectedItem, deleteSelectedItem) {
   return SelectedItem(selectedItem,deleteSelectedItem);
 }
  • Option for providing custom TextField. Accepts TextEditingController and FocusNode as parameter
textFieldBuilder: (TextEditingController controller, FocusNode focusNode) {
    return TextField(
        controller: controller,
        focusNode: focusNode,
        //... Other customizations here
       );
  },

Full Implementation

SearchWidget<LeaderBoard>(
   dataList: list,
   hideSearchBoxWhenItemSelected: false,
   listContainerHeight: MediaQuery.of(context).size.height / 4,
   queryBuilder: (String query, List<LeaderBoard> list) {
     return list.where((LeaderBoard item) => item.username.toLowerCase().contains(query.toLowerCase())).toList();
   },
   popupListItemBuilder: (LeaderBoard item) {
     return PopupListItemWidget(item);
   },
   selectedItemBuilder: (LeaderBoard selectedItem, VoidCallback deleteSelectedItem) {
     return SelectedItemWidget(selectedItem, deleteSelectedItem);
   },
   // widget customization
   noItemsFoundWidget: NoItemsFound(),
   textFieldBuilder: (TextEditingController controller, FocusNode focusNode) {
     return MyTextField(controller, focusNode);
   },
 )

Key Highlights

  • Adaptive Popup Position to prevent popup getting hidden behind keyboard

PieChart PieChart

  • Popup to scroll with scroll gesture if this widget is used inside ScrollView

PieChart

TODO

  • Give support for onItemSelected method to return selected item(s) directly
  • Add support for selecting multiple items
  • Add visibility bool to show selected item widget

โญ My Flutter Packages

  • pie_chart GitHub stars Flutter Pie Chart with cool animation.
  • avatar_glow GitHub stars Flutter Avatar Glow Widget with glowing animation.
  • json_table GitHub stars Create Flutter Json Table from json map directly.
  • animating_location_pin GitHub stars Flutter Animating Location Pin Widget providing Animating Location Pin Widget which can be used while fetching device location.

โญ My Flutter Apps

๐Ÿ‘ Contribution

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -m 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

search_widget's People

Contributors

amirmohammadshamss avatar apgapg avatar battlecook avatar hukhong avatar imgbotapp avatar jatempa avatar jesusrp98 avatar umerf52 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

search_widget's Issues

Exception caught by services library: MissingPluginException

Hi, it works in the app but I get this exception. Running on newest version 1.0.1, though same error when trying with 1.0.0.

I/flutter ( 8648): โ•โ•โ•ก EXCEPTION CAUGHT BY SERVICES LIBRARY 
I/flutter ( 8648): The following MissingPluginException was thrown while activating platform stream on channel
I/flutter ( 8648): flutter_keyboard_visibility:
I/flutter ( 8648): MissingPluginException(No implementation found for method listen on channel
I/flutter ( 8648): flutter_keyboard_visibility)
[โˆš] Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 10.0.17763.914], locale en-US)

[โˆš] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[โˆš] Android Studio (version 3.5)
[โˆš] VS Code (version 1.35.0)
[โˆš] Connected device (1 available)

โ€ข No issues found!

close indication

hi there,

is there any indication for search close without selection (such as back press event or outside click)?

what i'm trying to do is to implement a functionality where there is dim screen behind the results list only when its open.

Update MyTextField

Hi,
Is there a way to show the selected value in the TextField, instead of clearing the TextField onItemSelected ?

Remove overlay on dispose

I have an icon that opens and closes the SearchWidget. It works great unless I close it without selecting a result. The search results list remains in the overlay even after the SearchWidget is disposed if no item was selected from within the results.

After I updated the flutter v1.13.2 He is returning this error to me.

C:\Users\Mobile02\AndroidStudioProjects\siga_atividade_coletiva\android\app\src\main\java\io\flutter\plugins\GeneratedPluginRegistrant.java:5: error: a type with the same simple name is already defined by the single-type-import of KeyboardVisibilityPlugin
import com.github.adee42.keyboardvisibility.KeyboardVisibilityPlugin;
^
1 error

FAILURE: Build failed with an exception.

  • What went wrong:
    Execution failed for task ':app:compileDebugJavaWithJavac'.

Compilation failed; see the compiler error output for details.

  • Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

  • Get more help at https://help.gradle.org

BUILD FAILED in 3m 40s
Finished with error: Gradle task assembleDebug failed with exit code 1

[web] Positioning issue with overlay

I'm new to Flutter and so wasn't able to figure out quite what's going wrong, but I can't get SearchWidget to work on web. The Inkwell gets highlighted when my cursor is at some offset from the actual list item, and clicking when the inkwell is highlighted just closes the overlay. Clicking on the actual list item doesn't work either. In both cases the overlay just gets closed.

I suspect it has something to do with the Positioned or CompositedTransformFollower widgets. This gist has a trivial example Flutter web app that demonstrates the issue.

Would love to get this working, other than this issue it seems to be a really nice widget. Let me know how I can help debug.

Showing Error in Both iOS and Android

It's returning error like this in both Android and iOS

/ . ***/android/app/src/main/java/io/flutter/plugins/GeneratedPluginRegistrant.java:6: error: a type with the same simple name is already defined by the single-type-import of KeyboardVisibilityPlugin
import com.github.adee42.keyboardvisibility.KeyboardVisibilityPlugin;
^
1 error

FAILURE: Build failed with an exception.

  • What went wrong:
    Execution failed for task ':app:compileDebugJavaWithJavac'.

Compilation failed; see the compiler error output for details.

  • Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

  • Get more help at https://help.gradle.org . .\

Can,t access selected item

I can't access my selected item outside "selectedItemBuilder" and even can,t set state
setting state cause problem

The method 'markNeedsBuild' was called on null.

The method 'markNeedsBuild' was called on null. Receiver: null Tried calling: markNeedsBuild() >>>> TRACE <<<< #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5) #1 MySingleChoiceSearchState.init.<anonymous closure> (package:search_widget/search_widget.dart:109:22) #2 ChangeNotifier.notifyListeners (package:flutter/src/foundation/change_notifier.dart:206:21) #3 ValueNotifier.value= (package:flutter/src/foundation/change_notifier.dart:273:5) #4 TextEditingController.clear (package:flutter/src/widgets/editable_text.dart:183:5) #5 MySingleChoiceSearchState.onDropDownItemTap (package:search_widget/search_widget.dart:193:17) #6 MySingleChoiceSearchState.onTap.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:search_widget/search_widget.dart:257:39) #7 _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:635:14) #8 _InkResponseState.build.<anonymous closure> (package:flu<โ€ฆ>

Depricated API used

Hello,
seems you using a deprecated API with name " flutter_keyboard_visibility-0.7" ...although the app works fine ..the error keeps coming .

Problem on selecting item

Hi, is it possible to add the selected item directly in the TextField instead to create a new Widget?

Android emulator doesn't work

when I add this widget as dependency to my Pubspec.yaml file, the app will crash when I run it in debug mode on an android emulator and it gives me this error:

error: a type with the same simple name is already defined by the single-type-import of KeyboardVisibilityPlugin
import com.github.adee42.keyboardvisibility.KeyboardVisibilityPlugin;
^
1 error

FAILURE: Build failed with an exception.

  • What went wrong:
    Execution failed for task ':app:compileDebugJavaWithJavac'.

Compilation failed; see the compiler error output for details.

  • Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

  • Get more help at https://help.gradle.org

the version for the widget is search_widget: ^0.2.0
the app works without it

Select value in textfield

Goodmorning again,

Went through your packages and this is exactly what i need. The only thing i would like to have different is that whenever you choose an item, it is selected in the textField and not in a card below the searchfield. I tried to sent the controller to the selectedItemBuilder and set the text from there, but that didn't seem to work.

Is there any way on doing this?

The method 'toLowerCase' was called on null.

In the queryBulider function this keeps out putting "The method 'toLowerCase' was called on null." and the query has value.

queryBuilder: (String query, List<Word> list) {
                           return list.where(
                                (Word item) => item.translation.toLowerCase().contains(query.toLowerCase())
                           ).toList();
                      },

my Word data structure is

class Word{
  int id,difficulty;
  String word,definition1,definition2,example,translation;

  Word({this.id,this.word,this.definition1,this.definition2,this.difficulty,this.example,this.translation});
}

Really appreciate what you did tho.

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.