Starlight search bar - Starlight search bar with flutter

Overview

starlight_search_bar

If you find the easiest way to search your item, this is for you.

Features

You can find your item in the easiest way.

ScreenShots

     

Installation

Add starlight_search_bar as dependency to your pubspec file.

starlight_search_bar: 
    git:
      url: https://github.com/YeMyoAung/starlight_search_bar.git

Usage

First of all you need to import our package.

import 'package:starlight_search_bar/starlight_search_bar.dart';

Parameters and Uses

    ///if you want to see query data,you need to set true
    bool debugQuery = false,

    ///BuildContext is required
    required BuildContext context,

    ///Search Data is required
    required List<T> data,

    ///If you provide a list of map, you will need to provide the key of map
    List<String>? targets,

    ///if you want to show custom suggestion ,you can provide a widget
    Widget Function(T)? buildSuggestion,

    ///if you want to show custom result ,you can provide a widget
    Widget Function(T)? buildResult,

    ///if you want to do something after on tap at suggestion,you can provide a function with a parameter
    Function(T)? onSuggestionTap,

    ///if you want to do something after on tap at result,you can provide a function with a parameter
    Function(T)? onResultTap,

    ///if you want to set custom search,you can provide a function with two parameter
    List<T> Function(List<T>, String)? onSearch,

    ///if you want to show custom leading ,you can provide a widget
    Widget? leading,

    ///if you want to show custom action ,you can provide a list of widget
    List<Widget>? action,

    ///if you want to show custom search field label ,you can provide a string
    String? searchFieldLabel,

    ///if you want to show custom search field label ,you can provide a text style
    TextStyle? searchFieldStyle,

    ///if you want to show custom search field label ,you can provide an input decoration theme
    InputDecorationTheme? searchFieldDecorationTheme,

    ///if you want to show custom keyboard type ,you can provide a keyboard type
    TextInputType? keyboardType,

    ///if you want to work with custom action ,you can provide an input action
    TextInputAction textInputAction = TextInputAction.search,

Example

import 'package:flutter/material.dart';
import 'package:starlight_search_bar/starlight_search_bar.dart';
import 'package:starlight_utils/starlight_utils.dart';
import 'package:test_application/state/state.dart';

String _transform(String name) {
  try {
    return "${double.parse(name).currencyFormat} Ks";
  } catch (e) {
    return name.toValidate;
  }
}

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

  @override
  Widget build(BuildContext context) {
    StarlightUtils.of(context);
    return Scaffold(
      appBar: AppBar(
        title: const Text("Starlight Search Bar"),
        actions: [
          IconButton(
            onPressed: () {
              StarlightSearchBar.searchBar<Map>(
                context: context,
                data: [
                  {
                    "name": "Mg Mg",
                    "age": 15,
                  },
                  {
                    "name": "Aung Aungg",
                    "age": 12,
                  },
                  {
                    "name": "Su Su",
                    "age": 25,
                  },
                  {
                    "name": "Mya Mya",
                    "age": 18,
                  },
                  {
                    "name": "Hla Hla",
                    "age": 20,
                  },
                ],
                targets: ['name', 'age'],
                debugQuery: false,
                // buildResult: (value) => Text(value['name']),
                // buildSuggestion: (value) => Text(value['name']),
                onResultTap: (e) {
                  print(e);
                },
                onSuggestionTap: (e) {
                  print(e);
                },
                // onSearch: (data, string) => data
                //     .where((element) => element['name'].contains(string))
                //     .toList(),
              );
            },
            icon: Icon(Icons.search),
          ),
        ],
      ),
      body: SizedBox(
        width: context.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            StateListener(
              transform: _transform,
            ),
            TextField(
              onChanged: StateChange.onChange,
            ),
          ],
        ),
      ),
    );
  }
}

Contact Us

Starlight Studio

You might also like...

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

A platform-adaptive search for Flutter

A platform-adaptive search for Flutter

Flutter Platform Search Flutter platform search is an abstract implementation of the Flutter search delegate. It is a time saving way to implement a p

Dec 31, 2022

A flutter search engine based on MediaWiki with caching.

A flutter search engine based on MediaWiki with caching.

Table of contents Project Description Working App Architecture BLoC/Cubit Pattern Caching using HiveDB App UI Project Setup To-Do How to get started w

Nov 7, 2022

A mobile application that allows you to search and fetch recipes using Flutter, TheMealDB and Domain Driven Design

recipe_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 th

Dec 4, 2021

Search and view popular Youtube videos with Youtube API in Flutter App

Search and view popular Youtube videos with Youtube API in Flutter App

getx_bottom_nav_sample The sample of AnimatedBottomNavBar with GetX 주요 Package 설명 1.url_launcher url_launcher pub.dev flutter 에서 인앱, 외부 브라우저로 연길 시켜 주는

Dec 25, 2021

A music player app that allows you to search for music by artist made using Flutter

A music player app that allows you to search for music by artist made using Flutter

Music Player A music player app that allows you to search for music by artist. Music source from iTunes affiliate API. Made using Flutter with simple

Feb 5, 2022

A fully functional Movies Application built with Flutter. The application built with null safety and clean architecture, also uses OMDB API for fetching movies in the search item

A fully functional Movies Application built with Flutter. The application built with null safety and clean architecture, also uses OMDB API for fetching movies in the search item

Cinema DB Project Details This project uses null safety feature Project uses clean code architecture (Uncle Bob's Architecture) Project can run on bot

Oct 1, 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

Jan 15, 2022

(mostly) Automatic search-enabled appBar for flutter

(mostly) Automatic search-enabled appBar for flutter

flutter_search_bar A simple and mostly automatic material search bar for flutter (dart). Note: use flutter_search_bar and not search_bar -- I own both

Dec 31, 2022
Owner
Ye Myo Aung
Programming is my passion.
Ye Myo Aung
A google browser clone which is made by using flutter and fetching the google search api for the search requests.

google_clone A new Flutter project. Project Preview Getting Started This project is a starting point for a Flutter application. A few resources to get

Priyam Soni 2 May 31, 2022
Flutter Search bar

search_bar Flutter search bar Search suggestion and search lists Demo video Record_2021-12-09-19-59-51.mp4 ScreenShots Getting Started This project is

Aravind B 0 Dec 9, 2021
Help developers build the most beautiful search bar🍹.

fsearch Help developers build the most beautiful search bar ?? . [FSearch] provides developers with a one-stop search bar construction service. Suppor

Fliggy Mobile 70 Oct 28, 2022
Flutter-nav-bottom-bar-tutorial - A flutter bottom navigation bar tutorial

Flutter Bottom Navigation Bar Tutorial A tutorial with various Flutter bottom na

Aleyna Eser 2 Oct 25, 2022
A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

PengHui Li 112 Nov 11, 2022
Animation nav bar - Flutter Animated Navigation Bar

Flutter Animated Navigation Bar Getting Started This project is a starting point

Sudesh Nishshanka Bandara 23 Dec 30, 2022
Custom bottom bar - A bottom tool bar that can be swiped left or right to expose more tools.

custom_bottom_bar A bottom tool bar that can be swiped left or right to expose more tools. usage Create your custom bottom bars with up to four custom

null 4 Jan 26, 2020
This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app bar with animation.

jazzcash_ui This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app

null 9 Nov 27, 2022
181011450390-FLUTTER-CHALLENGE - Example GitHub Search app built in Flutter & RxDart

Example GitHub Search app built in Flutter & RxDart Simple app using the Flutter

null 1 Jan 3, 2022