Flutter搜索栏插件flutter_material_search_bar的使用

Flutter搜索栏插件flutter_material_search_bar的使用

Material Search Bar

Material Search Bar 是一个带有圆形展开动画的 Flutter 小部件，类似于 WhatsApp 的搜索栏。它受到了 WhatsApp SearchView 和 Android MaterialSearchView 的启发。

功能

• 带有圆形展开动画的搜索栏
• 支持自定义背景颜色、按钮等
• 可以通过 MaterialSearchBarController 控制搜索栏的显示和隐藏

使用方法

以下是一个完整的示例代码，展示了如何在项目中使用 flutter_material_search_bar 插件。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_material_search_bar/flutter_material_search_bar.dart';

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

  [@override](/user/override)
  State<MaterialSearchBarSample> createState() => _MaterialSearchBarSampleState();
}

class _MaterialSearchBarSampleState extends State<MaterialSearchBarSample> {
  final List<String> _list = [];
  final List<String> _searchList = [];
  final debounce = Debounce(milliseconds: 800);
  final MaterialSearchBarController _controller = MaterialSearchBarController();
  final TextEditingController _searchQuery = TextEditingController();
  Color color = Colors.white;

  [@override](/user/override)
  void initState() {
    _getCityList();
    super.initState();
  }

  // 模拟获取城市列表数据
  void _getCityList() async {
    // 这里可以替换为实际的数据源，例如从网络请求或本地文件加载
    _list.addAll(['北京', '上海', '广州', '深圳', '杭州']);
    _searchList.addAll(_list);
    setState(() {});
  }

  Color getHintColor() {
    return color != Colors.white ? Colors.white : Colors.grey;
  }

  Color getIconColor() {
    return color != Colors.white ? Colors.white : Colors.black;
  }

  void _openDialog(String title, Widget content) {
    showDialog(
      context: context,
      builder: (_) {
        return AlertDialog(
          contentPadding: const EdgeInsets.all(18.0),
          title: Text(title),
          content: content,
          actions: [
            TextButton(
              onPressed: Navigator.of(context).pop,
              child: const Text('关闭'),
            ),
          ],
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        if (_controller.isSearchBarVisible) {
          _controller.toggleSearchBar();
          return false;
        } else {
          return true;
        }
      },
      child: Scaffold(
        appBar: MaterialSearchBar(
          controller: _controller,
          appBar: AppBar(
            title: const Text('MSB with AppBar'),
            actions: [
              IconButton(
                icon: const Icon(Icons.colorize),
                onPressed: () {
                  _openDialog(
                    '选择颜色',
                    MaterialColorPicker(
                      onColorChange: (Color newColor) {
                        setState(() {
                          color = newColor;
                        });
                      },
                      selectedColor: Colors.white,
                    ),
                  );
                },
              ),
              IconButton(
                icon: const Icon(Icons.search),
                onPressed: () {
                  _controller.toggleSearchBar();
                },
              ),
            ],
          ),
          color: color,
          alignment: Alignment.bottomRight,
          textField: TextField(
            onChanged: (text) {
              debounce.run(() {
                if (text.isNotEmpty) {
                  _searchList.clear();
                  for (var element in _list) {
                    if (element.toLowerCase().contains(text.toLowerCase())) {
                      _searchList.add(element);
                    }
                  }
                } else {
                  _searchList.clear();
                  _searchList.addAll(_list);
                }
                if (mounted) {
                  setState(() {});
                }
              });
            },
            controller: _searchQuery,
            cursorColor: Colors.black,
            style: const TextStyle(fontSize: 18.0, color: Colors.black),
            decoration: InputDecoration(
              border: InputBorder.none,
              focusedBorder: InputBorder.none,
              enabledBorder: InputBorder.none,
              errorBorder: InputBorder.none,
              disabledBorder: InputBorder.none,
              hintText: '搜索...',
              hintStyle: TextStyle(color: getHintColor()),
            ),
          ),
          backButton: IconButton(
            icon: Icon(Icons.arrow_back, color: getIconColor()),
            onPressed: () async {
              _searchQuery.text = '';
              _controller.toggleSearchBar();
            },
          ),
          clearButton: IconButton(
            icon: Icon(Icons.close, color: getIconColor()),
            onPressed: () {
              _searchQuery.text = '';
              _searchList.clear();
              _searchList.addAll(_list);
              if (mounted) {
                setState(() {});
              }
            },
          ),
        ),
        body: ListView.separated(
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_searchList[index]),
            );
          },
          separatorBuilder: (BuildContext context, int index) => const Divider(height: 1),
          itemCount: _searchList.length,
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.close),
          onPressed: () {
            _searchQuery.text = '';
            _controller.toggleSearchBar();
          },
        ),
      ),
    );
  }
}