Create a blinking widget in Flutter

Blinking widget

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),

        body: Center(
          child: Transform.scale(
            scale: 10.0,

            child: BlinkWidget(
              children: <Widget>[
                Icon(Icons.notifications_active),
                Icon(Icons.notifications_active, color: Colors.transparent),
              ],
            ),

          ),
        ),

      ),
    );
  }
}

class BlinkWidget extends StatefulWidget {
  final List<Widget> children;
  final int interval;

  BlinkWidget({@required this.children, this.interval = 500, Key key}) : super(key: key);

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

class _BlinkWidgetState extends State<BlinkWidget> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  int _currentWidget = 0;

  initState() {
    super.initState();

    _controller = new AnimationController(
      duration: Duration(milliseconds: widget.interval),
      vsync: this
    );

    _controller.addStatusListener((status) {
      if(status == AnimationStatus.completed) {
        setState(() {
          if(++_currentWidget == widget.children.length) {
            _currentWidget = 0;
          }
        });

        _controller.forward(from: 0.0);
      }
    });

    _controller.forward();
  }

  dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: widget.children[_currentWidget],
    );
  }
}

Result:

To switch widgets with a bumpy transition

Modify the BlinkWidget properties from the pervious example:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),

        body: Center(
          child: Transform.scale(
            scale: 10.0,

            child: BlinkWidget(
              children: <Widget>[
                Icon(Icons.arrow_upward),
                Icon(Icons.arrow_forward),
                Icon(Icons.arrow_downward),
                Icon(Icons.arrow_back),
              ],
              interval: 1000,
            ),

          ),
        ),

      ),
    );
  }
}

Result:

blinkingblinking widgetFluttertutorial