Flutter: The getter isn't defined for the type

Question

I am stuck at page routing.

Here is the code from main.dart

import 'package: test/routes/router.gr.dart';
import 'package:flutter/material.dart';
import 'package:test/splash_screen.dart';
import 'package:test/home_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          debugShowCheckedModeBanner: false,
          initialRoute: Router.homeScreenRoute,
          onGenerateRoute: Router.onGenerateRoute,
          navigatorKey: Router.navigatorKey,
        );
      }
    }

Here is the router.gr.dart file generated from auto-router.

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:auto_route/auto_route.dart';
import 'package:test/home_screen.dart';
import 'package:test/viewownprofile.dart';
import 'package:test/view_other_profile.dart';
abstract class Routes {
  static const homeScreenRoute = '/';
  static const viewownProfile = '/viewown-profile';
  static const viewotherProfile = '/viewother-profile';
  static const all = {
    homeScreenRoute,
    viewownProfile,
    viewotherProfile,
  };
}
class Router extends RouterBase {
  @override
  Set<String> get allRoutes => Routes.all;
  @Deprecated('call ExtendedNavigator.ofRouter<Router>() directly')
  static ExtendedNavigatorState get navigator =>
      ExtendedNavigator.ofRouter<Router>();
  @override
  Route<dynamic> onGenerateRoute(RouteSettings settings) {
    switch (settings.name) {
      case Routes.homeScreenRoute:
        return MaterialPageRoute<dynamic>(
          builder: (context) => HomeScreen(),
          settings: settings,
        );
      case Routes.viewownProfile:
        return MaterialPageRoute<dynamic>(
          builder: (context) => ViewOwnProfile(),
          settings: settings,
        );
      case Routes.viewotherProfile:
        return MaterialPageRoute<dynamic>(
          builder: (context) => ViewOtherProfile(),
          settings: settings,
        );
      default:
        return unknownRoutePage(settings.name);
    }
  }
}

Here is the code for Homescreen.dart.

import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar (title: Text('Home')),
        body: Center(
          child: Card(
            color: Colors.grey[300],
            elevation: 10.0,
            child: Container(
                height: 100.0,
                width: 100.0,
                alignment: Alignment.center,
                child: Text(
                  'Welcome Home!',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 20.0
                  ),
                )
            ),
          ),
        )
    );
  }
}

I am getting error in main.dart file. Below is the error.

The getter 'homeScreenRoute' isn't defined for the type 'Router'.
Try importing the library that defines 'homeScreenRoute', correcting the name to the name of an existing getter, or defining a getter or field named 'homeScreenRoute'.

Similar error for onGenerateRoute and navigatorKey.

Solution 1

In the newer version of flutter, it has a class already named "Router" so only you have to give a different name to your class "Routes".

and then user Routes.homeScreenRoute to your main.dart file.

Solution 2

it's true,

In the newer version of flutter, it has a class already named "Router" so only you have to give a different name to your class "Router" in the router.gr.dart file.

You can change the class name from "Router" to => "RouterAuto"

Solution 3

As you can see answers already given still i want to give little detailed code.

This is my working code prior to Flutter 2. As i haven't migrated to Flutter 2.

Rest all code will be the same only this file needs some modification.

Router.dart

import 'package:apppath/search.dart';
import 'package:apppath/settings.dart';
import 'package:apppath/login.dart';
@MaterialAutoRouter(
  routes: [
    // initial route is named "/"
    MaterialRoute(page: AnimatedSplashScreen, initial: true),
    MaterialRoute(page: Search),
    MaterialRoute(page: Settings),
    MaterialRoute(page: Login),
  ],
)
class $Router {}

MaterialRoute(page: Settings), - This Search value is basically from the dart file. My StatefulWidget name is Settings and same needs to add MaterialRoute(page: Settings), e.g

class Settings extends StatefulWidget {
  @override
  _SettingsState createState() => _SettingsState();
}
class _SettingsState extends State<Settings> {
other codes

How to use.

ExtendedNavigator.of(context).push(
    Routes.settings,
);