widget.something in stateful widget

Question

import 'package:duck/MoreAboutProduct.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CategoryComponents extends StatelessWidget {
  final String NAME;
 CategoryComponents(
  this.NAME);

    @override
  Widget build(BuildContext context) {
    return Column(
     children:[
       Text($NAME),
       RaisedButton( 
child : Text(More Info),

onPressed:(){

Navigator.of(context).push(MaterialPageRoute(builder: (context) {
    return MoreAboutProduct(
    NAMEp: NAME,

}
    ),
    ],);

I have this class named CategoryComponents, it has only 1 variable in this example 'NAME', and other classes named Samsung and MoreAboutProduct, I will add the code of others in the following lines, I wanted to call CategoryComponents class in Samsung and pass the value of NAME and other values (not showing other values in this example for simplicity),I wanted to show the value of NAME in Samsung class and their will be a bottom in CategoryComponents class which transfer me to MoreAboutProduct class and show more info about the product but some data has to be for first product only that's why i need connection between Samsung and MoreAboutProduct, I found a way to do it but i really have some issues understanding the code specially the Navigator part and how does a variable in CategoryComponents that is passed in the constructor's parameter in Samsung class can be accessed in MoreAboutProduct class? and the widget.NAME part, I know it's pretty long question but please if you want to down vote it give me an answer first.

import 'package:duck/MoreAboutProduct.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'CategoryComponents.dart';

class Samsung extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _x,
      appBar: myAppbar("Samsung"),
      body: FutureBuilder(
        future: getData(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
                itemCount: snapshot.data.length,
                itemBuilder: (context, index) {
                  return CategoryComponents(
                    snapshot.data[index]['NAME']
)};

This is Samsung class, their are other parameters i'm passing but only one of them in this example just making it simple so you understand my quesiton, also that's why i use ListView.builder.

import 'package:duck/myAppbar.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'myCarousel.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class MoreAboutProduct extends StatefulWidget {
  final String NAMEp;
MoreAboutProduct(
  {this.NAMEp});
}
 @override
  _MoreAboutProductState createState() => _MoreAboutProductState();
}

class _MoreAboutProductState extends State<MoreAboutProduct> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ...,
      body: Column(
        children: [
         ...
          ),
          Expanded(
            child: Container(
              child: ListView.builder(
                itemCount: widget.snapshotLengthp,
                itemBuilder: (context, index) {
                  return Container(
                    child: Column(
                      children: [
                        SpecificationsDetails(context, 'NAME', widget.NAMEp),
....
],
),);},),),),),);

SpecificationsDetails is a Function responsible for the styling, no need to show it.

here are some sample runs :

This image is in Samsung class but Categorycomponents class is responsible for passing data to it and the styling

And this is in MoreAboutProduct class

Answer 1

You can create named routes in your app.

MaterialApp(
  // Start the app with the "/" named route. In this case, the app starts
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/more_about_products': (context) => MoreAboutProduct(),
    
    '/samsung': (context) => Samsung(),
  },
);

code from flutter docs.

In category components class you can have something like this:

 Navigator.of(context).pushNamed("/more_about_products", arguments = {name: this.NAME});

after that you can grab this argument inside the MoreAboutProducts with ModalRoute like this:

class _MoreAboutProductState extends State<MoreAboutProduct> {
  @override
  Widget build(BuildContext context) {

    final args = ModalRoute.of(context).settings.arguments;
    // to grab the **name** argument use ***args.name*** like in print function below.
    print(args.name)
    return Scaffold(
      appBar: ...,
      body: Column(
        children: [
         ...
          ),
          Expanded(
            child: Container(...etc code....

Please read the comment beetween print function and ModalRoute.

for more info view flutter named routes and passing the arguments to named routes