Flutter Navigation, Required Argument, Separate Routes File, How to Properly Code

Question

So I'm following a tutorial and jumped ahead of myself but would really like to get this working. I've moved the navigation into a 'routes_constants.dart' and 'routes.dart'. The constants if fine. The routes is where I've run into an issue. After spending hours trying to locate and learn myself I'm asking for help.

I have a 'FoodScreen' with 'final Category category'. The issue is calling the required category in the routes.dart switch/case/default code.

I've placed the code from routes.dart below. For those of you who know this 'stuff' I'm sure it is simple... and soon I hope it will be for me also. Thank you in advance for any assistance you could provide.

This is the error/help messages. I've tried and tried but haven't been able to conquer this! Message Start: (new) FoodScreen FoodScreen( Set set, { required Category category, Object? argument, }) package:myapp/models/food_screen.dart

The named parameter 'category' is required, but there's no corresponding argument. Try adding the required argument. Message End.

routes.dart code below:

import 'package:flutter/material.dart';
import 'package:myapp/models/category.dart';
import 'package:myapp/models/category_screen.dart';
import 'package:myapp/models/category_item.dart';
import 'package:myapp/models/food_screen.dart';
import 'package:myapp/routes/route_constants.dart';

Route<dynamic> generateRoute(RouteSettings routeSettings) {
  // Getting arguments passed in while calling Navigator
  final args = routeSettings.arguments;

  switch (routeSettings.name) {
    case RouteNames.CategoryScreenRoute:
      return MaterialPageRoute(builder: (context) => CategoryScreen());
    case RouteNames.FoodScreenRoute:
      return MaterialPageRoute(builder: (context) => FoodScreen(??? THIS NEEDS FIX ???));
    default:
      return MaterialPageRoute(builder: (context) => CategoryScreen());
  }
}

FoodScreen.dart code below:

import 'package:flutter/material.dart';
import 'package:myapp/models/category.dart';

class FoodScreen extends StatelessWidget {
  final Category category;
  FoodScreen(
    Set set, {
    required this.category,
    Object? argument,
  });
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text('${category.content}'),
      ),
      body: Center(
          child: Text(
          'Category: ${category.content}',
          style: TextStyle(fontSize: 24),
          ),
          ),
    );
  }
}

Solution

I'm pretty new to Flutter as well, but I believe if the goal is to pass a category to your FoodScreen when you call it using Navigator, you can do the following:

routes.dart:

...
case RouteNames.FoodScreenRoute:
      return MaterialPageRoute(builder: (context) => FoodScreen(
          category: ModalRoute.of(context)!.settings.arguments as Category
      ));
...

FoodScreen.dart:

import 'package:flutter/material.dart';
import 'category.dart';

class FoodScreen extends StatelessWidget {
  final Category category;

  const FoodScreen({
    Key? key,
    required this.category,
  }) : super(key: key); // I believe its best to give widgets keys

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text('${category.content}'),
      ),
      body: Center(
        child: Text(
          'Category: ${category.content}',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

Then I think you'll be able to call your FoodScreen using

Navigator.pushNamed(context, RouteNames.FoodScreenRoute,
                    arguments: category); //where this category has been declared earlier
              };

I can't actually test this until I get home, but let me know if it works.

Comments

[rickimaru]

Try reading this.

[WillWalsh]

I truly appreciate the help. Sorry for delay was unable to test your code until this morning. Still having issue, almost same issue, where the routes.dart case/return never seems to have a "connection" to the lowercase 'category' argument.

[WillWalsh]

I'm going over to github to look from some flutter/routes/argument code. Thanks again... I'll keep trying :(