Flutter服务器端搜索插件search_from_server的使用

Flutter服务器端搜索插件search_from_server的使用

概述

search_from_server 是一个用于在 Flutter 应用程序中实现服务器端搜索功能的插件。它允许用户通过输入关键字来从服务器获取动态数据，并将其展示在应用程序中。

特性

• 灵活性：支持多种搜索逻辑和结果展示方式。
• 高性能：优化了网络请求，减少延迟。
• 易用性：简单直观的 API 设计，快速集成到项目中。
• 可定制性：可以根据需求自定义搜索框样式和结果布局。

安装

要将 search_from_server 添加到您的 Flutter 项目中，请按照以下步骤操作：

1. 在 pubspec.yaml 文件中添加依赖：

   dependencies:
     search_from_server: ^1.0.0
   

2. 运行以下命令以安装依赖：

   flutter pub get
   

使用示例

以下是一个完整的示例代码，展示了如何使用 search_from_server 插件实现服务器端搜索功能。

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Search From Server Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const SearchPage(),
    );
  }
}

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

  [@override](/user/override)
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  final TextEditingController _controller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Server Side Search'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Search',
                prefixIcon: const Icon(Icons.search),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8.0),
                ),
              ),
              onChanged: (value) {
                if (value.isNotEmpty) {
                  _performSearch(value);
                } else {
                  setState(() {
                    // 清空搜索结果
                  });
                }
              },
            ),
            const SizedBox(height: 20),
            Expanded(
              child: FutureBuilder<List<String>>(
                future: Future.delayed(const Duration(seconds: 1), () {
                  // 模拟从服务器获取数据
                  return ['Apple', 'Banana', 'Orange', 'Grapes'];
                }),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const Center(child: CircularProgressIndicator());
                  } else if (snapshot.hasError) {
                    return Center(child: Text('Error: ${snapshot.error}'));
                  } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
                    return const Center(child: Text('No results found.'));
                  } else {
                    return ListView.builder(
                      itemCount: snapshot.data!.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text(snapshot.data![index]),
                          onTap: () {
                            // 处理点击事件
                            print('${snapshot.data![index]} clicked');
                          },
                        );
                      },
                    );
                  }
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _performSearch(String query) {
    // 调用搜索逻辑并更新 UI
    setState(() {});
  }
}