如何使用 Flutter 和 Dart 中的下拉菜单从另一个小部件更新小部件？

Question

I have two separate stateful widgets. One is a dropdown with values and one is a widget I would like to update onChange of the DropDown . My issue is that the second widget does not update whenever the dropdown is changed. Below is my full code.

Dropdown Widget

import 'package:flutter/material.dart';

class DropDownList extends StatefulWidget {
  List<String> values;
  String select;

  DropDownList({
    Key key,
    this.values,
    this.select,
  }) : super(key: key);

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

class _DropDownListState extends State<DropDownList> {
  List<String> dropdownValues = [
    "2021",
    "2020",
    "2019",
    "2018",
  ];
  var selectedValue = '2021';
  @override
  void initState() {
    setState(() {
      widget.values = dropdownValues;
      widget.select = selectedValue;
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 20.0),
      child: DropdownButton<String>(
        value: selectedValue,
        icon: SizedBox.shrink(),
        // iconSize: 24,
        elevation: 0,
        style: TextStyle(color: Colors.white),
        selectedItemBuilder: (BuildContext context) {
          return dropdownValues.map((String value) {
            return Text(
              value,
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            );
          }).toList();
        },
        underline: SizedBox.shrink(),
        onChanged: (String newValue) {
          setState(() {
            selectedValue = newValue;
          });
          showJojo(selectedValue);
          print(selectedValue);
        },
        items: widget.values.map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(
              '${value}',
              style: TextStyle(
                color: Colors.deepPurple,
              ),
            ),
          );
        }).toList(),
      ),
    );
  }

  static showJojo(String select) {
    return Jojo(
      select: select,
    );
  }
}

Second Widget To get the data

class _JojoState extends State<Jojo> {
  String select;
  _JojoState(this.select);
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: new Text(
        '${this.select}',
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}

Can someone point me in the right direction, please? Amicably Chris

Answer 1

You need to add didChangeDependencies() method here, here if that variable will change page will be compiled.

  void didChangeDependencies() {
    super.didChangeDependencies();
    setState(() {
      if (selectedValue != null) return;
    });
  }```