更新外部有状态小部件类的实例时如何更新屏幕

Question

I am displaying the weight of an instance of a person class on my homepage. When I update the weight of this instance through a form in a popup bottom sheet the displayed weight is only changed after a hot reload. How can I trigger a setState in my person class when its instances parameters are changed in homepage?

main.dart

import 'package:flutter/material.dart';
import 'package:metricwidget/screens/homepage.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // Root of application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
      
        primarySwatch: Colors.blue,
      ),
      home: const Homepage(),
    );
  }
}

person.dart

import 'package:flutter/material.dart';

class person extends StatefulWidget {
  int? weight;
  person({Key? key, this.weight}) : super(key: key);

  void updateWeight(newWeight){
    weight = newWeight;
  }

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

class _personState extends State<person> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        widget.weight.toString(),
        style: const TextStyle(fontSize: 24),
      ),
    );
  }
}

homepage.dart

import 'package:mvs/person.dart';
import 'package:flutter/material.dart';

class Homepage extends StatefulWidget {
  const Homepage({Key? key}) : super(key: key);

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

class _HomepageState extends State<Homepage> {
  var joe = person(weight: 23);
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            child: joe,
          ),
          OutlinedButton(
            onPressed: () {
              showModalBottomSheet(
                context: context,
                builder: (context) {
                  return Form(
                    key: _formKey,
                    child: Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(12.0),
                          child: TextFormField(
                            onSaved: (String? value) {
                              if (int.parse(value!) > 0) {
                                setState(() {
                                  joe.updateWeight(int.parse(value));
                                });
                              }
                            },
                            keyboardType: TextInputType.number,
                            maxLength: 3,
                            initialValue: joe.weight.toString(),
                            decoration: const InputDecoration(
                              icon: Icon(Icons.label),
                            ),
                            validator: (value) {
                              if (value!.isEmpty) {
                                return "Please enter value";
                              }
                              return null;
                            },
                          ),
                        ),
                        OutlinedButton(
                          onPressed: () {
                            _formKey.currentState!.save();
                            Navigator.pop(context);
                          },
                          child: const Text("submit"),
                        )
                      ],
                    ),
                  );
                },
              );
            },
            child: const Text("Update"),
          )
        ],
      ),
    );
  }
}

Answer 1

Was able to solve this using provider and changenotifier, same as the format outlined in the docs below

Reference: https://pub.dev/packages/provider