How do elegantly use variables for a state in Flutter/Dart?

Question

class EventCreator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget> [
          Positioned.fill(
            child: Image(
              image: AssetImage('images/planning.jpg'),
              fit: BoxFit.cover,
            ),
          ),
          Container(
            child: Column(
              children: <Widget>[

                //DropdownBehavior(valueArg, listArg), idea

                DropdownBehavior(), // current

              ],
            ),
          ),
        ],
      ),
    );
  }
}

class DropdownBehavior extends StatefulWidget {
  DropdownBehavior({Key key}) : super(key: key);
  @override
  _DropdownBehavior createState() => _DropdownBehavior();
}

class _DropdownBehavior extends 
  State<DropdownBehavior> {
  String dropdownValue = "Public event";
  List<String> dropdownlist = ['Public event', ['Private event'];
                                         // These should be variables,
  @override                              // and be modifiable in EventCreator

  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValue,
      elevation: 16,
      style: TextStyle(color: Colors.white),
      dropdownColor: Colors.black,
      underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
      ),
      onChanged: (String newValue) {
        setState(() {
          dropdownValue = newValue;
        });
      },
      items: dropdownlist.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }

}

I have the following code. I want to be able to re-use my classes DropdownBehavior for various types of values. Therefore I believe I need a variable that I can pass into the DropdownBehavior constructor, and thus change how the class works each time.

I tried some various constructor implementations in DropdownBehavior, but it seems that my knowledge of States in Flutter is lacking, because I can't understand how it works. I also don't understand the use of the "Key" in the constructor and how it is being used.

I used the DropdownButton sample code for the general implementation.

I am a novice within Flutter and app development so I would love an explanation for why what I'm doing is stupid.

TL;DR: Want a general class that I can use for dropdown menus, where I can fill in the values of the initial hint value and the overall list of values to choose from.

Answer 1

I might consider what you're doing as merging the concepts of state management and class creation. That can be good or it can be better to think of them separately.

For instance, I wouldn't think of anything you've written here as overly related to state management necessarily, as far as what to search for when looking for help, but more just widget building. A starting point to pass variables would be to put variables in your DropDownBehavior class (to go along with Key). I think of it more simply: instead of creating a stateful widget and state, think of just trying to have a function that accepts parameters and returns a dropdownbutton.

Here is an abridged example:

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title)
         )
       );
   }
}