我們時常要變更介面，希望有平滑的轉場效果，此時可以使用 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 秒，看著看著，就被療癒了。🤠
參考：
逍遙文工作室 
隨意留個言吧：）～