Flutter搜索功能插件fsearch

Flutter搜索功能插件fsearch_nullsafety的使用

简介

fsearch_nullsafety 是一个强大的 Flutter 插件，帮助开发者轻松构建美观的搜索栏。它提供了丰富的功能，如边框、圆角、渐变背景颜色、阴影效果，以及任意数量的前缀和后缀操作按钮，并支持精美的提示动画。

作者: Newton
邮箱: coorchice.cb@alibaba-inc.com

特性:

支持漂亮的边框效果。
提供丰富的圆角配置。
支持炫酷的渐变效果。
提供易于使用的阴影能力。
支持任意数量的前缀和后缀操作按钮。
提供色彩丰富、灵活且强大的提示动画效果。
提供更易用的控制器，方便开发者获取和修改搜索栏内容。

安装方法

通过 pub 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  fsearch: ^<version number>

注意: 请访问 pub.dev/packages/fsearch 获取最新版本号。

通过 Git 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  fsearch:
    git:
      url: 'git@github.com:Fliggy-Mobile/fsearch.git'
      ref: '<Branch number or tag number>'

注意: 请参考 FSearch 官方项目获取分支号或标签号。

功能指南

参数与接口

FSearch 参数

参数名称	类型	必填	默认值	描述
controller	FSearchController	否	null	控制器，详见 [FSearchController]。
width	double	否	null	搜索栏宽度。
height	double	否	null	搜索栏高度。
enable	bool	否	true	是否启用搜索栏。
onTap	VoidCallback	否	null	点击搜索栏时触发的回调。
text	String	否	null	输入框的内容。
onSearch	ValueChanged<String>	否	null	点击键盘搜索按钮时触发的回调。
corner	FSearchCorner	否	null	圆角效果，详见 [FSearchCorner]。
cornerStyle	FSearchCornerStyle	否	null	圆角样式，默认为 [FSearchCornerStyle.round]，详见 [FSearchCornerStyle]。
strokeColor	Color	否	null	边框颜色。
strokeWidth	double	否	null	边框宽度。
backgroundColor	Color	否	null	背景颜色。
gradient	Gradient	否	null	背景渐变色，会覆盖 [backgroundColor]。
shadowColor	Color	否	null	设置控件阴影颜色。
shadowOffset	Offset	否	null	设置阴影偏移量。
shadowBlur	double	否	null	设置高斯模糊的标准差。
cursorColor	Color	否	null	光标颜色。
cursorWidth	double	否	null	光标宽度。
cursorRadius	double	否	null	光标圆角大小。
prefixes	List<Widget>	否	null	前缀操作按钮。
suffixes	List<Widget>	否	null	后缀操作按钮。
padding	EdgeInsets	否	null	输入区域与搜索栏边缘的距离。
margin	EdgeInsets	否	null	搜索栏外部间距。
style	TextStyle	否	null	输入文本样式。
hintStyle	TextStyle	否	null	提示文本样式。
hints	List<String>	否	null	提示内容。如果只有一条提示，则无法启用提示交换动画。
hintSwitchDuration	Duration	否	null	提示交换间隔时间。
hintSwitchAnimDuration	Duration	否	null	提示交换动画持续时间。
hintSwitchEnable	bool	否	null	是否启用提示交换动画。
hintSwitchType	FSearchAnimationType	否	null	提示交换动画类型，默认为 [FSearchAnimationType.Scroll]，详见 [FSearchAnimationType]。
stopHintSwitchOnFocus	bool	是	true	获取焦点时是否自动停止提示交换动画。
hintPrefix	Widget	否	null	提示前缀控件。
center	bool	否	null	是否居中显示。

FSearchController

FSearchController 是 FSearch 的控制器，可以返回输入文本、提示文本、焦点状态等信息，并提供多种监控和文本更新能力。

参数:

参数名称	类型	描述
text	String	输入文本
hint	String	当前提示文本
focus	bool	焦点状态

接口:

setListener(VoidCallback listener)：设置输入监听。
setOnFocusChangedListener(ValueChanged<bool> listener)：设置焦点变化监听。
requestFocus()：请求焦点。
clearFocus()：清除焦点。

FSearchAnimationType

FSearchAnimationType 用于指定 FSearch 提示交换动画的类型。

enum FSearchAnimationType {
  /// 渐变动画
  Fade,

  /// 缩放动画
  Scale,

  /// 上下滚动动画
  Scroll,
}

演示示例

基础示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FSearch 基础示例')),
        body: Center(
          child: FSearch(
            /// 设置高度
            height: 30.0,

            /// 设置背景颜色
            backgroundColor: Colors.blue[200],

            /// 设置输入内容样式
            style: TextStyle(color: Colors.white, fontSize: 14.0),

            /// 点击键盘搜索时触发
            onSearch: (value) {
              print("搜索内容: $value");
            },
            prefixes: [Icon(Icons.search, color: Colors.white)],
          ),
        ),
      ),
    );
  }
}

效果展示:

前缀与后缀示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FSearch 前缀与后缀示例')),
        body: Center(
          child: FSearch(
            height: 30.0,
            backgroundColor: Colors.grey[200],
            style: TextStyle(fontSize: 14.0),

            /// 前缀控件
            prefixes: [Icon(Icons.search)],

            /// 后缀控件
            suffixes: [
              Icon(Icons.mic, color: Colors.blue),
              Icon(Icons.more_vert, color: Colors.red),
            ],
            onSearch: (value) {
              print("搜索内容: $value");
            },
          ),
        ),
      ),
    );
  }
}

效果展示:

渐变示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FSearch 渐变示例')),
        body: Center(
          child: FSearch(
            height: 30.0,
            backgroundColor: Colors.grey[200],
            style: TextStyle(fontSize: 14.0),
            gradient: LinearGradient(
              colors: [Colors.blue, Colors.purple],
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
            ),
            prefixes: [Icon(Icons.search)],
          ),
        ),
      ),
    );
  }
}

效果展示:

边角、边框与阴影示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FSearch 边角、边框与阴影示例')),
        body: Center(
          child: FSearch(
            height: 30.0,
            backgroundColor: Colors.white,
            style: TextStyle(fontSize: 14.0),
            corner: FSearchCorner(
              leftTopCorner: 15.0,
              leftBottomCorner: 15.0,
              rightBottomCorner: 15.0,
            ),
            strokeWidth: 1.0,
            strokeColor: Colors.black,
            shadowColor: Colors.black38,
            shadowBlur: 5.0,
            shadowOffset: Offset(2.0, 2.0),
            prefixes: [Icon(Icons.search)],
          ),
        ),
      ),
    );
  }
}

效果展示:

光标示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FSearch 光标示例')),
        body: Center(
          child: FSearch(
            height: 36.0,
            style: TextStyle(fontSize: 14.0),
            cursorColor: Colors.red[200],
            cursorRadius: 5.0,
            cursorWidth: 5.0,
            prefixes: [Icon(Icons.search)],
            suffixes: [Icon(Icons.mic)],
          ),
        ),
      ),
    );
  }
}

效果展示:

提示动画示例

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

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

class MyApp extends StatelessWidget {
  final List<String> hints = [
    "FSuper is awesome 👍",
    "Come to use FButton",
    "You will love FSearch",
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FSearch 提示动画示例')),
        body: Center(
          child: FSearch(
            height: 36.0,
            style: TextStyle(fontSize: 14.0),
            hints: hints,
            hintSwitchEnable: true,
            hintSwitchType: FSearchAnimationType.Fade,
            prefixes: [Icon(Icons.search)],
            suffixes: [Icon(Icons.mic)],
          ),
        ),
      ),
    );
  }
}

效果展示:

控制器示例

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final FSearchController _controller = FSearchController();

  @override
  void initState() {
    super.initState();
    _controller.setListener(() {
      print("输入内容: ${_controller.text}");
    });
    _controller.setOnFocusChangedListener((hasFocus) {
      print("焦点状态: $hasFocus");
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FSearch 控制器示例')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FSearch(
                controller: _controller,
                height: 36.0,
                style: TextStyle(fontSize: 14.0),
                hints: [
                  "Want more beautiful widgets 🤨 ?",
                  "We will launch the official website of FWidget",
                  "Will you expect it?",
                ],
                hintStyle: TextStyle(fontSize: 12.0),
                hintSwitchEnable: true,
                prefixes: [Icon(Icons.search)],
                suffixes: [Icon(Icons.mic)],
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  print("输入内容: ${_controller.text}");
                  print("当前提示: ${_controller.hint}");
                  _controller.clearFocus();
                },
                child: Text("获取内容并清除焦点"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

效果展示:

如何运行示例项目

克隆项目到本地。
进入项目 example 目录并运行以下命令：
```
flutter create .
```
在 example 中运行示例。

许可证

Copyright 2020-present Fliggy Android Team <alitrip_android@list.alibaba-inc.com>.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at following link.

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

更多关于Flutter搜索功能插件fsearch_nullsafety的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼•5 天前

更多关于Flutter搜索功能插件fsearch_nullsafety的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

fsearch_nullsafety 是一个支持空安全（null safety）的Flutter搜索功能插件。它可以帮助你在应用中快速实现搜索功能。以下是如何使用 fsearch_nullsafety 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 fsearch_nullsafety 依赖：

dependencies:
  flutter:
    sdk: flutter
  fsearch_nullsafety: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你需要使用搜索功能的Dart文件中，导入 fsearch_nullsafety 包：

import 'package:fsearch_nullsafety/fsearch_nullsafety.dart';

3. 创建搜索控件

你可以使用 FSearch 控件来创建一个搜索框。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SearchExample(),
    );
  }
}

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

class _SearchExampleState extends State<SearchExample> {
  List<String> items = [
    "Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"
  ];
  List<String> filteredItems = [];

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

  void onSearch(String query) {
    setState(() {
      filteredItems = items
          .where((item) => item.toLowerCase().contains(query.toLowerCase()))
          .toList();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Example'),
      ),
      body: Column(
        children: [
          FSearch(
            onChanged: onSearch,
            hintText: 'Search...',
          ),
          Expanded(
            child: ListView.builder(
              itemCount: filteredItems.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(filteredItems[index]),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}