如何从同一屏幕上的另一个有状态小部件接收数据？

Question

So i need to receive data from my RadioDialog stf widget to BoxScreen widget.
I want to show different text depends of random value from boxItems, what i do on this line _randomBoxItem == boxOptionValue? Text('text1'): Text('text2'), _randomBoxItem == boxOptionValue? Text('text1'): Text('text2'),
And i dont know how to get value from _boxOption to boxOptionValue like exmple.
Here is my code:

class BoxScreen extends StatefulWidget {
  const BoxScreen({Key? key}) : super(key: key);
  static const routeName = '/box';

  @override
  State<BoxScreen> createState() => _BoxScreenState();
}

class _BoxScreenState extends State<BoxScreen> {
  String? boxOptionValue;
  final List<String> boxItems = [
    'Banana',
    'Apple',
    'Orange',
  ];

  Future<void> whatIsInTheBox(BuildContext context) async {
    return await showDialog(
      context: context,
      builder: (BuildContext context) => const RadioDialog(),
    );
  }

  @override
  Widget build(BuildContext context) {
    final String _randomBoxItem = (boxItems..shuffle()).first;
    return Scaffold(
      appBar: AppBar( title: const Text('BOX Game'),),
      body: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Text(_randomBoxItem),
                _randomBoxItem == boxOptionValue ? Text('text1') : Text('text2'),
                ElevatedButton.icon(
                  icon: const Icon(Icons.play_arrow_rounded),
                  onPressed: () {
                    whatIsInTheBox(context);
                  },
                  label: const Text('What is in BOX?'),
                ),
              ],
            ),
    );
  }
}


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

  @override
  State createState() => RadioDialogState();
}

class RadioDialogState extends State<RadioDialog> {
  // SingingCharacter? _character = SingingCharacter.banana;
  String? _boxOption;

  void _handleBoxItemChange(String? value) {
    setState(() {
      _boxOption = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      contentPadding: const EdgeInsets.symmetric(horizontal: 0, vertical: 10),
      title: const Text('Select option'),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          RadioListTile<String>(
            title: const Text('Banana'),
            value: 'Banana',
            groupValue: _boxOption,
            onChanged: _handleBoxItemChange,
          ),
          RadioListTile<String>(
            title: const Text('Apple'),
            value: 'Apple',
            groupValue: _boxOption,
            onChanged: _handleBoxItemChange,
          ),
          RadioListTile<String>(
            title: const Text('Orange'),
            value: 'Orange',
            groupValue: _boxOption,
            onChanged: _handleBoxItemChange,
          ),
        ],
      ),
      actions: [
        ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: const Text('I choose this!'),
        ),
      ],
    );
  }
}

I am with Flutter 2 month. Thanks

Answer 1

In the widget calling the dialog:

someVariable =  await showDialog(...);

In the dialog widget:

Navigator.of(context).pop(returnedValue);

Answer 2

Are you able to declare a string outside of your widgets? Then you should be able to use it like so..

String newValue = ''; //**define a string outside the widgets**

class BoxScreen extends StatefulWidget {
  const BoxScreen({Key? key}) : super(key: key);
  static const routeName = '/box';

  @override
  State<BoxScreen> createState() => _BoxScreenState();
}

class _BoxScreenState extends State<BoxScreen> {
  String? boxOptionValue;
  final List<String> boxItems = [
    'Banana',
    'Apple',
    'Orange',
  ];

  Future<void> whatIsInTheBox(BuildContext context) async {
    return await showDialog(
      context: context,
      builder: (BuildContext context) => const RadioDialog(),
    );
  }

  @override
  Widget build(BuildContext context) {
    final String _randomBoxItem = (boxItems..shuffle()).first;
    return Scaffold(
      appBar: AppBar( title: const Text('BOX Game'),),
      body: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Text(_randomBoxItem),
                _randomBoxItem == boxOptionValue ? Text('text1') : Text('text2'),
                ElevatedButton.icon(
                  icon: const Icon(Icons.play_arrow_rounded),
                  onPressed: () {
                    whatIsInTheBox(context);
                  },
                  label: const Text('What is in BOX?'),
                ),
              ],
            ),
    );
  }
}


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

  @override
  State createState() => RadioDialogState();
}

class RadioDialogState extends State<RadioDialog> {
  // SingingCharacter? _character = SingingCharacter.banana;
  String? _boxOption;

  void _handleBoxItemChange(String? value) {
    setState(() {
      newValue = value; //**Make it equal the new value**
    });
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      contentPadding: const EdgeInsets.symmetric(horizontal: 0, vertical: 10),
      title: Text(newValue), //**use it in any widget like this**
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          RadioListTile<String>(
            title: const Text('Banana'),
            value: 'Banana',
            groupValue: _boxOption,
            onChanged: _handleBoxItemChange,
          ),
          RadioListTile<String>(
            title: const Text('Apple'),
            value: 'Apple',
            groupValue: _boxOption,
            onChanged: _handleBoxItemChange,
          ),
          RadioListTile<String>(
            title: const Text('Orange'),
            value: 'Orange',
            groupValue: _boxOption,
            onChanged: _handleBoxItemChange,
          ),
        ],
      ),
      actions: [
        ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: const Text('I choose this!'),
        ),
      ],
    );
  }
}