Flutter Animation controller Invalid reference to 'this' expression

Question

I am using flutter spinkkit plugin issue is its showing an error on vsync this. Invalid reference to 'this' expression.

final spinkit = SpinKitSquareCircle( color: kPrimaryColor, size: 50.0, controller: AnimationController(vsync: this, duration: const Duration(milliseconds: 1200)), );

So somewhere I read that I need to place it inside init state

So if I place this in init state its showing the error Undefined name 'spinkit'. where I am using spinner.

Answer 1

for Invalid reference to 'this' expression. you have to add SingleTickerProviderStateMixin you can check it below.

class test extends StatefulWidget {
  @override
  _testState createState() => _testState();
}

class _testState extends State<test> with SingleTickerProviderStateMixin{

 @override
  void initState() {
    // TODO: implement initState
    super.initState();

    final spinkit = SpinKitSquareCircle(
      color: kPrimaryColor,
      size: 50.0,
      controller: AnimationController(
          vsync: this, duration: const Duration(milliseconds: 1200)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Answer 2

First, you have to extend your class with SingleTickerProviderStateMixin. This enables you to use AnimationController. And if you already extend a class with the above provider then you can try following answer. Make sure to make your spinkit variable late final as well.

You have to place that line inside initState method, as follow:

late final spinkit;

@override
  void initState() {
    super.initState();
    spinkit = SpinKitSquareCircle( color: kPrimaryColor, size: 50.0, controller: AnimationController(vsync: this, duration: const Duration(milliseconds: 1200)), );

}