Passing data to a Stateful Widget from another Stateful Widget

main.dart

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Page 1'),
        ),
        body: PageOne(),
      ),
    );
  }
}

page1.dart

import 'package:flutter/material.dart';
import 'page2.dart';
class PageOne extends StatefulWidget {
  @override
  _PageOneState createState() => _PageOneState();
}
class _PageOneState extends State<PageOne> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text('Choose the color (value to be passed) of the Next Page:'),
          RaisedButton(
              color: Colors.pink,
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (_) => PageTwo(
                      passedColor: Colors.pink,
                      passedColorName: 'Pink',
                    ),),);},
              child: Text('Pink')),
          RaisedButton(
            color: Colors.blueGrey,
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (_) => PageTwo(
                    passedColor: Colors.blueGrey,
                    passedColorName: 'Blue',
                  ),),);},
            child: Text('Blue'),
          ),
          SizedBox(
            height: 250,
          )],),);}}

page2.dart

import 'package:flutter/material.dart';
class PageTwo extends StatefulWidget {
  final Color passedColor;
  final String passedColorName;
  const PageTwo(
      {Key key, this.passedColor, this.passedColorName}) //key:key is used
      : super(key: key);
  @override
  _PageTwoState createState() => _PageTwoState();
}
class _PageTwoState extends State<PageTwo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
        automaticallyImplyLeading: false, //to disable going back
      ),
      body: Column(
        children: [
          Container(
            height: 400,
            width: double.infinity,
            color: widget.passedColor,
          ),
          Text('${widget.passedColorName} color was passed'),
          RaisedButton(
              color: Colors.grey,
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('<- Go back'))
        ],),);},}
// Use this if u want to later make changes to the passed value in the code. Full code in the file below
// NOTE: Here 'foo' means 'your value'
// class MyStateful extends StatefulWidget {
//   final String foo;
//   const MyStateful({Key key, this.foo}): super(key: key);
//   @override
//   _MyStatefulState createState() => _MyStatefulState(foo: this.foo);
// }
// class _MyStatefulState extends State<MyStateful> {
//   String foo;
//   _MyStatefulState({this.foo});
//   @override
//   Widget build(BuildContext context) {
//     return Text(foo);
//   },}

page2.dart(with modifications of value possible).dart

import 'package:flutter/material.dart';
class PageTwo extends StatefulWidget {
  final Color passedColor;
  final String passedColorName;
  const PageTwo({Key key, this.passedColor, this.passedColorName})
      : super(key: key);
  @override
  _PageTwoState createState() => _PageTwoState(
      passedColor: this.passedColor, passedColorName: this.passedColorName);
}

class _PageTwoState extends State<PageTwo> {
  Color passedColor;
  String passedColorName;
  _PageTwoState({this.passedColor, this.passedColorName});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
        automaticallyImplyLeading: false, //to disable going back
      ),
      body: Column(
        children: [
          Container(
            height: 400,
            width: double.infinity,
            color: passedColor,
          ),
          Text('$passedColorName color was passed'),
          RaisedButton(
              color: Colors.grey,
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('<- Go back'))
        ],),);}