flutter change a widget parameter with a dropdownmenu and firestore

Question

I am trying to dellovep a simple music app. My urls are stored in a firestore collection.

My question is: How can I use a dropdownmenu to select an url and pass it to the widget?

I already implemented the widget and is working if I use a hardcoded url in PlayerWidget( url: ).

Also the dropdown menu is working and getting the values from firestore. However, I don't know how to pass it to the PlayerWidget( url: ) from the dropdown.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ParentProvider(
        value: value,
        callTimeStamp: callTimeStamp,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    child: Text('Play'),
                    onPressed: () {
                      if (loadedCount == activeCount) {
                        updatePlayerState("play");
                      } else {
                        print(
                            "Audio not loaded yet");
                        Fluttertoast.showToast(
                            msg: "Please wait untill the audio loads",
                            toastLength: Toast.LENGTH_SHORT,
                            gravity: ToastGravity.CENTER,
                            timeInSecForIos: 1,
                            backgroundColor: Colors.red,
                            textColor: Colors.white,
                            fontSize: 16.0);
                      }
                      // player1.aaa();
                    },
                  ),
                  SizedBox(
                    width: 10.0,
                  ),
                  RaisedButton(
                    child: Text('Pause'),
                    onPressed: () {
                      if (loadedCount == activeCount) {
                        updatePlayerState("pause");
                      } else {
                        print(
                            "Audio not loaded yet");
                        Fluttertoast.showToast(
                            msg: "Please wait untill the audio loads",
                            toastLength: Toast.LENGTH_SHORT,
                            gravity: ToastGravity.CENTER,
                            timeInSecForIos: 1,
                            backgroundColor: Colors.red,
                            textColor: Colors.white,
                            fontSize: 16.0);
                      }
                      // player1.aaa();
                    },
                  ),
                ],
              ),
              PlayerWidget(
                  childAction: updateParent,
                  url:
                  'https://firebasestorage.googleapis.com/v0/b/flutter-temp.appspot.com/o/${selectedUrl}' ),
              SizedBox(
                height: 30.0,
              ),
              // Dropdown menu starts here
              StreamBuilder<QuerySnapshot>(
                stream: Firestore.instance.collection("urls").snapshots(),
                builder: (context, snapshot) {
                  if (!snapshot.hasData)
                    const Text("Loading.....");
                  else {
                    List<DropdownMenuItem> urlItems = [];
                    for (int i = 0; i < snapshot.data.documents.length; i++) {
                      DocumentSnapshot snap = snapshot.data.documents[i];
                      urlItems.add(
                        DropdownMenuItem(
                          child: Text(
                            snap.documentID,
                            style: TextStyle(color: Color(0xff11b719)),
                          ),
                          value: "${snap.documentID}",
                        ),
                      );
                    }
                    return Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(Icons.playlist_play ),
                        SizedBox(width: 50.0),
                        DropdownButton(
                          items: urlItems,
                          onChanged: (urlValue) {
                            final snackBar = SnackBar(
                              content: Text(
                                'Selected music is $urlValue',
                                style: TextStyle(color: Color(0xff11b719)),
                              ),
                            );
                            Scaffold.of(context).showSnackBar(snackBar);
                            setState(() {
                              selectedUrl = urlValue;
                            });
                          },
                          value: selectedUrl,
                          isExpanded: false,
                          hint: new Text(
                            "Choose music to play",
                            style: TextStyle(color: Color(0xff11b719)),
                          ),
                        )
                      ],
                    );
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

Answer 1

Just making it simple by using plain setState you can use a String that holds the selected url within your state from your StatefulWidget like Ademir pointed out. Something like:

String _selectedUrl = 'someDefaultUrl';

then, on your onChanged from your DropboxButton:

onChanged: (urlValue) => setState(() => _selectedUrl = urlValue);

and then just assign the _selectedUrl to your player like so:

PlayerWidget(
    url: _selectedUrl,
 )

This should be enough.

Also, just make sure that your PlayerWidget updates the value accordingly, within it's state on the didUpdateWidget method.

@override
void didUpdateWidget(PlayerWidget old){
  super.didUpdateWidget(old);
  if(old.url != widget.url){
     // Just update anything you need to update after changing the url
  }
}

Answer 2

Change the url argument at PlayerWidget for:

PlayerWidget(
    childAction: updateParent,
    url: selectedUrl ?? 'a default url if nothing is selected'
)

This will load the url selected in the dropdown but if there is nothing selected, will load a default url. If you dont want to load a default url, enclose the PlayerWidget like this:

selectedUrl == null?
    Container():
    PlayerWidget(
        childAction: updateParent,
        url: selectedUrl
    )