FTFS is a Flutter package which uses a TextField Widget to search and select a value from a list

Overview

flutter_textfield_search

Build and Test

FTFS is a Flutter package which uses a TextField Widget to search and select a value from a list. It's a simple, lightweight, and fully tested package unlike other "autocomplete" or textfield search packages. View complete code coverage results in JSON format here.

Usage

To use this package, add flutter_textfield_search as a dependency in your pubsec.yaml file.

Example

Import the package.

`import 'package:flutter_textfield_search/search.dart'`;

Then include the widget anywhere you would normally use a TextField widget with a String for label, a List for initialList, and a TextEditingController for controller.
Example MaterialApp using TextFieldSearch Widget

    const label = "Some Label";
    const dummyList = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
    TextEditingController myController = TextEditingController();
    MaterialApp(
      home: Scaffold(
      body: TextFieldSearch(initialList: dummyList, label: label, controller: myController)
      ),
    )

To get the value of the selected option, use addListener on the controller to listen for changes:

    @override
    void dispose() {
      // Clean up the controller when the widget is removed from the
      // widget tree.
      myController.dispose();
      super.dispose();
    }

    @override
    void initState() {
      super.initState();
      // Start listening to changes.
      myController.addListener(_printLatestValue);
    }
    
    _printLatestValue() {
      print("Textfield value: ${myController.text}");
    }

Selecting a List item from a Future List:

    TextEditingController myController = TextEditingController();

    // create a Future that returns List
    Future
   
     fetchData() async {
      await Future.delayed(Duration(milliseconds: 5000));
      List _list = new List();
      String _inputText = myController.text;
      // create a list from the text input of three items
      // to mock a list of items from an http call
      _list.add(_inputText + ' Item 1');
      _list.add(_inputText + ' Item 2');
      _list.add(_inputText + ' Item 3');
      return _list;
    }

    @override
    void dispose() {
      // Clean up the controller when the widget is removed from the
      // widget tree.
      myController.dispose();
      super.dispose();
    }

    // used within a MaterialApp (code shortened)
    MaterialApp(
      home: Scaffold(
      body: TextFieldSearch(
          label: 'My Label', 
          controller: myController
          future: () {
            return fetchData();
          }
        )
      ),
    )

   

Selecting an object from a Future List:

    TextEditingController myController = TextEditingController();

    // create a Future that returns List
    // IMPORTANT: The list that gets returned from fetchData must have objects that have a label property.
    // The label property is what is used to populate the TextField while getSelectedValue returns the actual object selected
    Future
   
     fetchData() async {
      await Future.delayed(Duration(milliseconds: 3000));
      List _list = new List();
      String _inputText = myController.text;
      List _jsonList = [
        {
          'label': _inputText + ' Item 1',
          'value': 30
        },
        {
          'label': _inputText + ' Item 2',
          'value': 31
        },
        {
          'label': _inputText + ' Item 3',
          'value': 32
        },
      ];
      // create a list of 3 objects from a fake json response
      _list.add(new TestItem.fromJson(_jsonList[0]));
      _list.add(new TestItem.fromJson(_jsonList[1]));
      _list.add(new TestItem.fromJson(_jsonList[2]));
      return _list;
    }

    @override
    void dispose() {
      // Clean up the controller when the widget is removed from the
      // widget tree.
      myController.dispose();
      super.dispose();
    }

    // used within a MaterialApp (code shortened)
    MaterialApp(
      home: Scaffold(
      body: TextFieldSearch(
          label: 'My Label', 
          controller: myController
          future: () {
            return fetchData();
          },
          getSelectedValue: (value) {
            print(value); // this prints the selected option which could be an object
          }
        )
      ),
    )

    // Mock Test Item Class
    class TestItem {
      String label;
      dynamic value;
      TestItem({
        this.label,
        this.value
      });

      factory TestItem.fromJson(Map
    
      json) {
        return TestItem(
          label: json['label'],
          value: json['value']
        );
      }
    }

    
   

Issues

Please email any issues, bugs, or additional features you would like to see built to [email protected].

Contributing

If you wish to contribute to this package you may fork the repository and make a pull request to this repository.

Note: Testing by running flutter test --coverage will generate coverage/lcov.info. Running bash test-coverage.sh will parse the lcov.info file into JSON format. This happens automatically within the CI/CD pipeline on a pull request to master but it is always good to test locally.

You might also like...

Minimal Unsplash Android App to easily search, explore and download images using Unsplash API.

Minimal Unsplash Android App to easily search, explore and download images using Unsplash API.

Minimal Unsplash Android App to easily search, explore and download images using Unsplash API. Download Button to download the image. User can set the image as a wallpaper. There is a favorite icon, which user can tap to mark/un-mark that image as a favorite.

Mar 27, 2022

Movie Database app - A Flutter app project that allows users to search for a movie or tv series

 Movie Database app - A Flutter app project that allows users to search for a movie or tv series

Movie Database app is a Flutter app project that allows users to search for a movie or tv series, see the detail, season & episode, and save watchlist.

Jan 5, 2023

Flutter app To list down your Daily task ,made using State manager i.e. Provider package

Flutter app To list down your Daily task ,made using State manager i.e. Provider package

Flutter app To list down your Daily task ,made using State manager i.e. Provider package

Jan 23, 2022

A Flutter package which can be used to make polylines(route) from a source to a destination, and also handle a driver's realtime location (if any) on the map.

A Flutter package which can be used to make polylines(route) from a source to a destination, and also handle a driver's realtime location (if any) on the map.

GoogleMapsWidget For Flutter A widget for flutter developers to easily integrate google maps in their apps. It can be used to make polylines from a so

Nov 30, 2022

Flutter Launcher Icons - A package which simplifies the task of updating your Flutter app's launcher icon.

Flutter Launcher Icons - A package which simplifies the task of updating your Flutter app's launcher icon.

Flutter Launcher Icons - A package which simplifies the task of updating your Flutter app's launcher icon. Fully flexible, allowing you to choose what platform you wish to update the launcher icon for and if you want, the option to keep your old launcher icon in case you want to revert back sometime in the future. Maintainer: @MarkOSullivan94

Dec 30, 2022

A new Flutter package which helps developers in creating walkthrough of their app.

A new Flutter package which helps developers in creating walkthrough of their app.

flutter_walkthrough A new Flutter package for both android and iOS which helps developers in creating animated walkthrough of their app. Show some ❤️

Sep 20, 2022

This app contain two pages. In first page user will see the list of places to visit and in other page detail of places will be shown. Apart from that there is route transition, hero and staggered animation while navigating to the detail page.

This app contain two pages. In first page user will see the list of places to visit and in other page detail of places will be shown. Apart from that there is route transition, hero and staggered animation while navigating to the detail page.

travell_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Dec 3, 2022

Flutter-based mobile app displaying a list of daily curated content from top engineering blogs and articles. Backed by a GraphQL-based API written in Kotlin..

Flutter-based mobile app displaying a list of daily curated content from top engineering blogs and articles. Backed by a GraphQL-based API written in Kotlin..

Flutter-based mobile app displaying a list of daily curated content from top engineering blogs and articles. Backed by a GraphQL-based API written in Kotlin..

Dec 14, 2022

Flutter | Because a widget-driven development requires a widget-driven preview.

Flutter | Because a widget-driven development requires a widget-driven preview.

Create samples of your widgets and preview them in real time This project is experimental but safe to use as not code is added during compilation. It

Dec 27, 2022
Owner
null
A Flutter increment value project with smart contract on Astar local

dapp_astar_evm_example A Flutter increment value project with smart contract on Astar local.

Polonity 4 Oct 26, 2022
Flutter File Select and Upload to the Server with Progress Bar - Day 44

Flutter File Select and Upload - Day 44 class Afgprogrammer extends Flutter100DaysOfCode { video() { return { "title": "Flutter File Selec

Mohammad Rahmani 30 Dec 17, 2022
A Flutter plugin to select, open, choose, pick and create documents, images videos

file_picker_cross The only Flutter plugin to select, open, choose, pick and create documents, images videos or other files on Android, iOS, the deskto

null 0 Oct 30, 2021
A basic Flutter app which allows people to save events to a list

A basic Flutter app which allows people to save events to a list

null 2 Apr 11, 2022
Scan Qr Code Which Will Automatically Add That User To The Visitor List

GIGO APP Gigo app is a mobile application where shopkeepers have an app that shows QR code and users can scan this QR code which will automatically ad

JASIRA T P 4 Dec 30, 2022
An app that keeps track of what you're watching and allows you to watch the shows from within the app itself. It uses Kitsu API as it's data source.

Anilemon A small app to keep track of and watch your favorite anime. Features Save anime that you are interested in in your library Open the website y

Pumpkin Person 0 Oct 12, 2021
A flutter app that uses authentication in firebase.

A flutter app that uses authentication in firebase.

Neha Ajith 5 Apr 22, 2022
Anime and Manga search app. created using Flutter and Jikan API

AnimSearch AnimSearch an App for searching Anime and Manga created with Flutter with data from Jikan API UI Design UI Design inspired by : Crunchyroll

Ariz Armeidi 56 Jan 6, 2023
A flutter app that allows users to search books and display their details

Project find books This repository is the first part of the main project which aims to search books and find libraries containing them. I've decided t

Abdel 3 Jul 11, 2022
Movie Database app is a Flutter app project that allows users to search for a movie or tv series, see the detail, season & episode, and save watchlist.

Flutter Movie Database Movie Database app is a Flutter app project that allows users to search for a movie or tv series, see the detail, season & epis

Timeless Existence 14 Dec 24, 2022