Omar
0
Q:

flutter font awesome spin

//At this moment, this package only provides the Icons, but those Icons do not spin or animate by themselves. Use flutter's animation capabilities to spin it. Here is example widget from Brian Egan.

import 'package:flutter/cupertino.dart';
import 'package:smartinspector/core/manipulation/icon-mapping.dart';

class IconSpinner extends StatefulWidget {
  final IconData icon;

  final Duration duration;
  final bool isSpinning;

  const IconSpinner({
    Key key,
    @required this.icon,
    this.duration = const Duration(milliseconds: 1800),
    this.isSpinning = false,
  }) : super(key: key);

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

class _IconSpinnerState extends State<IconSpinner> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Widget _child;

  @override
  void initState() {
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 2000),
    );
    _child = Icon(widget.icon);

    super.initState();
  }

  stopRotation() {
    _controller.stop();
  }

  startRotation() {
    _controller.repeat();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    widget.isSpinning ? startRotation() : stopRotation();

    return RotationTransition(
      turns: _controller,
      child: _child,
    );
  }
}


// Usage

Spinner(
  icon: FontAwesomeIcons.spinner,
  isSpinning: true,  // change it to true or false
)
1

Tags

New to Communities?

Join the community