开始时颤动显示对话框 - Dart

在Dart中，可以通过使用Flutter框架来创建具有动画效果的对话框。在本文中，我们将学习如何在应用程序开始时颤动显示对话框。

步骤

1. 首先，从Flutter框架导入所需的库。

import 'package:flutter/material.dart';
import 'dart:async';

2. 创建一个StatefulWidget类并重写其build()方法。此代码将返回一个带有按钮的MaterialApp。

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('开始时颤动显示对话框'),
        ),
        body: Center(
          child: RaisedButton(
            child: Text('显示对话框'),
            onPressed: () {
              _showDialog();
            },
          ),
        ),
      ),
    );
  }
}

3. 创建一个异步函数_showDialog()。在此函数中，创建一个AlertDialog，将其设置为开始时颤动并使用await Future.delayed方法进行延迟。最后，使用Navigator.pop(context)关闭对话框。

Future<void> _showDialog() async {
  await showDialog(
      context: context,
      builder: (BuildContext context) {
        return ShakeDialog();
      });
}

class ShakeDialog extends StatefulWidget {
  const ShakeDialog({Key key}) : super(key: key);

  @override
  _ShakeDialogState createState() => _ShakeDialogState();
}

class _ShakeDialogState extends State<ShakeDialog>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween(begin: Offset(0, 0), end: Offset(0, 0.06))
        .animate(CurvedAnimation(
            parent: _controller,
            curve: Curves.bounceOut,
            reverseCurve: Curves.bounceIn));
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: ModalRoute.of(context).animation,
      child: ScaleTransition(
        scale: _animation,
        child: AlertDialog(
          title: Text('颤动显示对话框'),
          content: Text('这是一个颤动的对话框。'),
          actions: <Widget>[
            FlatButton(
              child: Text('关闭'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

4. 最后，将MyApp类添加到main函数中。

void main() {
  runApp(MyApp());
}

结论

现在，当用户点击按钮时，将弹出一个颤动的对话框。稍后，对话框将自动关闭。您可以使用此技术来为用户提供一个有趣和交互性的开始体验。