Image next to option in selection

[steve3p0]

How do I get the an image to show up next to the selected item text? I am able to populate the DropdownSearch widget with items that have an image logo and a name field. So that's good. But when the user selects an item, I want the image logo to also be next to the selected name field (when the drop down is collapsed - after the onchange event is completed).

The screen shows the dropdown expanded with list of items, each one having an image logo and a name field. Notice how the selected item doesn't have an image logo. How can I do this? Can someone point me in the right directeion?

child: FutureBuilder<List<Provider>>
(
    future: getMtProviders(), // Pass the future here
    builder: (context, snapshot)
    {
        if (snapshot.hasData)
        {
            return DropdownSearch<Provider>
            (
                onChanged: (Provider? provider) => print(provider),
                itemAsString: (Provider p) => p.name,
                items: snapshot.data!,
                compareFn: (Provider i, Provider s) => i.name.toLowerCase() == s.name.toLowerCase(),

                dropdownButtonProps: const DropdownButtonProps(padding: EdgeInsets.zero,),
                dropdownDecoratorProps: const DropDownDecoratorProps
                (
                    textAlign: TextAlign.left,
                    textAlignVertical: TextAlignVertical.center,
                    dropdownSearchDecoration: InputDecoration
                    (
                        border: OutlineInputBorder (borderSide: BorderSide(color: Colors.red, width: 1.0), ),
                        focusedBorder: OutlineInputBorder (borderSide: BorderSide(color: Colors.black, width: .5), ),
                        enabledBorder: OutlineInputBorder (borderSide: BorderSide(color: Colors.black, width: .5), ),
                        hintText: 'Select a machine translator',
                        contentPadding: EdgeInsets.fromLTRB(15, 0, 0, 0),
                    ),
                ),
                popupProps: PopupProps.menu
                (
                    showSelectedItems: true,
                    showSearchBox: true,
                    searchFieldProps: const TextFieldProps
                    (
                        decoration: InputDecoration
                        (
                            border: OutlineInputBorder (borderSide: BorderSide(color: Colors.black, width: .5), ),
                            focusedBorder: OutlineInputBorder (borderSide: BorderSide(color: Colors.black, width: .5), ),
                            enabledBorder: OutlineInputBorder (borderSide: BorderSide(color: Colors.black, width: .5), ),
                        )
                    ),

                    itemBuilder: (context, Provider provider, bool isSelected) => ListTile
                    (
                        leading: CircleAvatar
                        (
                            backgroundImage: NetworkImage(provider.imageUrl),
                            backgroundColor: Colors.transparent,
                            onBackgroundImageError: (exception, stackTrace)
                            {
                                backgroundImage: AssetImage('assets/default_image.png');
                            },
                        ),
                        title: Text(provider.name),
                    ),
                ),
            );
        }
        else if (snapshot.hasError)
        {
            return Text('Error loading providers');
        }
        else
        {
            return CircularProgressIndicator(); // Show loading indicator
        }
    },
)

Can someone point me in the right direction? I'm sorry. I am having issues understanding the examples and documentation. Thank you. This is almost a really awesome widget.

[salim-lachdhaf]

you can do that easily, you have just overriding dropdownbuilder.