我正在開發一個移動應用程式，我想通過一些很酷的對話框影片來改善用戶體驗，我不想只使用一個簡單的彈出對話框。
基本上我想要的結果是這樣的：
我在網上搜索，發現了一個類似的問題：
我不知道如何重現容器中的東西。也許在正確的影片（第一張圖片）中，他們放置了一個不可見的小對話框，一旦按下按鈕，它就會與影片一起出現？
我應該在哪里輸入框對話框的資訊？
這是我使用的代碼：
Stack(
children: [
Positioned(
child: GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(10, 10),
),
),
),
Positioned(
child: Container(
height: 100,
width: w,
color: Colors.white,
),
),
Positioned(
child: Padding(
padding: const EdgeInsets.only(top: 50),
child: Align(
alignment: Alignment.topCenter,
child: GestureDetector(
child: AnimatedContainer(
height: _h,
width: _w,
color: Colors.lightGreen,
duration: Duration(seconds: 1),
child: Center(
child: Text(
'Title',
),
),
),
onTap: () {
setState(() {
_h = 200;
_w = w * 0.9;
});
},
),
),
),
),
],
),
uj5u.com熱心網友回復：
我建議你使用官方影片包https://pub.dev/packages/animations 中的容器變換過渡模式
預覽：https : //github.com/flutter/packages/raw/master/packages/animations/example/demo_gifs/container_transform_lineup.gif
uj5u.com熱心網友回復：
使用ScaleTransition上showDialog的builder能有類似的效果。
在builder將回傳StatefulWidget
@override
Widget build(BuildContext context) {
return ScaleTransition(
scale: animation,
alignment: Alignment.topLeft, // use different alignment
child: const AlertDialog(
backgroundColor: Colors.cyanAccent,
title: Text("title"),
),
);
}
它會像這樣使用
showDialog(
context: context,
builder: (context) => CustomAlertDialog(),
);
測驗小部件：
class CustomAlertDialog extends StatefulWidget {
const CustomAlertDialog({Key? key}) : super(key: key);
@override
_CustomAlertDialogState createState() => _CustomAlertDialogState();
}
class _CustomAlertDialogState extends State<CustomAlertDialog>
with SingleTickerProviderStateMixin {
late AnimationController controller;
late Animation<double> animation;
@override
void initState() {
super.initState();
_initScaleAnimation();
}
_initScaleAnimation() {
controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
)..addListener(() => setState(() {}));
animation = Tween<double>(begin: 0, end: 1.0).animate(controller);
controller.forward();
}
@override
Widget build(BuildContext context) {
return ScaleTransition(
scale: animation,
alignment: Alignment.topLeft, // use different alignment
child: const AlertDialog(
backgroundColor: Colors.cyanAccent,
title: Text("title"),
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/407081.html
標籤：