custom_search_bar 0.0.1

Experience total control over both the search bar and app bar UI.

customSearchBar: Masterful AppBar and Search UI Customization for Flutter

customSearchBar is a powerful Flutter package that empowers you to have full control over both the search bar and app bar UI in your app's search screen. With customSearchBar, you can seamlessly integrate advanced search functionality while customizing the app bar and search bar according to your preferences.

Features

• Customizable App Bar: Enjoy complete control over the design of your app bar, making your search screen truly unique.
• Refined Result Filtering: Effortlessly filter search results based on user input and preferences.

Installation

Add the following line to your pubspec.yaml file:

dependencies:
  custom_search_bar: # Use the latest version

Usage

Import the package

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

Implement the SearchBarX

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final TextEditingController _searchController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('customSearchBar Sample'),
        actions: [
            InkWell(
                onTap: () => showSearchForCustomiseSearchDelegate<UserModel>(
                    context: context,
                    delegate: SearchScreen<UserModel>(
                  hintText: 'search here',
                  items: people,
                  filter: (user) => [user.username],
                  itemBuilder: (user) => UserTile(user: user),
                  failure: const Center(
                    child: Text('No Possible result found'),
                  ),
                  appBarBuilder:
                      (controller, onSubmitted, textInputAction, focusNode) {
                    //customize the way you want, if you don't wish to customize, there is default curve search Bar.
                            return PreferredSize(
                                    preferredSize: const Size(double.infinity, 60.0),
                                    child:AppBar(
                                        title: TextField(
                                            focusNode: focusNode,
                                            controller: controller,
                                            textInputAction: textInputAction,
                                            keyboardType: TextInputType.text,
                                            onSubmitted: onSubmitted,
                                            decoration: const InputDecoration(
                                              hintText: '',
                                              border: InputBorder.none,
                                              focusedBorder: InputBorder.none,
                                            ),
                                          ),
                                    )
                            );
                      }
                    )
                )
            )
        ],
      ),
      body: Center(
        child: Text('customSearchBar.'),
      ),
    );
  }
}

Issues and Contributions

Please feel free to report any issues or bugs you encounter. Contributions and pull requests are also welcome!

License

This package is open-source and available under the MIT License.