Animation controller vsync not recognizing 'this' as valid expression

Question

trying to implement a loading animation upon filling out a TextFormField in dart. when declaring an AnimationController, my declaration does not recognize 'this'.

Every documentation I find uses 'this' as the vsync and for some reason mine will not recognize it.

class _SettingsScreenState extends State<SettingsScreen> with SingleTickerProviderStateMixin {
final _animationController = AnimationController(vsync: this, duration: Duration(seconds: 1));

...

ListTile(
                  title: new TextFormField(
                    controller: _serverController,
                    keyboardType: TextInputType.emailAddress,
                    style: TextStyle(
                        color: darkGray,
                        fontSize: 18,
                        fontWeight: FontWeight.w500,
                        fontFamily: mainFontFamily
                    ),
                    onFieldSubmitted: _handleSubmitted,
                    autocorrect: false,
                    decoration: new InputDecoration(
                      icon: AnimatedIcon(icon: AnimatedIcons.search_ellipsis, progress: _animationController, color: darkGray,), /*TODO get this to actually show up and animate while checking server*/
                      contentPadding: EdgeInsets.symmetric(
                          vertical: 12, horizontal: 12),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                    ),
                  ),
                ),

flutter doctor -v output

[√] Flutter (Channel stable, v1.2.1, on Microsoft Windows [Version 10.0.17763.475], locale en-US)
    • Flutter version 1.2.1 at C:\flutter
    • Framework revision 8661d8aecd (3 months ago), 2019-02-14 19:19:53 -0800
    • Engine revision 3757390fa4
    • Dart version 2.1.2 (build 2.1.2-dev.0.0 0a7dcf17eb)

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at C:\Users\amehta\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[√] Android Studio (version 3.4)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 35.3.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

[!] VS Code, 64-bit edition (version 1.21.0)
    • VS Code at C:\Program Files\Microsoft VS Code
    X Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (1 available)
    • GT N7100 • 4d00db7fb27a90e9 • android-arm • Android 4.4.2 (API 19)

! Doctor found issues in 2 categories.

I expect the icon to show up and once I submit in the TextFormField, it will run the animation until the server check has completed

Answer 1

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

@override
  void initState() {
    super.initState();
    _controller = AnimationController(duration: expandDuration, vsync: this);
}

Hope this help.