Flutter

Question

我需要的：

点击搜索栏 => 动画搜索栏如图所示移动

我尝试过的：

目前，我正在使用 Navigator push，但效果并不如我所愿。很想知道是否有可能达到上面显示的预期效果以及如何做到这一点。谢谢！

在应用栏中：

InkWell(
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 10),
                  alignment: Alignment.centerLeft,
                  width: MediaQuery.of(context).size.width * 0.80,
                  height: 35,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(
                      Radius.circular(10),
                    ),
                    boxShadow: [
                      BoxShadow(
                          color: Colors.grey.withOpacity(0.5),
                          spreadRadius: 3,
                          blurRadius: 5)
                    ],
                  ),
                  child: Row(
                    children: [
                      Icon(Icons.search, size: 25, color: Colors.grey),
                      SizedBox(width: 5),
                      Text('Search for Food, Drinks, Items',
                          style: TextStyle(
                              color: Colors.black,
                              fontFamily: 'Poppins',
                              fontSize: 12))
                    ],
                  ),
                ),
                onTap: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(builder: (_) => SearchPage()),
                  );
                },
              )

SearchPage.dart

class SearchPage extends StatelessWidget {
  const SearchPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          foregroundColor: Colors.black,
          backgroundColor: Colors.white,
          // The search area here
          title: Container(
            width: double.infinity,
            height: 40,
            decoration: BoxDecoration(
                color: Colors.white, borderRadius: BorderRadius.circular(5)),
            child: Center(
              child: TextField(
                autofocus: true,
                decoration: InputDecoration(
                    prefixIcon: Icon(Icons.search, color: Colors.black),
                    suffixIcon: IconButton(
                      icon: Icon(Icons.clear, color: Colors.black),
                      onPressed: () {
                        /* Clear the search field */
                      },
                    ),
                    hintText: 'Search...',
                    border: InputBorder.none),
              ),
            ),
          )),
    );
  }
}

Answer 1

您可以使用 Hero animations 在屏幕之间制作这些动画。您需要做的是使用 Hero 小部件将两个屏幕上的搜索栏包裹起来，并为其添加一个唯一的 ID。

实现起来很简单，看flutter官方文档就可以了。

Answer 2

Flutter 有一个 class 调用 SearchDelegate。它是一个小部件，允许您在您的应用程序中实现具有这种效果的搜索功能。

你可以找到方法 here

Flutter - 如何创建这种动画搜索栏？

Flutter - How to create this kind of animated search bar?

dart

web

web-applications

flutter-animation