我正在两种状态之间切换。一个是默认应用程序栏,另一个是搜索应用程序栏。我要问的是,我怎样才能使过渡平滑,因为此刻,它会立即从一种状态跳到另一种状态,并且看起来很破坏性。这是我的代码:
@override
Widget build(BuildContext context) {
var appBar;
if(isSearching){
appBar = AppBar(
title: Text("SEARCH"),
leading: IconButton(
onPressed: (){
stopSearch();
},
icon: Icon(Icons.arrow_back),
),
);
}else{
appBar = AppBar(
title: Text(widget.title),
actions: <Widget>[
IconButton(
onPressed: (){
startSearch();
},
icon: Icon(Icons.search, color: Colors.white,),
),
],
);
}
return Scaffold(
appBar: appBar,
body: ListView(
children: <Widget>[
Text("PETER"),
Text("PETER"),
Text("PETER"),
Text("PETER"),
],
),
);
}
我希望它像在Material design文档中一样:https://material.io/design/navigation/search.html#expandable-search
答案 0 :(得分:2)
您可以使用AnimatedCrossFade
在两个小部件之间创建淡入淡出的动画
AppBar(
title: AnimatedCrossFade(
duration: Duration(milliseconds: 250),
firstChild: Text("Title"),
secondChild: TextField(),
alignment: Alignment.centerLeft,
layoutBuilder: (w1, _, w2, __) {
return Container(
height: 43.0,
width: double.infinity,
child: Stack(
alignment: Alignment.centerLeft,
children: <Widget>[w1, w2],
),
);
},
crossFadeState:
!searching ? CrossFadeState.showSecond : CrossFadeState.showFirst,
),
)