Flutter extension-methods not working, it says "undefined class" and "requires the extension-methods language feature"

Question

I'm slowly building my personal website over at dlblack.dev, and I'm trying to spice it up a little bit. For example, from a computer (rather than a tablet or phone since they don't have mouse pointers), if you hover over any of the clickable items, it doesn't change your mouse pointer to indicate it's clickable, and the clickable object doesn't change at all. I've decided to follow this FilledStacks tutorial, but it doesn't mention anything about fixing this problem.

Essentially what's happening is when I get ~2.5 mins through the tutorial video (where he writes the skeleton extension class) and try to duplicate it, VS Code redlines almost the entire class declaration aside from the name. What I'm writing is the exact same thing as what he has on screen at 2:26, and here's my code:

import 'package:flutter/material.dart';
import 'dart:html' as html;

extension HoverExtension on Widget{
  
}

"extension", "on", and "Widget" are all redlined when I do this. When I hover over "extension", it says the following:

Undefined class 'extension'.
Try changing the name to the name of an existing class, or creating a class with the name 'extension'. dartundefined_class
This requires the 'extension-methods' language feature to be enabled.
Try updating your pubspec.yaml to set the minimum SDK constraint to 2.6 or higher, and running 'pub get'. dart(experiment_not_enabled)

The first thing I did was change my minimum SDK constraint to 2.6.0 in my pubspec.yaml file. I then changed it to 2.7.0 because a lot of people online say extensions were released in Dart 2.7. I've done a lot of Googling on the subject but no one seems to have the same problem as me: I have no analysis_options.yaml file. I created one, and put only this in its contents:

include:

analyzer:
  enable-experiment:
    - extension-methods

linter:

In theory, I believe that should fix my problem once I run flutter pub get from the command line in my root folder; it doesn't. I have no idea what's wrong. Any suggestions?

Solution 1

For the changes in pubspec.yaml and analysis_options.yaml to take place, you have to restart the Dart Analysis Server. In VSCode, that's as simple as Ctrl+Shift+P -> Reload Window.

Solution 2

In Android Studio solving this problem requires three steps:

1. Update SDK version in pubspec.yaml (must be 2.6.0 or higher)

    environment:
      sdk: ">=2.7.0 <3.0.0"
   

2. Tools -> Flutter -> Flutter Clean

3. Close project and reopen it (eg. File -> Close project)

Solution 3

I had to do flutter clean, then close and re-open VSCode.

Comments

[Juan Antonio Tubío]

Thank you very much. That's solved my problems in VSCode.

[Shady Mohamed Sherif]

I did everything but closing the project :D Thanks, it works now