I am trying to create a flutter app, and I am trying to test out the routing methods to link my home page to different screens.

I have a button on my initial screen that is supposed to open another page, but for some reason the page isn't seem to opening.

The error I encounter is this:

════════ Exception caught by gesture ═══════════════════════════════════════════

Could not find a generator for route RouteSettings("/about", null) in the _WidgetsAppState. ════════════════════════════════════════════════════════════════════════════════

This is my route.dart file:

import 'package:quizapp/about/about.dart';
import 'package:quizapp/home/home.dart';
import 'package:quizapp/login/login.dart';
import 'package:quizapp/topic/topic.dart';
import 'package:quizapp/profile/profile.dart';

var appRoutes = {
  '/': (context) => const HomeScreen(),
  'about': (context) => const AboutScreen(),
  'login': (context) => const LoginScreen(),
  'topic': (context) => const TopicScreen(),
  'profile': (context) => const ProfileScreen()
};

This is my main.dart file:

import 'package:flutter/material.dart';

import 'package:firebase_core/firebase_core.dart';
import 'package:quizapp/routes.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const App());
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {

  final Future<FirebaseApp> _initialization = Firebase.initializeApp();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      // Initialize FlutterFire:
      future: _initialization,
      builder: (context, snapshot) {
        // Check for errors
        if (snapshot.hasError) {
          return const Text('error');
        }

        // Once complete, show your application
        if (snapshot.connectionState == ConnectionState.done) {
          print('Success');
          return MaterialApp(
            routes: appRoutes,
          );
        }

        // Otherwise, show something whilst waiting for initialization to complete
        return const Text('Error');
      },
    );
  }
}

This is the home.dart file:

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
      ),
      body: ElevatedButton(
        onPressed: () => Navigator.pushNamed(context, '/about'),
        child: const Text('About Page'),
      ),
    );
  }
}

And the about.dart file:
import 'package:flutter/material.dart';

class AboutScreen extends StatelessWidget {
  const AboutScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('About Screen'),
      ),
      body: const Center(
          child: SizedBox(
        child: Text('About Content'),
      )),
    );
  }
}

The Widget Tree layout for reference.

Any input/help would be highly appreciated, thanks.

CodePudding user response：

You have given wrong name of 'about' route

onPressed: () => Navigator.pushNamed(context, '/about'),

var appRoutes = {
'/': (context) => const HomeScreen(),
'about': (context) => const AboutScreen(),-------> change to '/about'
'login': (context) => const LoginScreen(),
'topic': (context) => const TopicScreen(),
'profile': (context) => const ProfileScreen()
};

CodePudding user response：

The route name you are passing to Navigator.pushNamed does not match defined routes, as it has an extra slash, so you have to change

onPressed: () => Navigator.pushNamed(context, '/about'),

to

onPressed: () => Navigator.pushNamed(context, 'about'),

It's good to have root names as variables, because you will use them in many places, and this kind of error happens often. So, create a new file and put all route names there. For example,

const String routeToHome = '/';
const String routeToAbout = 'about';
const String routeToProfile = 'profile';
const String routeToLogin = 'login';
const String routeToTopic = 'topic';

Then, change your appRoutes to

var appRoutes = {
  routeToHome: (context) => const HomeScreen(),
  routeToAbout: (context) => const AboutScreen(),
  routeToLogin: (context) => const LoginScreen(),
  routeToTopic: (context) => const TopicScreen(),
  routeToProfile: (context) => const ProfileScreen()
};

and onPressed function to

onPressed: () => Navigator.pushNamed(context, routeToAbout),