flutter_searchbox 4.0.0-alpha.4

Flutter Searchbox provides declarative API to query Elasticsearch, and binds UI widgets with different types of search queries. As the name suggests, it provides a searchbox UI widget for Elasticsearc [...]

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:searchbase/searchbase.dart';
import 'package:flutter_searchbox/flutter_searchbox.dart';
import 'results.dart';
import 'package:speech_to_text/speech_to_text.dart' as stt;
import 'package:speech_to_text/speech_to_text_provider.dart' as stp;

void main() {
  runApp(FlutterSearchBoxApp());
}

class FlutterSearchBoxApp extends StatelessWidget {
  // Avoid creating searchbase instance in build method
  // to preserve state on hot reloading
  final searchbaseInstance = SearchBase(
      'good-books-ds',
      'https://appbase-demo-ansible-abxiydt-arc.searchbase.io',
      'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61',
      appbaseConfig: AppbaseSettings(
          recordAnalytics: true,
          // Use unique user id to personalize the recent searches
          userId: '[e-mail]'));

  // Create an instance of speech to text provider at top level of your application
  // It is only required to integrate voice search.
  final stp.SpeechToTextProvider speechToTextInstance =
      stp.SpeechToTextProvider(stt.SpeechToText());

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

  @override
  Widget build(BuildContext context) {
    // The SearchBaseProvider should wrap your MaterialApp or WidgetsApp. This will
    // ensure all routes have access to the store.
    return SearchBaseProvider(
      // Pass the searchbase instance to the SearchBaseProvider. Any ancestor `SearchWidgetConnector`
      // widgets will find and use this value as the `SearchController`.
      searchbase: searchbaseInstance,
      child: MaterialApp(
        title: "SearchBox Demo",
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: HomePage(speechToTextInstance: speechToTextInstance),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  final stp.SpeechToTextProvider? speechToTextInstance;

  const HomePage({this.speechToTextInstance});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SearchBox Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          actions: <Widget>[
            IconButton(
                icon: Icon(Icons.search),
                onPressed: () {
                  // Invoke the Search Delegate to display search UI with autosuggestions
                  showSearch(
                    context: context,
                    // SearchBox widget from flutter searchbox
                    delegate: SearchBox(
                        // A unique identifier that can be used by other widgetss to reactively update data
                        id: 'search-widget',
                        enableRecentSearches: true,
                        enablePopularSuggestions: true,
                        showAutoFill: true,
                        maxPopularSuggestions: 3,
                        size: 5,
                        dataField: [
                          {'field': 'original_title', 'weight': 1},
                          {'field': 'original_title.search', 'weight': 3}
                        ],
                        // pass the speech to text instance to enable voice search
                        speechToTextInstance: speechToTextInstance),
                    // Initialize query to persist suggestions for active search
                    query: SearchBaseProvider?.of(context)
                        .getSearchWidget('search-widget')
                        ?.value
                        ?.toString(),
                  );
                }),
          ],
          title: StateProvider(
              subscribeTo: {
                'result-widget': [KeysToSubscribe.Results]
              },
              onChange: (next, prev) {
                print("Next state");
                print(next['result-widget']?.results?.data.length);
                print("Prev state");
                print(prev['result-widget']?.results?.data.length);
              },
              build: (searchState) {
                var results =
                    searchState['result-widget']?.results?.numberOfResults;
                print("SEARCH STATE");
                print(searchState);
                if (results != null) {
                  return Text("results" + results.toString());
                }
                return Text("results" + "empty");
              }),
        ),
        body: Center(
          // A custom UI widget to render a list of results
          child: SearchWidgetConnector(
              id: 'result-widget',
              dataField: 'original_title',
              react: {
                'and': ['search-widget', 'author-filter'],
              },
              size: 10,
              triggerQueryOnInit: true,
              preserveResults: true,
              builder: (context, searchController) =>
                  ResultsWidget(searchController)),
        ),
        // A custom UI widget to render a list of authors
        drawer: StateProvider(
            subscribeTo: {
              'result-widget': [KeysToSubscribe.Results]
            },
            build: (searchState) {
              var results =
                  searchState['result-widget']?.results?.numberOfResults;
              print("SEARCH STATE");
              print(searchState);
              if (results != null) {
                return Text("results" + results.toString());
              }
              return Text("results" + "empty");
            }),
        // drawer: SearchWidgetConnector(
        //   id: 'author-filter',
        //   type: QueryType.term,
        //   dataField: "authors.keyword",
        //   size: 10,
        //   // Initialize with default value
        //   value: [],
        //   react: {
        //     'and': ['search-widget']
        //   },
        //   builder: (context, searchController) {
        //     // Call searchController's query at first time
        //     if (searchController.query == null) {
        //       searchController.triggerDefaultQuery();
        //     }
        //     return AuthorFilter(searchController);
        //   },
        //   // Avoid fetching query for each open/close action instead call it manually
        //   triggerQueryOnInit: false,
        // )
      ),
    );
  }
}