Fetching data from a Stateful Widget to another Stateful Widget

main.dart

import 'package:flutter/material.dart';
import 'page1.dart';
//TODO: use similar code later as either a changeable theme page or a settings page for your app and also implement shared preferences
//change the colour of the container depending on direction of switch on the next page
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> {
  bool firstSquareColor = false;
  bool secondSquareColor = false;
  _navigateNextPageAndretriveValue(BuildContext context) async {
    //this takes the values popped from page2 screen, using async and await
    final List nextPageValues = await Navigator.push(
      //list to store multiple popped values
      context,
      MaterialPageRoute(builder: (_) => PageTwo()),
    );
    setState(() {
      firstSquareColor = nextPageValues[
          0]; //zero index for 1st popped value of first container
      secondSquareColor = nextPageValues[
          1]; //first index for 2nd popped value of second container
    });}
  
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
              height: 150,
              width: 150,
              color: firstSquareColor == false ? Colors.blue : Colors.pink),
          Container(
              height: 150,
              width: 150,
              color: secondSquareColor == false ? Colors.blue : Colors.pink),
          Container(
            height: 50,
            width: 150,
            child: RaisedButton(
                elevation: 15,
                color: Colors.grey[700],
                child: Text(
                  'Next Page ->',
                  style: TextStyle(color: Colors.black, fontSize: 17),),
                onPressed: () {
                  _navigateNextPageAndretriveValue(context);
                }),),
          SizedBox(
            height: 120,
          ),],),);}}

page2.dart

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class PageTwo extends StatefulWidget {
  @override
  _PageTwoState createState() => _PageTwoState();
}
class _PageTwoState extends State<PageTwo> {
  bool firstValue = false;
  bool secondValue = false;
  //NOTE: values will default back unless stored in device storage using shared preferences
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Page 2'),
          automaticallyImplyLeading: false, //to disable going back when swiped since that will not setState
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Flip to change first square color ',
                  textAlign: TextAlign.center,),
                Container(
                  child: CupertinoSwitch(
                    value: firstValue,
                    onChanged: (bool value) {
                      setState(
                        () {
                          firstValue = value;
                        },);},),),],),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Flip to change second square color ',
                  textAlign: TextAlign.center,
                ),
                Container(
                  child: CupertinoSwitch(
                    value: secondValue,
                    onChanged: (bool value) {
                      setState(
                        () {
                          secondValue = value;
                        },);},),),],),
            Container(
              height: 60,
              width: 170,
              child: RaisedButton(
                  elevation: 15,
                  color: Colors.grey[700],
                  child: Text(
                    '<- Save temporarily and go to previous Page',
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.black, fontSize: 15),
                  ),
                  onPressed: () {
                    Navigator.pop(context, [
                      firstValue,
                      secondValue
                    ]); //multiple values are passed using a list
                  }),),
            SizedBox(
              height: 120,
            ),],),);}}

Hi @yaashwardhan

thanks for your example. it's work fine. but i have a different scenario.
if you know, please help me out from this.

i have dynamically created checkbox and created . no problem
for (int j = 0; j < 9; j++) { singleRow.add(Padding( padding: const EdgeInsets.only(left: 10), child: RoleCheckBox(checkBox: input[i]), )); }

but i don't know , i have get their value.
here my stateful widget.

`class RoleCheckBox extends StatefulWidget {
final bool checkBox;
const RoleCheckBox({Key key, this.checkBox}) : super(key: key);

@OverRide
_RoleCheckBoxState createState() => _RoleCheckBoxState(checkBox);
}

class _RoleCheckBoxState extends State {
_RoleCheckBoxState(this.checkBox);
bool checkBox;
@OverRide
Widget build(BuildContext context) {
return Checkbox(
value: checkBox,
activeColor: HRTheme.primary,
onChanged: (value) {
setState(() {
checkBox = value;
});
});
}
}`