Why is $AppRouter red underlined

Question

Setting up a flutter project my app_router.dart file contains

@AutoRouterConfig(replaceInRouteName: 'Screen,Route')
class AppRouter extends $AppRouter {
 @override
 List<AutoRoute> get routes => <AutoRoute>[
 AutoRoute(page: DiscoverRoute.page, initial: true),
 ];
}

But $AppRouter is still red underlined after running dart run build_runner build --delete-conflicting-outputs

I have done the steps VS Code: Ctrl+Shift+P → "Dart: Restart Analysis Server"

Error below: lib/app/router/app_router.dart:18:25: Error: Type '$AppRouter' not found. class AppRouter extends $AppRouter { ^^^^^^^^^^ lib/main.dart:22:33: Error: The method 'delegate' isn't defined for the type 'AppRouter'.

• 'AppRouter' is from 'package:sumo/app/router/app_router.dart' ('lib/app/router/app_router.dart'). Try correcting the name to the name of an existing method, or defining a method named 'delegate'. routerDelegate: appRouter.delegate(), ^^^^^^^^ lib/main.dart:23:41: Error: The method 'defaultRouteParser' isn't defined for the type 'AppRouter'.
• 'AppRouter' is from 'package:sumo/app/router/app_router.dart' ('lib/app/router/app_router.dart'). Try correcting the name to the name of an existing method, or defining a method named 'defaultRouteParser'. routeInformationParser: appRouter.defaultRouteParser(),

• DevQt: Have you tried to remove "$" symbol from extends $AppRouter {...}?

Answer 1

Because auto_route migrated to a new syntax.

@AutoRouterConfig()
class AppRouter extends RootStackRouter {
 AppRouter() : super(); 
 
@override
 List<AutoRoute> get routes {
 return ...
 }
}

Find the doc: https://pub.dev/packages/auto_route#setup-and-usage