我們時常要變更介面,希望有平滑的轉場效果,此時可以使用 AnimatedContainer Widget。
過去我們都會使用 Container,現在只要將它替換為 AnimatedContainer Widget,即可做出華麗的漸變過程。

此為最初的狀態。
來看一下程式碼可以怎麼寫:
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool selected = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
selected = !selected;
});
},
child: Center(
child: AnimatedContainer(
decoration: BoxDecoration(
color: selected ? Colors.yellow : Colors.green,
borderRadius: BorderRadius.all(
Radius.circular(12.0),
),
boxShadow: [
BoxShadow(
color: Colors.blue,
offset: Offset(selected ? 10 : 5, selected ? 5 : -10),
),
],
),
width: selected ? 200.0 : 100.0,
height: selected ? 100.0 : 200.0,
alignment:
selected ? Alignment.center : AlignmentDirectional.topCenter,
duration: Duration(seconds: 2),
curve: Curves.fastOutSlowIn,
child: FlutterLogo(size: selected ? 75 : 150),
),
),
);
}
}
我使用 GestureDetector 來接收點擊,藉此變化兩種介面的設定。
由程式碼所見,在 AnimatedContainer 裡有子 Widget,也都會跟著變化呢~

直接跑程式碼,來持續點擊來看漸變過程,期間設定為 2 秒,看著看著,就被療癒了。🤠
參考:
隨意留個言吧:)~