CODEWITHSUNDEEP
flutterdartflutter-animation
giorgio79
giorgio79

Reputation: 4199

How to have a custom animation as a Flutter progress / loading indicator?

I am trying to replace the default CircularProgressIndicator with my own animation. I created a spinning widget based on the example here How to rotate an image using Flutter AnimationController and Transform? , but when replacing CircularProgressIndicator with "MyIconSpinner", for some reason it is not appearing. Any tips please? Here are the contents of MyIconSpinner

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

class MyIconSpinner extends StatefulWidget {
  MyIconSpinner({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyIconSpinnerState extends State<MyIconSpinner>
    with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(milliseconds: 5000),
      vsync: this,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _controller.forward();

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RotationTransition(
              turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
              child: Icon(
                Icons.star,
                size: 40,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

I am placing it in a widget like this

return Scaffold(
    appBar: AppBar(
      title: Text("Appbar"),
      backgroundColor: Colors.black,
      automaticallyImplyLeading: false,
    ),
    body: Center(
        child: Column(children: <Widget>[
        StreamBuilder(
            stream: doSomething(withSomeData),
            builder: (BuildContext context,
                AsyncSnapshot<List<DocumentSnapshot>> asyncSnapshot) {
             if (!asyncSnapshot.hasData) return MyIconSpinner();

Upvotes: 2

Views: 7003

Answers (1)

Thắng Mai
Thắng Mai

Reputation: 1061

I think you shouldn't wrap MyIconSpinner in Scaffold. You should give MyIconSpinner color parameter and also repeat animation after it is completed. Here is the edited version of MyIconSpinner.

class MyIconSpinner extends StatefulWidget {
  MyIconSpinner({Key key, this.title, this.color = Colors.blue}) : super(key: key);

  final String title;
  final Color color; 

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

class _MyIconSpinnerState extends State<MyIconSpinner>
    with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(milliseconds: 5000),
      vsync: this,
    );

    _controller.addListener((){
      if(_controller.isCompleted){
        _controller.repeat();
      }
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _controller.forward();
    return RotationTransition(
      turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
      child: Icon(
        Icons.star,
        size: 40,
        color: widget.color,
      ),
    );
  }
}

Upvotes: 2

Related Questions