在文本按钮周围颤动边框 - Dart

在 Dart 中，我们可以使用动画实现在文本按钮周围颤动边框的效果。本文将详细介绍如何实现该效果。

我们首先需要导入以下包：

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

然后，我们可以定义一个 StatefulWidget 并创建一个 AnimationController：

class TrembleButton extends StatefulWidget {
  @override
  _TrembleButtonState createState() => _TrembleButtonState();
}

class _TrembleButtonState extends State<TrembleButton>
    with SingleTickerProviderStateMixin {
  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 Container();
  }
}

现在我们需要在 build 方法中创建按钮，并为按钮添加文本。

Widget build(BuildContext context) {
  return ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
      padding: const EdgeInsets.all(16.0),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16.0),
        side: BorderSide(
          color: Colors.black,
          width: 4.0,
        ),
      ),
    ),
    child: Text(
      "Button",
      style: TextStyle(fontSize: 24.0),
    ),
  );
}

接下来，我们可以使用动画为按钮添加颤动效果。我们将创建一个 TweenSequence，并在其中添加三个 Tween：第一个 Tween 将颜色从黑色转换为红色，第二个 Tween 将颜色从红色转换为黄色，第三个 Tween 将颜色从黄色再次转换为黑色。

final _tweenSequence = TweenSequence([
  TweenSequenceItem(tween: Tween(begin: Colors.black, end: Colors.red), weight: 1),
  TweenSequenceItem(tween: Tween(begin: Colors.red, end: Colors.yellow), weight: 1),
  TweenSequenceItem(tween: Tween(begin: Colors.yellow, end: Colors.black), weight: 1),
]);

然后我们可以创建一个 Animation 并在 onPressed 方法中控制动画：

final _animation = _tweenSequence.animate(CurvedAnimation(
  parent: _controller,
  curve: Curves.easeInOut,
));

ElevatedButton(
  onPressed: () {
    _controller
      ..reset()
      ..forward();
  },
  style: ElevatedButton.styleFrom(
    padding: const EdgeInsets.all(16.0),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16.0),
      side: BorderSide(
        color: _animation.value,
        width: 4.0,
      ),
    ),
  ),
  child: Text(
    "Button",
    style: TextStyle(fontSize: 24.0),
  ),
);

现在您的文本按钮周围将展示一个颤动边框的效果！

希望这篇文章能帮助你学习在Dart中实现在文本按钮周围颤动边框的方法。