How to pass many parameters from one page to another in flutter

Question

...
onTap: () {
 Navigator.push(
     context,
     MaterialPageRoute(
      builder: (context) => CategoryPage(
              snapshot.data[index]),
     ));
},
...

Using the above code i try to pass the service id and the service type to the category page ... class CategoryPage extends StatefulWidget { // final String serviceId; // final String service_type; final String categorydata;

  CategoryPage(data, {key, this.categorydata}) : super(key: key);

  // @override
  // CategoryPage(categorydata) {
  //   this.serviceId = categorydata.serviceId;
  //   this.service_type = categorydata.serviceId;
  // }

  _CategoryPageState createState() =>
      _CategoryPageState(categorydata.toString());
 }

 class _CategoryPageState extends State<CategoryPage> {
  String id = "";
  _CategoryPageState(String categorydata) {
    this.id = categorydata.serviceId;
  }
...

From the above code, I need to get the service id and service type and display the tile of the Category page with the service type parameter. Please help me on achieving this result

score 1 · Accepted Answer · answered Jul 14 '21 at 07:01

You have to pass the data like this using the categorydata parameter from CategoryPage constructor.

onTap: () {
 Navigator.push(
     context,
     MaterialPageRoute(
      builder: (context) => CategoryPage(
             categorydata: snapshot.data[index]),
     ));
},

Here you need to define a final variable inside your StatefulWidget class and initialize it from the constructor;

CategoryPage({key,required this.categorydata}) : super(key: key);

final Album categorydata;

_CategoryPageState createState() =>
    _CategoryPageState();
}

Then you can access it from the State class methods using widget keyword class, you don't need to pass it.

 class _CategoryPageState extends State<CategoryPage> {


   @override
  void initState() {
    super.initState();
    // access them from here

   final categorydata = widget.categorydata;
   final String serviceId = categorydata.service_id;
   final String service_type = categorydata. service_type;

  }

  @override
  Widget build(BuildContext context) {
    // access them from here
    final categorydata = widget.categorydata;
    final String serviceId = categorydata.service_id;
    final String service_type = categorydata. service_type;
   }

  }

Hemanth Kumar · Answer 2 · 2021-07-14T07:05:01.347

import 'package:flutter/material.dart';

class CategoryPage extends StatefulWidget {
  final String serviceId;
  final String service_type;
  final categorydata;
  CategoryPage(
      {Key? key,
      required this.serviceId,
      required this.service_type,
      required this.categorydata})
      : super(key: key);

  @override
  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  @override
  void initState() {
    print(widget.service_type);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: null,
    );
  }
}

u can access those variables directly by widget.varname

Jinsub Kim · Answer 3 · 2021-07-14T07:05:46.050

First of all, if you want to get 2 parameters in Category Widget, you should pass 2 arguments from your previous page. (And I highly recommend using class. If the items you want to pass together are related to each other or can be tied by some criteria, make a new class. You instantiate this class, and you can pass and get it. It's more comfortable and readable to use. But maybe later. It takes time to get used to it.)

...
onTap: () {
 Navigator.push(
     context,
     MaterialPageRoute(
      builder: (context) => CategoryPage(
              snapshot.date[index].id,
              snapshot.data[index].service_type),
              // snapshot.data[index] ----- replaced with two lines above),
     ));
},
...

And you need to define serviceId and serviceType variables to get the argument passed before.

class CategoryPage extends StatefulWidget {
  final String serviceId;
  final String serviceType;
   
  CategoryPage(this.serviceId, this.serviceType);

Then you can use your serviceId and serviceType like:

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('ID: ${widget.serviceId}'), // widget. needs to be followed by serviceId
    );
  }
}

Or you can define a new variable and put 'serviceId' into it.

class _CategoryPageState extends State<CategoryPage> {
 var id = widget.serviceId;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('ID: ${id}'), // 
    );
  }
}

How to pass many parameters from one page to another in flutter

3 Answers3