easy_search_bar_2 1.0.0 copy "easy_search_bar_2: ^1.0.0" to clipboard
easy_search_bar_2: ^1.0.0 copied to clipboard

AppBar with animated search functionality that can be used as regular or floating AppBar

example/lib/main.dart

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

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

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String searchValue = '';
  final List<String> _suggestions = [
    'Afghanistan',
    'Albania',
    'Algeria',
    'Australia',
    'Brazil',
    'Germany',
    'Madagascar',
    'Mozambique',
    'Portugal',
    'Zambia',
  ];

  Future<List<String>> _fetchSuggestions(String searchValue) async {
    await Future.delayed(const Duration(milliseconds: 750));

    return _suggestions
        .where(
          (element) =>
              element.toLowerCase().contains(searchValue.toLowerCase()),
        )
        .toList();
  }

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Example',
        theme: ThemeData(primarySwatch: Colors.orange),
        home: Scaffold(
          appBar: EasySearchBar2(
            title: const Text('Example'),
            onSearch: (value) => setState(() => searchValue = value),
            actions: [
              IconButton(icon: const Icon(Icons.person), onPressed: () {}),
            ],
            asyncSuggestions: (value) async => _fetchSuggestions(value),
          ),
          drawer: Drawer(
            child: ListView(
              padding: EdgeInsets.zero,
              children: [
                const DrawerHeader(
                  decoration: BoxDecoration(
                    color: Colors.blue,
                  ),
                  child: Text('Drawer Header'),
                ),
                ListTile(
                  title: const Text('Item 1'),
                  onTap: () => Navigator.pop(context),
                ),
                ListTile(
                  title: const Text('Item 2'),
                  onTap: () => Navigator.pop(context),
                ),
              ],
            ),
          ),
          body: Center(child: Text('Value: $searchValue')),
        ),
      );
}
1
likes
160
points
88
downloads
screenshot

Documentation

API reference

Publisher

verified publisherfemtopedia.de

Weekly Downloads

AppBar with animated search functionality that can be used as regular or floating AppBar

Repository (GitHub)
View/report issues

Topics

#appbar #navigation #search #ui #widget

Funding

Consider supporting this project:

github.com

License

BSD-3-Clause (license)

Dependencies

flutter

More

Packages that depend on easy_search_bar_2