Aleteo: botón parpadeante

Si te encuentras con alguna parte que te causa duda puedes comentarlo y te responderemos rápidamente.

Solución:

Puede lograr esto de una manera fácil usando AnimationController y FadeTransition widget, aquí tienes el código:

  class MyBlinkingButton extends StatefulWidget 
    @override
    _MyBlinkingButtonState createState() => _MyBlinkingButtonState();
  

  class _MyBlinkingButtonState extends State
      with SingleTickerProviderStateMixin 
    AnimationController _animationController;

    @override
    void initState() 
      _animationController =
          new AnimationController(vsync: this, duration: Duration(seconds: 1));
      _animationController.repeat(reverse: true);
      super.initState();
    

    @override
    Widget build(BuildContext context) 
      return FadeTransition(
        opacity: _animationController,
        child: MaterialButton(
          onPressed: () => null,
          child: Text("Text button"),
          color: Colors.green,
        ),
      );
    

    @override
    void dispose() 
      _animationController.dispose();
      super.dispose();
    
  

Uso:

main() 
  runApp(
    MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Material(
        child: Center(
          child: MyBlinkingButton(),
        ),
      ),
    ),
  );

Ejemplo de DartPad

Resultado:

También puede hacerlo con este enfoque. Mi lógica es un poco diferente, estoy usando alternativa para la animación. Una vez que la animación se completa hacia adelante, voy hacia atrás.

que es bueno para la vista

es decir:

adelante -> atrás

atrás -> adelante

y así

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      title: 'Wordpress App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new BlinkAnimation(),
    );
  


class BlinkAnimation extends StatefulWidget 
  @override
  _BlinkAnimationState createState() => _BlinkAnimationState();


class _BlinkAnimationState extends State
    with SingleTickerProviderStateMixin 
  Animation animation;
  AnimationController controller;

  initState() 
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 500), vsync: this);
    final CurvedAnimation curve =
        CurvedAnimation(parent: controller, curve: Curves.linear);
    animation =
        ColorTween(begin: Colors.white, end: Colors.blue).animate(curve);
    animation.addStatusListener((status) 
      if (status == AnimationStatus.completed) 
        controller.reverse();
       else if (status == AnimationStatus.dismissed) 
        controller.forward();
      
      setState(() );
    );
    controller.forward();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: new Text('Blink Animation'),
      ),
      body: new Center(
        child: AnimatedBuilder(
          animation: animation,
          builder: (BuildContext context, Widget child) 
            return new Container(
              child: new RaisedButton(
                color: animation.value,
                onPressed: () 
                  controller.forward();
                ,
                child: Text('Blink Animation'),
              ),
            );
          ,
        ),
      ),
    );
  

  dispose() 
    controller.dispose();
    super.dispose();
  

Puntuaciones y reseñas

Al final de todo puedes encontrar los comentarios de otros creadores, tú de igual manera puedes dejar el tuyo si te gusta.

---

---

Utiliza Nuestro Buscador