How can I change DropdownButton values from another widget in Flutter?

Question

I am using that DropdownButton inside of the Stateless wigdet but I want to change that DropdownButton values from another Stateful widget. Likewise with using DropdownButton value, I want to change another stateless widget's container color.

Here is my First Stateless widget

  List<String> dropdownValues = ['red', 'green', 'blue'];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: DropdownButton(
        items: dropdownValues
            .map((value) => DropdownMenuItem(
                  child: Text(value),
                  value: value,
                ))
            .toList(),
        onChanged: (String newValue) {},
        isExpanded: false,
        hint: Text('Chose Color'),
        selectedItemBuilder: ,
      ),
    );
  }
}

This is my Stateful widget

  bool isLightOn = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      padding: new EdgeInsets.all(5.0),
      child: Column(
        children: <Widget>[
          LightBulb(
            isLightOn: isLightOn,
          ),
          LightButton(
            isLightOn: isLightOn,
            onButtonPress: onButtonPress,
          ),
          LightColorSelector(),
        ],
      ),
    );
  }

  void onButtonPress() {
    if (isLightOn == false) {
      setState(() {
        isLightOn = true;
      });
    } else {
      setState(() {
        isLightOn = false;
      });
    }
  }
}

How can I handle these problems and how can I manipulate DropdownButton values? Likewise, I want to reflect that DropdownButton value with changing LightBulb's container color.

Here is LightBulb class

  final bool isLightOn;

  LightBulb({this.isLightOn});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: isLightOn == false ? Colors.red : Colors.green,
      padding: EdgeInsets.all(5.0),
      child: isLightOn == false ? Text("OFF") : Text("ON"),
    );
  }
}

Answer 1

Here is a full working example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> dropdownValues = ['red', 'green', 'blue'];

  String selected;
  Color color;

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(children: <Widget>[
        DropdownButton<String>(
          items: dropdownValues
              .map((value) => DropdownMenuItem(
                    child: Text(value),
                    value: value,
                  ))
              .toList(),
          onChanged: (String newValue) {
            setState(() {
              selected = newValue;
              if (newValue == "red") color = Colors.red;
              if (newValue == "green") color = Colors.green;
              if (newValue == "blue") color = Colors.blue;
            });
          },
          //isExpanded: false,
          hint: Text('Chose Color'),
          //selectedItemBuilder: ,
        ),
        Container(
          color: color != null ? color : Colors.black,
          padding: EdgeInsets.all(5.0),
          child: selected != null ? Text(selected) : Text("OFF", style: TextStyle(color: Colors.white)),
        )
      ]),
    );
  }
}