A TypeAhead (autocomplete) widget for Flutter, where you can show suggestions to users as they type

Overview

Starlight Type Ahead

FLUTTER | ANDROID, IOS, LINUX, MACOS, WEB, WINDOWS

A TypeAhead (autocomplete) widget for Flutter, where you can show suggestions to users as they type

Features

☑️ Suggestion Builder
☑️ Autocomplete TextField
☑️ Autocomplete TextFormField

Watch the video

Watch Tutorial

Installation

Add starlight_type_ahead as dependency to your pubspec file.

starlight_type_ahead: 
    git:
      url: https://github.com/YeMyoAung/StarlightTypeAhead.git

Usage

First of all you need to import our package.

import 'package:starlight_type_ahead/starlight_type_ahead.dart';

And then used as any other widget.

Example

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:starlight_type_ahead/starlight_type_ahead.dart';

class ProductModel {
  final String _name;
  final String _barcode;
  final double _quantity;
  final double _price;

  String get name => _name;
  String get barcode => _barcode;
  double get quantity => _quantity;
  double get price => _price;

  const ProductModel({
    required String name,
    required String barcode,
    required double quantity,
    required double price,
  })  : _name = name,
        _barcode = barcode,
        _quantity = quantity,
        _price = price;

  ///Important
  Map<String, dynamic> toJson() => {
        'name': _name,
        'barcode': _barcode,
        'quantity': _quantity,
        'price': _price,
      };
}

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: SearchProduct(),
      ),
    ),
  );
}

class SearchProduct extends StatelessWidget {
  const SearchProduct({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(
        left: 20,
        right: 20,
        top: 20,
      ),
      child: StarlightTypeAhead(
        controller: TextEditingController(),
       onSelect: (select, service) {
          select as ProductModel;
          print(select.name);
          ///if you want to close Suggestion
          //service.closeSuggestion();
        },
        data:

            ///String
            //     const [
            //   'mg mg',
            //   'aung aung 1',
            //   'su su',
            //   'aung aung',
            // ],

            ///int
            // const    [
            //   100,
            //   200,
            //   300,
            //   400,
            //   500,
            // ],

            ///double
            //  const   [
            //   100,
            //   200,
            //   300,
            //   400,
            //   500,
            // ],

            ///bool
            // const    [
            //   true,
            //   false,
            // ],

            ///Map
            //     [
            //   const ProductModel(
            //     name: 'mi note 11',
            //     barcode: '1001',
            //     quantity: 100,
            //     price: 100,
            //   ).toJson(),
            //   const ProductModel(
            //     name: 'iphone 13 pro max',
            //     barcode: '1002',
            //     quantity: 100,
            //     price: 100,
            //   ).toJson(),
            //   const ProductModel(
            //     name: 'nova',
            //     barcode: '1003',
            //     quantity: 100,
            //     price: 100,
            //   ).toJson(),
            //   const ProductModel(
            //     name: 'vivo v15',
            //     barcode: '1004',
            //     quantity: 100,
            //     price: 100,
            //   ).toJson(),
            //   const ProductModel(
            //     name: 'nexus 5',
            //     barcode: '1006',
            //     quantity: 100,
            //     price: 100,
            //   ).toJson(),
            // ],

            ///Object
            const [
          ProductModel(
            name: 'mi note 11',
            barcode: '1001',
            quantity: 100,
            price: 100,
          ),
          ProductModel(
            name: 'iphone 13 pro max',
            barcode: '1002',
            quantity: 100,
            price: 100,
          ),
          ProductModel(
            name: 'nova',
            barcode: '1003',
            quantity: 100,
            price: 100,
          ),
          ProductModel(
            name: 'vivo v15',
            barcode: '1004',
            quantity: 100,
            price: 100,
          ),
          ProductModel(
            name: 'nexus 5',
            barcode: '1006',
            quantity: 100,
            price: 100,
          ),
        ],
        targets: const [
          'name',
          'barcode',
        ],
        itemWidth: double.infinity,
        itemHeight: 60,
        itemBuilder: (e) {
          ///For Object
          e as ProductModel;
          return ListTile(
            title: Text(e.name),
            subtitle: Text(e.barcode),
          );

          ///For Map
          // e as Map;
          // return ListTile(
          //   title: Text(e['name']),
          //   subtitle: Text(e['barcode']),
          // );
          // return ListTile(
          //   title: Text(e.toString()),
          // );
        },
        decoration: BoxDecoration(
          color: Colors.red,
        ),
        inputDecoration: const InputDecoration(
          border: OutlineInputBorder(),
          hintText: 'Search Product',
          suffixIcon: Icon(
            CupertinoIcons.barcode_viewfinder,
          ),
        ),
      ),
    );
  }
}

Contact Us

Starlight Studio

You might also like...

An app made in Flutter to help people choose the colors they will use in their projects!

An app made in Flutter to help people choose the colors they will use in their projects!

Color Picker An app made in Flutter to help people choose the colors they will use in their projects! Features Pick a color from a picker wheel, palet

Nov 27, 2022

Created application for team to help each other with providing food they want

Created application for team to help each other with providing food they want

Food wishes app When you login or create your account, you can write what do you wish right now as a separate card, using "Edit" button. If you no lon

Nov 29, 2021

A blogging application where users can publish their blogs and articles and can connect with other authors, developed using Flutter and Firebase.

A blogging application where users can publish their blogs and articles and can connect with other authors, developed using Flutter and Firebase.

Utopia About the app A blogging application where users can publish their blogs and articles and can connect with other authors, developed using Flutt

Jan 3, 2023

Flutter user list calendar - A flutter app that displays registered users on a calendar/list and allows to search for users using the full name

Flutter User Calendar A flutter app that displays registered users on a calendar

Jan 20, 2022

Github-search - Allows users to search users on github Uses flutter

Github-search - Allows users to search users on github Uses flutter

Github Search Github Search is a cross-platform mobile application powered by Flutter Framework and Github API. The application was built with simplic

Sep 13, 2022

Christianlyrics - Flutter plugin that allows you build lyrics srt type of song

Christianlyrics - Flutter plugin that allows you build lyrics srt type of song

christian_lyrics Flutter plugin that allows you build lyrics srt type of song. G

Dec 5, 2022

Show a draggable floating chat icon button and show messages on screens

Show a draggable floating chat icon button and show messages on screens

Show a draggable floating chat icon button and show messages on screens Features A widget for displaying a chat icon (or custom widget) on top of a ba

May 5, 2022

Multi type list view - A flutter customer ListView that displays multiple widget types.

Multi type list view - A flutter customer ListView that displays multiple widget types.

MultiTypeListView A light weight flutter customer ListView that displays multiple widget types. Screenshot home chat Getting Started dependencies: m

Jun 28, 2022

dos downloader app is developed for downloading video. You can download video from YouTube and Facebook. You can also play video on background

dosdownloader Dos downloader app is developed for downloading video. You can download video from YouTube and Facebook. You can also play video on back

Dec 8, 2021
Owner
Ye Myo Aung
Programming is my passion.
Ye Myo Aung
This is my way to build a Tagged Search Field that display a list with suggestions while the user type.

tagged_search_field This is my way to build a Tagged Search Field that display a list with suggestions while the user type. A regular search field at

Sherly Cabrera Sánchez 0 Nov 5, 2021
Tribally SDKs enable your users to create communities and bring in more people to talk about the things they love.

tribally Tribally SDKs enable your users to create communities and bring in more people to talk about the things they love. Getting Started This proje

Horum 0 Dec 28, 2021
Breathe is a mental health blogging app where users can join communities of doctors and other users from around the world and both share their problems as well as lend a ear to and help others

?????????????? ?????????????? In a condensed, suffocating society you can feel closed off, when you can't process your emotions and are going through

Soham Sen 3 May 16, 2022
Suggestion providers - Search suggestions for your dart/flutter app

suggestion_providers Get search suggestions (typeahead) from search engines, like google, duckduckgo and more. supported search engines: google duckdu

Clone Conflict 1 Jan 15, 2022
Behruz Hurramov 0 Dec 29, 2021
Today we will show you how you can create your developer portfolio website and app using flutter.

Responsive and Animated Portfolio Website & App - Flutter UI Live Preview Watch it on YouTube Packages we are using: flutter_svg: link goole_fonts: li

Abu Anwar 198 Dec 30, 2022
Create highly customizable, simple, and controllable autocomplete fields for Flutter.

Field Suggestion Installing Depend on it Add this to your package's pubspec.yaml file: dependencies: field_suggestion: <latest_version> Install it Y

Ismael Shakverdiev 21 Oct 18, 2022
An address search field which helps to autocomplete an address by a reference

Address Search Field Widget builders to create 'address search widgets' which helps to autocomplete an address using a reference. They can be used to

Jose Luna 13 Aug 14, 2022