A full customizable SearchBar-Widget with suggestions for iOS & Android.

Features

The Suggestion-SearchBar can be used with or without suggestions. Style is full customizable.

Getting started

  1. Import the package: import 'package:suggestion_searchbar/suggestion_searchbar.dart';

  2. Add "SearchBar" in Build-Method

  3. Enter all values and data which are required by the widget

  4. Play around with styles and enjoy using

Usage

import 'package:flutter/material.dart';
import 'package:suggestion_searchbar/suggestion_searchbar.dart';

class SearchBarExample extends StatelessWidget {

  SearchBarExample({Key? key}) : super(key: key);

  final controller = TextEditingController();

  final List<String> sugList = [
    //Put suggestion data here
    "Apple",
    "Android",
    "Flutter",
    "Dart",
    //...
  ];

  @override
  Widget build(BuildContext context) {

    //Responsive Design Vars
    const mockupWidth = 375;
    const mockupHeight = 812;
    final width = MediaQuery.of(context).size.width;
    final height = MediaQuery.of(context).size.height;
    final scale = mockupWidth / width;
    final textScaleFactor = width / mockupWidth;

    return SearchBar(
      //Enables Suggestions
      enableSuggestions: true,
      
      textScaleFactor: textScaleFactor, //For responsive text size
      
      textFieldController: controller, //TextEditingController

      //Coloring
      cursorColor: Colors.white,
      enabledBorderColor: Colors.blue,
      focusedBorderColor: Colors.blue.withAlpha(100),

      labelColor: Colors.white.withAlpha(180),
      textColor: Colors.white,
      prefixIconColor: Colors.white,
      suffixIconColor: Colors.white.withAlpha(100),

      //Your suggestion-data
      suggestionsList: sugList,

      //Is added to the hint text (Search *optionalLabel*)
      optionalLabel: "Categories",

      gap: 12, //Gap between search- and suggestion bar

      itemHeight: 60, //Height of the single items
      itemTextSize: 18, //Size of suggestion-item
      itemBGColor: const Color(0xFF252525), //BG Color of the single items
      itemTextColor: Colors.white,
      itemBorderRadius: 25, //BorderRadius of the single items
      itemPadding: const EdgeInsets.only(bottom: 2.0),

      enableSuggestionsFieldBorder: true,
      suggestionsFieldHeigth: height / 6,
      suggestionsFieldBGColor: const Color(0xFF181818), //BG Color for the whole suggestion bar
      suggestionsFieldBorderRadius: 25, //BorderRadius for the whole suggestion bar
      suggestionsFieldBorderWidth: 1,
      suggestionsFieldBorderColor: Colors.blue,

      onSelected: () {
        //Call function
      },
    );
  }
}

Additional information

For more information or any bugs and problems. Please contact: cedno.official@gmail.com

Libraries