How to reuse a stateful widget in flutter

Question

I have a following state full widget. I need to reuse it as it is by just changing two variables id and collectionName. Generally I would extract a widget, but in this case I am modifying variable firstName which wont let me extract the widget.

class IndividualSignupPage1 extends StatefulWidget {
  static final id = 'idIndividualSignupPage1';
  final collectionName = 'Individual';

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

class _IndividualSignupPage1State extends State<IndividualSignupPage1> {
  String firstName;
  DateTime birthDate;
  final firestoreObj = Firestore.instance;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: GeneralAppBar(
        appBar: AppBar(),
      ),
      body: Container(
        child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[
          TextField(
            onChanged: (value) {
              this.firstName = value;
            },
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Expanded(
                child: Card(
                  child: ListTile(
                    title: Text(
                      this.birthDate == null
                          ? 'Birthdate'
                          : '${this.birthDate.year}-${this.birthDate.month}-${this.birthDate.day}',
                    ),
                    onTap: () {
                      DatePicker.showDatePicker(
                        context,
                        initialDateTime: this.birthDate,
                        onConfirm: (newDate, listOfIndexes) {
                          setState(() {
                            this.birthDate = newDate;
                          });
                        },
                      );
                    },
                  ),
                ),
              ),
            ],
          ),
          WFullWidthButton(
            name: 'Save',
            onPressedFunc: () async {
              // save all info to firestore db
              firestoreObj.collection(widget.collectionName).document('xyz').setData({
                'firstName': this.firstName,
                'birthDate': this.birthDate,
              }, merge: true);
            },
          ),
        ]),
      ),
    );
  }
}

Thanks

Answer 1

You can pass the arguments to the Class IndividualSignupPage1 and then use it in its corresponding state class _IndividualSignupPage1State with the property "widget." like,

// pass the arguments from another class.
class IndividualSignupPage1 extends StatefulWidget {
  final String id;
  final String collectionName;

  IndividualSignupPage1(this.id,this.collectionName);

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

Let say you want to use id and collectionName in its corresponding state class _IndividualSignupPage1State you can access it using "widget" property like,

appBar: AppBar(title: Text(widget.id)), 
 **OR**
appBar: AppBar(title: Text(widget.collectionName)), 

Note: you can only access the widget property inside functions/methods only.

Answer 2

Create IndividualSignupPage1 constructor and pass data with constructor arguments.

class IndividualSignupPage1 extends StatefulWidget {
  final String id;
  final String collectionName;

  IndividualSignupPage1(this.id,this.collectionName);