In flutter, can you set the appbar backgorund to change base on the value of a dropdown box?

my drop down box cycles through 5 strings ['blue','red','yellow','orange','grey']

I want my appbar title to be that dropdown box and for the value in the dropdown to determine the appbar color

DropDownWidget ddw = DropDownWidget();

var color = {
    "blue": Colors.blue,
    "red": Colors.red,
    "yellow": Colors.yellow,
    "orange": Colors.orange,
    "grey": Colors.grey,
};

@override
Widget build(BuildContext context) {
   return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: ddw,
        backgroundColor: color[ddw],
   ),
}

The dropdown (ddw) shows up as the title, no problem.

I made a dictionary with those strings as the keys and the corresponding color as the value, but I am not able to use the string value of the dropdown to change the background.

Any suggestions?

You can copy paste run full code below
You can call setState in onChanged of DropdownButton

code snippet

appBar: AppBar(
    backgroundColor: _appbarColor,
...
DropdownButton<Item>(
                hint: Text("Select item"),
                value: selectedColor,
                onChanged: (Item Value) {
                  setState(() {
                    selectedColor = Value;
                    _appbarColor = selectedColor.color;
                  });
                },

working demo

full code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class Item {
  const Item(this.name, this.color);
  final String name;
  final Color color;
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  Color _appbarColor = Colors.blue;
  Item selectedColor;

  List<Item> colorList = <Item>[
    const Item('blue', Colors.blue),
    const Item('red', Colors.red),
    const Item('yellow', Colors.yellow),
  ];

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: _appbarColor,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DropdownButton<Item>(
                hint: Text("Select item"),
                value: selectedColor,
                onChanged: (Item Value) {
                  setState(() {
                    selectedColor = Value;
                    _appbarColor = selectedColor.color;
                  });
                },
                items: colorList.map((Item item) {
                  return DropdownMenuItem<Item>(
                    value: item,
                    child: Row(
                      children: <Widget>[
                        Container(
                          height: 15,
                          width: 15,
                          color: item.color,
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Text(
                          item.name,
                          style: TextStyle(color: Colors.black),
                        ),
                      ],
                    ),
                  );
                }).toList()),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}