Create a blinking widget in Flutter

3,019 4

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:

4 Replies to “Create a blinking widget in Flutter”

  1. Thanks for the example! I think there is a small bug.

    class _BlinkWidgetState extends State with SingleTickerProviderStateMixin {
    should be:

    class _BlinkWidgetState extends State with SingleTickerProviderStateMixin {

    Thanks for this example, it helped me a lot!

    1. Ahh I think your website is scrubbing html tags… class _BlinkWidgetState extends State<BlinkWidget> with SingleTickerProviderStateMixin {

發佈回覆給「Jeff McMorris」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料