Flutter自定义搜索栏插件customized_search_bar的使用

CustomizedSearchBar

CustomizedSearchBar 是一个高度可定制的 Flutter 应用程序搜索栏小部件。它提供了多种选项来定制搜索栏的外观和功能以满足您的特定需求。该小部件包括可定制的图标、颜色和边框特征，并且可以从提供的列表中实时过滤搜索结果。

开发者

Elif Köser | info@technerd.dev

特性

• 语音搜索功能：您可以借助搜索栏中的麦克风图标进行语音搜索。（1.0.0 版本）
• 实时搜索过滤：根据用户的输入自动过滤项目列表。（0.0.6 版本及以后）
• 清除搜索功能：通过后缀图标按钮清除搜索输入。（0.0.6 版本及以后）
• 可定制的提示文本：为搜索栏设置自定义提示文本。（0.0.6 版本及以后）
• 可定制的图标：在搜索栏的开始和结束位置添加图标，可以自定义大小和颜色。（0.0.6 版本及以后）
• 可定制的边框特征：设置搜索栏的边框特征。（0.0.6 版本及以后）

安装

步骤 1

将最新版本的包添加到您的 pubspec.yaml 文件中（并运行 dart pub get）：

dependencies:
  customized_search_bar: ^1.0.0

步骤 2

导入包并在您的 Flutter 应用中使用它：

import 'package:customized_search_bar/customized_search_bar.dart';

所需权限

如果您使用的是 0.0.6 版本

无需添加权限。

如果您使用的是 1.0.0 版本

在使用此包之前，您需要为您的 Android 和 iOS 应用添加权限。这些权限是为了访问手机的麦克风。下面是添加这些权限的位置和方法。

Android 权限

步骤：

1. 打开 android/app/src/main/AndroidManifest.xml 文件。
2. 在 <manifest> 标签下方添加以下权限：

<uses-permission android:name="android.permission.RECORD_AUDIO"/>

iOS 权限

步骤：

1. 打开 iOS/Runner/Info.plist 文件。
2. 在 <dict> 标签下方添加以下权限：

<key>NSMicrophoneUsageDescription</key>
<string>Permission to use the phone's microphone is required for the voice search feature of the search bar.</string>

使用示例

CustomizedSearchBar(
    hintText: 'Search for fruits...',
    speakHintText: "Speak to search",
    prefixIcon: Icons.search,
    suffixIcon: Icons.clear,
    voiceIcon: Icons.mic,
    prefixIconColor: Colors.blueAccent,
    suffixIconColor: Colors.red,
    voiceIconColor: Colors.pinkAccent,
    cursorColor: Colors.green,
    focusedBorderColor: Colors.deepPurpleAccent,
    prefixIconSize: 35.0,
    suffixIconSize: 35.0,
    voiceIconSize: 35.0,
    borderRadiusValue: 30.0,
    borderWidth: 3.0,
    searchList: fruitList,
    onSearchResultChanged: updateSearchResults,
    searchController: searchController,
),

在屏幕中使用示例

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Customized Search Bar with Voice Search',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SearchBarDemo(),
    );
  }
}

class SearchBarDemo extends StatefulWidget {
  [@override](/user/override)
  _SearchBarDemoState createState() => _SearchBarDemoState();
}

class _SearchBarDemoState extends State<SearchBarDemo> {
  final TextEditingController searchController = TextEditingController();
  final List<String> fruitList = [
    'Apple',
    'Banana',
    'Orange',
    'Grape',
    'Pineapple',
    'Strawberry',
    'Watermelon'
  ];
  List<String> displayedFruits = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    displayedFruits = fruitList;
  }

  void updateSearchResults(List<String> results) {
    setState(() {
      displayedFruits = results;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Customized Search Bar Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            CustomizedSearchBar(
              hintText: 'Search for fruits...',
              speakHintText: "Speak to search",
              prefixIcon: Icons.search,
              suffixIcon: Icons.clear,
              voiceIcon: Icons.mic,
              prefixIconColor: Colors.blueAccent,
              suffixIconColor: Colors.red,
              voiceIconColor: Colors.pinkAccent,
              cursorColor: Colors.green,
              focusedBorderColor: Colors.deepPurpleAccent,
              prefixIconSize: 35.0,
              suffixIconSize: 35.0,
              voiceIconSize: 35.0,
              borderRadiusValue: 30.0,
              borderWidth: 3.0,
              searchList: fruitList,
              onSearchResultChanged: updateSearchResults,
              searchController: searchController,
            ),
            Expanded(
              child: ListView.builder(
                itemCount: displayedFruits.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: ListTile(
                      title: Text(displayedFruits[index]),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}