Flutter-如何创建这种动画搜索栏？
我需要的：
单击搜索栏=＆gt;动画搜索栏的移动如图所示
：
当前，我正在使用导航器推送，但是效果并不是我希望它的光滑。很想找出是否有可能达到上面显示的预期效果以及如何做到。谢谢！
在Appbar：
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()),
);
},
)
searchapage.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),
),
),
)),
);
}
}
What I need:
Click on to the searchbar => Animated searchbar moves as shown
What I have tried:
Currently, I am using Navigator push but the effect isn't sleek as how I would want it to be. Would love to find out if it is possible to achieve the intended effect shown above and how to do it. Thanks!
In the AppBar:
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),
),
),
)),
);
}
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以使用英雄动画在屏幕之间进行这些动画。您需要做的是用
Hero小部件在两个屏幕上包装搜索栏，并在其上添加唯一的ID。只需阅读官方的扑面文档即可实施。
You can use Hero animations to do these animations between screens. What you need to do is to wrap the Search bar on both the screens with the
Herowidget and add a unique id to it.It is easy to implement, just read the official flutter documentation.
Flutter有一个类调用 searchdelegate 。这是一个小部件，可让您在应用中以这种效果实现搜索功能。
您可以找到方法在这里
Flutter has a class call SearchDelegate. It's a widget that allows you to implement the search functionnality in your app with this kind of effect.
You can find how to it here