Flutter dropdown with future builder

Question

This is my data model

class RoleModel {
  int? id;
  String? role;

  RoleModel({this.id, this.role});
  RoleModel.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    role = json['role'];
  }
  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['id'] = id;
    data['role'] = role;
    return data;
  }
}

This is my code to get api data

List<RoleModel> roles = [];

  Future<List<RoleModel>> getRoles() async {
    try {
      final response = await http
          .get(Uri.parse('https://localhost:8000/roles'));
      var data = jsonDecode(response.body.toString());
      if (response.statusCode == 200) {
        for (Map<String, dynamic> i in data) {
          roles.add(RoleModel.fromJson(i));
        }
        return roles;
      } else {
        throw Exception('Failed to load roles:$response');
      }
    } catch (e) {
      throw Exception('Failed due to: $e');
    }
  }

How can I create a dropdown button which will have 'id' as value and 'role' will be displayed as text?

score 2 · Answer 1 · answered Jan 25 '23 at 09:29

You can use the below the line of sample code for dropdown widget

DropdownButton<String>(
          items: <String>['One', 'Two', 'Three', 'Four'].map((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
          onChanged: (v) {},
        ),

score 0 · Answer 2 · answered Jan 25 '23 at 09:14

you can create it like this

 DropdownButton<int>(
          items: [
            DropdownMenuItem(
              child: Text("${roleModel.role}"),
              value: roleModel.id,
            ),
          ],
          onChanged: (value) {},
        ),

Doruk · Answer 3 · 2023-01-25T20:29:48.627

You can also create a dropdown button just using a custom package from pub.dev :

Add the latest version of dropdown_button2 to your pubspec.yaml file from [1]: https://pub.dev/packages/dropdown_button2/install
Run 'flutter pub add dropdown_button2' this command from your terminal.
Add 'import 'package:dropdown_button2/dropdown_button2.dart'; this line to your code page.

    import 'dart:convert';
    import 'package:dropdown_button2/custom_dropdown_button2.dart';
    import 'package:flutter/material.dart';
    import 'package:http/http.dart' as http;

    void main() => runApp(MyFlutterApp());
    
    class MyFlutterApp extends StatelessWidget {
      const MyFlutterApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: HomePage(),
        );
      }
    }
    
    class HomePage extends StatefulWidget {
      const HomePage({super.key});
    
      @override
      State<HomePage> createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
      @override
      
    
      List<String> get getAllRoles {
        List<String> allRoles = [];
        for (int i = 0; i < roles.length; i++) {
          allRoles.add('${roles[i].id}    ${roles[i].role}');
        }
        return allRoles; // String format of json taken from the web.
      }
    
      int index = 0;
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('Dropdown with id and role'),
          ),
          body: Padding(
            padding: const EdgeInsets.all(8.0),
            child: CustomDropdownButton2(
              hint: 'Select Item',
              dropdownItems: getAllRoles,
              value: getAllRoles[index],
              buttonWidth: double.infinity,
              dropdownWidth: double.infinity,
              buttonElevation: 7,
              onChanged: (value) {
                setState(() {
                  index = getAllRoles.indexOf(value.toString());
                });
              },
            ),
          ),
        );
      }
    }
    
    class RoleModel {
      int? id;
      String? role;
    
      RoleModel({this.id, this.role});
      RoleModel.fromJson(Map<String, dynamic> json) {
        id = json['id'];
        role = json['role'];
      }
      Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = <String, dynamic>{};
        data['id'] = id;
        data['role'] = role;
        return data;
      }
    }
    
    List<RoleModel> roles = [];
    
    Future<List<RoleModel>> getRoles() async {
      try {
        final response = await http.get(Uri.parse('https://localhost:8000/roles'));
        var data = jsonDecode(response.body.toString());
        if (response.statusCode == 200) {
          for (Map<String, dynamic> i in data) {
            roles.add(RoleModel.fromJson(i));
          }
          return roles;
        } else {
          throw Exception('Failed to load roles:$response');
        }
      } catch (e) {
        throw Exception('Failed due to: $e');
      }
    }

I've received an error, because the http URL isn't accessible now. If you try it with a new URL, i think this code will work correctly.

Flutter dropdown with future builder

3 Answers3