search_autocomplete 1.0.1

A Flutter autocomplete search widget with custom dropdowns and Cubit/BLoC support.

example/lib/main.dart

import 'package:example/cubit/search_cubit.dart';
import 'package:flutter/material.dart';
import 'package:search_autocomplete/search_autocomplete.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(20, 0, 30, 50),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: const SearchPage(),
        builder: (context, child) {
          return DecoratedBox(
            decoration: const BoxDecoration(color: Colors.blueGrey),
            child: Stack(
              alignment: Alignment.center,
              children: [
                LayoutBuilder(builder: (_, ctx) {
                  return SingleChildScrollView(
                    physics: const BouncingScrollPhysics(),
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.redAccent.withValues(alpha: 0.2),
                        border: const Border(
                          right: BorderSide(width: 0.5),
                          left: BorderSide(width: 0.5),
                        ),
                      ),
                      constraints: BoxConstraints(
                        minHeight: ctx.maxHeight,
                        maxWidth: 450,
                      ),
                      child: IntrinsicHeight(child: child),
                    ),
                  );
                }),
                const Align(
                  alignment: Alignment.bottomRight,
                  child: Material(
                    child: Text(
                      '12345 text',
                      style: TextStyle(fontSize: 24),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

class SearchPage extends StatefulWidget {
  const SearchPage({
    super.key,
  });

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  final _cubit = SearchCubit();

  @override
  void initState() {
    super.initState();
    _cubit.init();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Search Example')),
      body: StreamBuilder<SearchState>(
          stream: _cubit.stream,
          builder: (context, snapshot) {
            final state = snapshot.data ?? _cubit.state;

            return _buildContent(state);
          }),
    );
  }

  Widget _buildContent(SearchState state) {
    return ListView(
      children: [
        const SizedBox(height: 120),
        _buildCustomizeField(state),
        const SizedBox(height: 200),
        _buildDefaultField(state),
        const SizedBox(height: 800),
      ],
    );
  }

  Widget _buildDefaultField(SearchState state) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(10, 0, 20, 5),
      child: SearchAutocomplete<String>(
        options: state.listFiltered,
        initValue: state.current,
        onSearch: _cubit.search,
        onSelected: _cubit.select,
        getString: (value) => value,
        hintText: 'Default search...',
      ),
    );
  }

  Widget _buildCustomizeField(SearchState state) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: SearchAutocomplete<String>(
        options: state.listFiltered,
        initValue: state.current,
        onSearch: _cubit.search,
        onSelected: _cubit.select,
        getString: (value) => value,
        fieldBuilder: (controller, onFieldTap, showDropdown, onPressed) {
          return InkWell(
            onTap: () => onPressed(showDropdown),
            child: Row(
              children: [
                Expanded(child: Text('Current value: ${state.current}')),
                Expanded(
                  child: TextFormField(
                    controller: controller,
                    onTap: onFieldTap,
                    decoration: InputDecoration(
                      hintText: 'Search...',
                      suffixIcon: IconButton(
                        onPressed: () => onPressed(showDropdown),
                        icon: Icon(
                          showDropdown
                              ? Icons.arrow_drop_down
                              : Icons.arrow_drop_up,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
        dropDownBuilder: (options, onSelected, controller) {
          return Column(
            children: [
              TextFormField(
                controller: controller,
                decoration: InputDecoration(
                  hintText: 'Custom search...',
                  suffixIcon: IconButton(
                    onPressed: controller.clear,
                    icon: Icon(Icons.clear),
                  ),
                ),
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: options.length,
                  itemBuilder: (context, index) {
                    final option = options[index];
                    return ListTile(
                      leading: const Icon(Icons.star),
                      title: Text(option),
                      onTap: () => onSelected(option),
                    );
                  },
                ),
              ),
            ],
          );
        },
        emptyDropDown: (controller, close) {
          return TextFormField(
            controller: controller,
            decoration: InputDecoration(
              hintText: 'Custom search...',
              suffixIcon: IconButton(
                onPressed: controller.clear,
                icon: Icon(Icons.clear),
              ),
            ),
          );
        },
      ),
    );
  }
}