Passing multiple arguments to named routes with flutter

Question

I am trying to use named routes with multiple named arguments as the example below , and the problem is if I want to pass more than one argument to a screen so I need to define a custom class with these arguments . let's say I have 10 screens to navigate so it makes sense to define 10 custom classes with it's arguments ?

    import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: (settings) {
        if (settings.name == FirstScreen.routeName) {
        
          final args = settings.arguments as FirstScreenArguments;

          return MaterialPageRoute(
            builder: (context) {
              return FirstScreen(
                title: args.title,
                message: args.message,
              );
            },
          );
        } else if (settings.name == HomeScreen.routeName)
          return MaterialPageRoute(
            builder: (context) {
              return HomeScreen();
            },
          );
        assert(false, 'Need to implement ${settings.name}');
        return null;
      },
      title: 'Navigation with named arguments',
      initialRoute: HomeScreen.routeName,
    );
  }
}

class HomeScreen extends StatelessWidget {
  HomeScreen({Key? key}) : super(key: key);

  static const routeName = '/';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(
              context,
              FirstScreen.routeName,
              arguments: FirstScreenArguments(
                title: 'Welcome',
                message: "Coming from home screen ",
              ),
            );
          },
          child: const Text('Navigate to first screen'),
        ),
      ),
    );
  }
}

class FirstScreen extends StatelessWidget {
  final String title;
  final String message;

  const FirstScreen({Key? key, required this.title, required this.message})
      : super(key: key);

  static const routeName = '/firstScreen';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(title),
            Text(message),
          ],
        ),
      ),
    );
  }
}

class FirstScreenArguments {
  final String title;
  final String message;

  FirstScreenArguments({required this.title, required this.message});
}

Solution

The standard way is to define related class for each page, however you can create a JSON string on each page and pass it to another. for example, first define it in page 1:

String temp = json.encode({
par1:"test",
par2:"test2" // and so on
});

then pass it to another page:

Navigator.pushNamed(
              context,
              FirstScreen.routeName,
              arguments: temp
            );

then decode it on another page:

Map<String, dynamic> data = json.decode(temp);

Comments

[Omar Abdelazeem]

how can I pass named argument as an array element ? @t00n

[Omar Abdelazeem]

I don't need to use FirstScreenArguments class , I need to replace it with another solution @t00n

[t00n]

I used it as an example you can remove it totally from the arguments array Navigator.pushNamed( context, FirstScreen.routeName, arguments: [data1, data2, data3,....], )

[Abbasihsn]

@OmarAbdelazeem check my answer and let me know the result...

[Omar Abdelazeem]

element in the array doesn't have names like named arguments , what if element[0] is a String and element [1] is also a string , there will be a conflict . @t00n

[Omar Abdelazeem]

Ok @Abbasihsn ..

[pskink]

"and the problem is if I want to pass more than one argument to a screen so I need to define a custom class with these arguments" - pass a Map then

[t00n]

And what if the array does not have named arguments? Just get the element by index, if you want to access them by something similar a named argument do as @pskink suggested

[t00n]

You can pass an array of arguments to the named routed

[t00n]

Navigator.pushNamed( context, FirstScreen.routeName, arguments: [FirstScreenArguments( title: 'Welcome', message: "Coming from home screen ", ), someOtherData, someOtherData2,....], ); Just use [] In settings.arguments you will receive and array and therefore, you can access to the elements on it by index.

[pskink]

and why not to pass a Map directly?