How to display data with API in DropdownButton and get data of selected item?

Question

I have a page with a dropdown list where the element should display several fields: image, name and address. I am getting data through a model, the model is saved to a list it's called List<MyModel> mainList . I pass this list to the dropdown widget, but I ran into a problem that I can't display this data. Can you tell me how can I get this data from mainList correctly and display it in the drop down list? And how do I get the selected element?

class UsersDropDownWidget extends StatefulWidget {
  final List<MyModel> mainList;
  const PoyntsDropDownWidget({Key? key, required this.mainList})
      : super(key: key);

  @override
  State<UsersDropDownWidget> createState() => _UsersDropDownWidgetState();
}

class _UsersDropDownWidgetState extends State<UsersDropDownWidget> {
  int? _value = 0;

  void _setValue(int? value) {
    setState(() {
      _value = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 300,
      padding: const EdgeInsets.only(left: 20, right: 13),
      decoration: BoxDecoration(
        color: constants.Colors.greyXDark,
        borderRadius: BorderRadius.circular(20),
        boxShadow: const [
          BoxShadow(
            color: Colors.black26,
            spreadRadius: 5,
            blurRadius: 12,
            offset: Offset(0, 0),
          )
        ],
      ),
      child: DropdownButton(
        isExpanded: true,
        itemHeight: 100,
        icon: const SizedBox.shrink(),
        value: _value,
        onChanged: _setValue,
        underline: const SizedBox(),
        dropdownColor: constants.Colors.greyXDark,
        menuMaxHeight: MediaQuery.of(context).size.height * .52,
        items: [
            DropdownMenuItem(
              value: i,
              child: SizedBox(
                child: Row(
                  children: [
                    SizedBox(
                      height: 70,
                      width: 70,
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child: Image.asset('assets/images/user.jpg'),
                      ),
                    ),
                    const SizedBox(width: 15),
                    Expanded(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: const [
                          Text(
                            'Name',
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                            style: constants.Styles.normalHeavyTextStyleWhite,
                          ),
                          SizedBox(height: 6),
                          FittedBox(
                            fit: BoxFit.scaleDown,
                            child: Text(
                              'Evan Gbirol St, 26',
                              style: constants.Styles.smallBookTextStyleWhite,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            )
        ],
      ),
    );
  }
}

model

class MyModel {
  MyModel ({
    required this.id,
    required this.startedAt,
    required this.name,
  }); 
  late final int id;
  late final String startedAt;
  late final String name;

  MyModel.fromJson(Map<String, dynamic> json){
    id = json['id'];
    startedAt = json['started_at'];
    name= json['name'];
  }

  Map<String, dynamic> toJson() {
    final _data = <String, dynamic>{};
    _data['id'] = id;
    _data['started_at'] = startedAt;
    _data['name'] = name;
    return _data;
  }
}

Answer 1

First of all do you obtain any data from this model? If you are getting a data you must be using simply like that:

mainList.id, 
mainList.startedAt, 
mainList.name,

But make sure that you are properly fetching data from the API.