颤振关闭对话框 - Dart

在Dart中，我们经常需要在程序中弹出对话框，让用户作出选择或者展示一些信息。在一些情况下，用户可能误触关闭按钮，这种情况下，我们可以通过颤振关闭效果提醒用户再次确认关闭操作。

实现步骤

1. 首先，我们需要引入flutter/animation.dart包来处理动画效果。

import 'package:flutter/animation.dart';

2. 创建一个StatefulWidget并实现State类，创建一个AnimationController并指定动画时长。

class MyDialog extends StatefulWidget {
  @override
  _MyDialogState createState() => _MyDialogState();
}

class _MyDialogState extends State<MyDialog> with TickerProviderStateMixin {

  AnimationController _controller;
  
  @override
  void initState() {
    super.initState();
  
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500), //动画时长为500毫秒
      vsync: this, //需要显式指定TickerProviderStateMixin
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('My Dialog'),
    );
  }
}

3. 添加GestureDetector来处理颤振效果，当用户单击时通过_controller.forward()来启动动画，当动画完成后关闭对话框。

GestureDetector(
  onTap: () async {
    await _controller.forward(); //颤振效果动画
    Navigator.of(context).pop(); //关闭对话框
  },
  child: Container(
    child: Text('CLOSE'),
  ),
)

4. 在对话框关闭时，我们需要释放AnimationController。

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

完整代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return MyDialog();
              },
            );
          },
          child: Text('SHOW DIALOG'),
        ),
      ),
    );
  }
}

class MyDialog extends StatefulWidget {
  @override
  _MyDialogState createState() => _MyDialogState();
}

class _MyDialogState extends State<MyDialog> with TickerProviderStateMixin {

  AnimationController _controller;

  @override
  void initState() {
    super.initState();
  
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: Container(
        child: GestureDetector(
          onTap: () async {
            await _controller.forward();
            Navigator.of(context).pop();
          },
          child: Container(
            child: Text('CLOSE'),
          ),
        ),
      ),
    );
  }
}

效果预览

现在，我们已经完成了使用颤振效果关闭对话框的功能，希望对大家有所帮助！