如何在颤动中为容器设置动画边框答案

【问题标题】：How to animate border for a container in flutter如何在颤动中为容器设置动画边框
【发布时间】：2019-06-28 10:10:50
【问题描述】：

我想用颤动的发光效果为我的容器的边框设置动画，你知道吗？

【问题讨论】：

你试过了吗？帮助请求必须有一个minimal reproducible example，以便有人可以理解您的问题并找到解决方案
像这张图：images.app.goo.gl/kPeaW9a17qn2sboU9
边框应该在一段时间内改变alpha值，以产生发光效果。

【解决方案1】：

下面的代码将动画边框的宽度

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> with TickerProviderStateMixin {

  AnimationController _resizableController;

  AnimatedBuilder getContainer() {
    return new AnimatedBuilder(
        animation: _resizableController,
        builder: (context, child) {
          return Container(
            padding: EdgeInsets.all(24),
            child: Text("SAMPLE"),
            decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.all(Radius.circular(12)),
              border: Border.all(
                  color: Colors.blue, width: _resizableController.value * 10),
            ),
          );
        });
  }

  @override
  void initState() {
    _resizableController = new AnimationController(
      vsync: this,
      duration: new Duration(
        milliseconds: 1000,
      ),
    );
    _resizableController.addStatusListener((animationStatus) {
      switch (animationStatus) {
        case AnimationStatus.completed:
          _resizableController.reverse();
          break;
        case AnimationStatus.dismissed:
          _resizableController.forward();
          break;
        case AnimationStatus.forward:
          break;
        case AnimationStatus.reverse:
          break;
      }
    });
    _resizableController.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text("Test"),
          centerTitle: true,
        ),
        body: Center(child: getContainer()));
  }
}

【讨论】：

感谢您的回答，我只是想为颜色设置动画，有什么想法吗？
我只是给你一个想法，如何为 Container 的属性设置动画
让我试试别的
如果颜色像wooombo应用按钮一样循环或添加不同的颜色是可能的吗？

【解决方案2】：

感谢 Lakhwinder Singh，我编写了这段代码，它实现了我所要求的发光效果：

import 'package:flutter/material.dart';

void main()  {
  runApp(new Test());
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> with TickerProviderStateMixin {

  AnimationController _resizableController;

  static Color colorVariation(int note){
    if(note <= 1){
      return Colors.blue[50];
    }else if(note>1 && note<=2){
      return Colors.blue[100];
    }else if(note>2 && note<=3){
      return Colors.blue[200];
    }else if(note>3 && note<=4){
      return Colors.blue[300];
    }else if(note>4 && note<=5){
      return Colors.blue[400];
    }else if(note>5 && note<=6){
      return Colors.blue;
    }else if(note>6 && note<=7){
      return Colors.blue[600];
    }else if(note>7 && note<=8){
      return Colors.blue[700];
    }else if(note>8 && note<=9){
      return Colors.blue[800];
    }else if(note>9 && note<=10){
      return Colors.blue[900];
    }
  }

  AnimatedBuilder getContainer() {
    return new AnimatedBuilder(
        animation: _resizableController,
        builder: (context, child) {
          return Container(
            //color: colorVariation((_resizableController.value *100).round()),
            padding: EdgeInsets.all(24),
            child: Text("SAMPLE"),
            decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.all(Radius.circular(12)),
              border: Border.all(
                  color: colorVariation((_resizableController.value *10).round()), width:10),
            ),
          );
        });
  }

  @override
  void initState() {
    _resizableController = new AnimationController(
      vsync: this,
      duration: new Duration(
        milliseconds: 500,
      ),
    );
    _resizableController.addStatusListener((animationStatus) {
      switch (animationStatus) {
        case AnimationStatus.completed:
          _resizableController.reverse();
          break;
        case AnimationStatus.dismissed:
          _resizableController.forward();
          break;
        case AnimationStatus.forward:
          break;
        case AnimationStatus.reverse:
          break;
      }
    });
    _resizableController.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        backgroundColor: Colors.white,
        body: Center(child: getContainer())));
  }
}

【讨论】：

那些 if else if else... 可以替换为 Colors.blue.withOpacity(note / 10)
或者只是简单的 Color colorVariation(double note) { return Colors.blue.withOpacity(note); } 并在 Container 中： color: colorVariation(_resizableController.value),
您能否像 Lakhwinder Singh 在他的回答中发布的那样，将代码的输出动画发布在 GIF 文件中。

【解决方案3】：

如果您在您的应用程序中使用状态管理包，例如Get、Provider 等，您可以使用您可以提供的bool 收听AnimationContiner。

假设您有一个名为isEmptyError 的bool 变量，如下所示

final isEmptyError = false.obs;

Obx(
      () => AnimatedContainer(
        duration: const Duration(seconds: 1),
        curve: Curves.fastOutSlowIn,
        decoration: BoxDecoration(
          border: Border.all(
            color: Get.theme.primaryColor,
            width: 6,
            style: isEmptyError() ? BorderStyle.solid : BorderStyle.none,
          ),
        ),
        child: TextButton(
            style: ButtonStyle(overlayColor: MaterialStateColor.resolveWith((_) => Colors.transparent)),
            child: const Text('Press To Flash'),
            onPressed: () {
              isEmptyError(true);
              Future.delayed(const Duration(milliseconds: 300), () => isEmptyError(false));
              Future.delayed(const Duration(milliseconds: 600), () => isEmptyError(true));
              Future.delayed(const Duration(milliseconds: 900), () => isEmptyError(false));
            },
        ),
      ),
    ),

【讨论】：