Flutter搜索建议动画插件searchbar_animated_suggestions的使用

Saas Test

Saas Test 是一个 Flutter 包，它提供了一个可自定义的搜索字段小部件（SaasField），并带有动画化的建议。它还包括一个演示小部件 SaasTest，展示了其用法。

安装

要使用此包，请在 pubspec.yaml 文件中添加 saas_test 作为依赖项：

dependencies:
  saas_test:
    git:
      url: git://github.com/your_username/saas_test.git

使用

在您的 Dart 文件中导入包：

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

在您的小部件树中使用 SaasField 小部件：

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Saas Test Demo'),
      ),
      body: SaasTest(), // 使用 SaasTest 小部件
    );
  }
}

SaasTest 小部件

SaasTest 小部件演示了 SaasField 的用法：

• 显示一个带有动画化建议的搜索栏（SaasField）。
• 展示一个食品项目的样本列表以供搜索建议。

class SaasTest extends StatefulWidget {
  const SaasTest({Key? key}) : super(key: key);

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

class _SaasTestState extends State<SaasTest> {
  void toast(String message) {
    ScaffoldMessenger.of(context).clearSnackBars();
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text(message),
    ));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    List<dynamic> items = [
      "Chicken curry 🐔",
      "Egg curry 🥚",
      "Fish curry 🐟",
      "Paneer curry 🧀",
      "Heavy diet 🍔",
      "Mixed protein chat 🍲",
    ];

    return Scaffold(
      appBar: _appBar(),
      body: Column(
        children: [
          const SizedBox(height: 20),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: SaasField(
              height: 50,
              items: items,
              showDivider: true,
              onSubmitted: (value) => toast(value),
              padding: const EdgeInsets.symmetric(vertical: 8),
              prefixIcon: const Padding(
                padding: EdgeInsets.all(8.0),
                child: Icon(Icons.search, color: Colors.grey),
              ),
              actions: [
                InkWell(
                  onTap: () {},
                  child: const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Icon(Icons.filter_alt, color: Colors.grey),
                  ),
                ),
              ],
            ),
          ),
          const Center(
            child: Text(
              'Hello, Saas!',
            ),
          ),
        ],
      ),
    );
  }

  AppBar _appBar() {
    return AppBar(
      title: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Saas Test',
            style: TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
          Text(
            'Here you can taste the Mohali best food',
            style: TextStyle(
              color: Colors.grey,
              fontWeight: FontWeight.bold,
              fontSize: 16,
            ),
          ),
        ],
      ),
    );
  }
}

特性

• 搜索栏（SaasField）：交互式的搜索字段，具有自动动画化的建议。
• 可定制性：轻松定制图标、填充和操作等 UI 元素。
• 用途：适用于各种应用程序中显示动态搜索建议。

许可证

该项目根据 MIT 许可证授权 - 有关详细信息，请参阅 LICENSE 文件。

示例代码

以下是一个完整的示例代码，展示如何使用 searchbar_animated_suggestions 插件：

// example/lib/main.dart
import 'package:flutter/material.dart';
import './saas/saas.dart'; // 导入 SaasField 和相关组件

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

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

  // 应用程序根小部件
  [@override](/user/override)
  Widget build(BuildContext context) {
    Color primaryColor = const Color(0xFF6200EE); // 自定义主题颜色
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: MaterialColor(
          primaryColor.value,
          <int, Color>{
            50: primaryColor.withOpacity(0.1),
            100: primaryColor.withOpacity(0.2),
            200: primaryColor.withOpacity(0.3),
            300: primaryColor.withOpacity(0.4),
            400: primaryColor.withOpacity(0.5),
            500: primaryColor.withOpacity(0.6),
            600: primaryColor.withOpacity(0.7),
            700: primaryColor.withOpacity(0.8),
            800: primaryColor.withOpacity(0.9),
            900: primaryColor.withOpacity(1),
          },
        ),
        primaryColor: primaryColor,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        appBarTheme: AppBarTheme(
          backgroundColor: primaryColor,
          foregroundColor: Colors.white,
          titleTextStyle: const TextStyle(
            color: Colors.white,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      ),
      home: const SaasTest(), // 主页面
    );
  }
}