Flutter动画搜索栏插件 animation_search_bar 的使用

animation_search_bar 是一个可定制的动画搜索栏，适用于 AppBar。本文将详细介绍如何在 Flutter 应用中使用这个插件，并提供完整的示例代码。

快速入门

简单用例

以下是一个简单的用例示例：

AnimationSearchBar(
   backIconColor: Colors.black,
   centerTitle: 'App Title',
   onChanged: (text) => debugPrint(text),
   searchTextEditingController: controller,
   horizontalPadding: 5)

所有属性

以下是该插件的所有可用属性：

AnimationSearchBar(
   ///! Required
   onChanged: (text) => debugPrint(text),
   searchTextEditingController: controller,

   ///! Optional. For more customization
   //? Back Button
   backIcon: Icons.arrow_back_ios_new,
   backIconColor: Colors.white,
   isBackButtonVisible: true,
   previousScreen: null, // It will push and replace this screen when pressing the back button
   //? Close Button
   closeIconColor: Colors.white,
   //? Center Title
   centerTitle: 'App Title', 
   hintText: 'Search here...',
   centerTitleStyle: const TextStyle(
     fontWeight: FontWeight.w500,color: Colors.white, fontSize: 20),
   //? Search hint text
   hintStyle: const TextStyle(
     color: Colors.white, fontWeight: FontWeight.w300),
   //? Search Text
   textStyle: const TextStyle(
     color: Colors.white, fontWeight: FontWeight.w300),
   //? Cursor color
   cursorColor: Colors.lightBlue.shade300,
   //? Duration
   duration: const Duration(milliseconds: 500),
   //? Height, Width & Padding
   searchFieldHeight: 35, // Total height of the search field
   searchBarHeight: 50, // Total height of this Widget
   searchBarWidth: MediaQuery.of(context).size.width - 20, // Total width of this Widget
   horizontalPadding: 5,
   verticalPadding: 0,
   //? Search icon color
   searchIconColor: Colors.white.withOpacity(.7),
   //? Search field background decoration
   searchFieldDecoration: BoxDecoration(
     color: Colors.blueGrey.shade700,
     border: Border.all(color: Colors.black.withOpacity(.2), width: .5),
     borderRadius: BorderRadius.circular(15)),
   )

背景颜色

如果你想自定义背景颜色，请参考下面的例子，在其中我为搜索栏背景装饰了一个 Container。你可以根据需要进行装饰。

完整示例 Demo

以下是一个完整的示例应用，展示了如何使用 animation_search_bar 插件来创建一个带有动画效果的搜索栏：

import 'package:animation_search_bar/animation_search_bar.dart' show AnimationSearchBar;
import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: Home(), debugShowCheckedModeBanner: false));

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  late TextEditingController controller;
  late List<String> countries;

  @override
  void initState() {
    super.initState();
    countries = _countries;
    controller = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size(double.infinity, 65),
        child: SafeArea(
          child: Container(
            decoration: const BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.black26,
                  blurRadius: 5,
                  spreadRadius: 0,
                  offset: Offset(0, 5),
                ),
              ],
            ),
            alignment: Alignment.center,
            child: AnimationSearchBar(
              backIconColor: Colors.black,
              centerTitle: 'App Title',
              onChanged: (text) {
                countries = _countries
                    .where((e) => e.toLowerCase().contains(text.toLowerCase()))
                    .toList();
                setState(() {});
              },
              searchTextEditingController: controller,
              horizontalPadding: 5,
            ),
          ),
        ),
      ),
      body: ListView.builder(
        itemCount: countries.length,
        itemBuilder: (context, index) => ListTile(title: Text(countries[index])),
      ),
    );
  }
}

const _countries = [
  'Afghanistan',
  'Albania',
  'Algeria',
  'Andorra',
  'Azerbaijan',
  'Bahrain',
  'Bangladesh',
  'Bosnia and Herzegovina',
  'Brunei',
  'Burkina Faso',
  'Chad',
  'Djibouti',
  'Egypt',
  'Eritrea',
  'Ethiopia',
  'Gambia',
  'Ghana'
];

在这个示例中，我们创建了一个简单的应用程序，包含一个带有动画效果的搜索栏和一个列表视图。用户可以在搜索栏中输入文本，列表会动态更新以显示匹配的国家名称。

通过这种方式，你可以轻松地将 animation_search_bar 插件集成到你的 Flutter 应用中，并根据需要进行自定义和扩展。希望这篇帖子对你有所帮助！