How to use API in Dropdown list in Flutter?

Article by: Manish Methani

Last Updated: September 9, 2021 at 10:04am IST
8 min 45 sec

Table of Contents:

Final Output

Step 1: Create a New Flutter Project

Begin by creating a new Flutter project or using an existing one. Open your terminal or command prompt and run the following command to generate a new Flutter project:

flutter create api_dropdown_example

Step 2: Add Dependencies

To make HTTP requests and work with JSON data, you'll need to include the http package in your pubspec.yaml file. Add the following dependency:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

Run flutter pub get to fetch the package.

Step 3: Create the API Service

Create a Dart class, which we'll name ApiService, that will handle API requests. This class will define methods to fetch the data you want to populate the dropdown with. Here's how you can create the ApiService class:

import 'dart:convert';
import 'package:http/http.dart' as http;

class ApiService {
  final String apiUrl = 'https://your-website.com/dropdown-api.php'; // Replace with your API endpoint

  Future> getDropdownData() async {
    final response = await http.get(Uri.parse(apiUrl));

    if (response.statusCode == 200) {
      final List data = json.decode(response.body);
      return data.map((item) => item.toString()).toList();
    } else {
      throw Exception('Failed to load data');
    }
  }
}

Here's how you can use the ApiService class to fetch data and populate the dropdown:

Step 4: Create the Dropdown Widget

In your Flutter app, create a dropdown widget using the DropdownButton and DropdownMenuItem widgets. Here's an example:

DropdownButton(
          value: _selectedItem,
          items: _dropdownItems.map((String item) {
            return DropdownMenuItem(
              value: item,
              child: Text(item, style: TextStyle(fontSize: 20.0),),
            );
          }).toList(),
          onChanged: (String? newValue) {
            setState(() {
              _selectedItem = newValue;
            });
          },
        ),

Step 5: Fetch API Data and Populate the Dropdown

In your widget's state, call the ApiService to fetch the data and populate the dropdown. Here's an example of how you can do this:

  void _loadDropdownData() async {
    final response = await http.get(Uri.parse(
        'https://your-website.com/dropdown-api.php')); // Replace with your API endpoint

    if (response.statusCode == 200) {
      final contentType = response.headers['content-type'];
      if (contentType != null && contentType.contains('application/json')) {
        final List data = json.decode(response.body);
        setState(() {
          _dropdownItems = data.map((item) => item.toString()).toList();
          _selectedItem = _dropdownItems.isNotEmpty ? _dropdownItems[0] : null;
        });
      } else {
        print('API did not return JSON data');
      }
    } else {
      print('Failed to load data: ${response.statusCode}');
      throw Exception('Failed to load data');
    }
  }

Call the _loadDropdownData function when the widget is initialized, for example, in the initState method.

Step 6: Display the Dropdown in the UI

Finally, display the dropdown widget within your app's user interface. You can place it inside a Column, Row, or any other layout widget as per your app's design.

Step 7: Create PHP API

<?php
header("Content-Type: application/json");

// Allow requests from any origin (replace "*" with your apps domain if needed)
header("Access-Control-Allow-Origin: *");

// Allow the following HTTP methods
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");

// Allow these HTTP headers in the request
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

// Set the response header to allow credentials (cookies, HTTP authentication, etc.)
header("Access-Control-Allow-Credentials: true");

// Simulated dropdown data (replace with your data source)
$dropdownData = ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"];

echo json_encode($dropdownData);
?>

Run the App

Run your Flutter app using the following command:

flutter run

You will see a dropdown list populated with data fetched from the PHP API.

Final Output

Learn about my Course:

I packaged my knowledge of the Flutter App Development in this 3-hour course. You will get all the future updates & and benefits in the same course. You should definitely check it out. The course is available on Udemy and Codzify Website as well.

📌 Complete Flutter App Development Course for Beginners (2023):
https://www.udemy.com/course/the-complete-flutter-development-bootcamp-with-firebase/

📌 Codzify Course Link: https://codzify.com/flutter-app-development-course

What You'll Learn in 'Flutter App Development Course'

In this course, you will get to learn Build beautiful, fast and native-quality apps with this latest Flutter App Development Course.

• We will create 1 Full-fledge Learning Mobile App from scratch in Flutter.

• You will get to learn about Flutter Framework from Scratch.

• Practical use of Flutter Widgets.

• Everything about Dart Language.

• Introduction to Firebase.

• CRUD Operations in Firebase.

• Google Sign-In, Phone Number Authentication

• Flutter Mock Test

• How to integrate Payment Gateway in Flutter App?

• Advanced workshop introduction and Path to go beyond.

Conclusion

In this article, you've learned how to create a PHP API and use it to populate a dropdown list in a Flutter app. This technique allows you to dynamically load and display data, enhancing the flexibility and interactivity of your application. You can further customize the UI and expand the functionality of your app based on your specific requirements. Using APIs in your Flutter apps opens up a world of possibilities for real-time data integration and user interaction.