Using DropdownButton in Dart with Android Studio

Creating interactive dropdown menus is a common requirement in modern app interfaces. Dart, as the core language of Flutter, provides an easy-to-use widget called DropdownButton that allows developers to implement dropdown lists with minimal effort. In this article, you’ll learn how to build and customize a DropdownButton using Dart in Android Studio. We’ll walk through the full code and explain each part to help you integrate this widget seamlessly into your Flutter app.

Prerequisites

Before diving into the code, ensure that:

• Android Studio is installed
• Flutter and Dart SDKs are configured
• A new Flutter project is created

You can follow the official Flutter installation guide if needed.

Implementing DropdownButton in Dart

Let’s create a simple UI that lets users select a country from a dropdown list. We’ll structure our code in two separate classes:

main.dart (Entry Point)

import 'package:flutter/material.dart';
import 'dropdown_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dropdown Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const DropdownPage(),
    );
  }
}

dropdown_page.dart (Dropdown UI)

import 'package:flutter/material.dart';

class DropdownPage extends StatefulWidget {
  const DropdownPage({super.key});

  @override
  State<DropdownPage> createState() => _DropdownPageState();
}

class _DropdownPageState extends State<DropdownPage> {
  final List<String> countries = ['Indonesia', 'USA', 'Germany', 'Japan', 'India'];
  String selectedCountry = 'Indonesia';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Select Country')),
      body: Center(
        child: DropdownButton<String>(
          value: selectedCountry,
          icon: const Icon(Icons.arrow_downward),
          elevation: 16,
          style: const TextStyle(color: Colors.deepPurple),
          underline: Container(
            height: 2,
            color: Colors.deepPurpleAccent,
          ),
          onChanged: (String? newValue) {
            setState(() {
              selectedCountry = newValue!;
            });
          },
          items: countries.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ),
    );
  }
}

Explanation:

• DropdownButton Widget: Displays the dropdown with options.
• DropdownMenuItem: Represents each item in the dropdown.
• setState(): Updates the UI when a user selects a different option.
• AppBar & Scaffold: Basic layout structure for our screen.

Tips for Customization

• Use DropdownButtonFormField if you want to integrate with forms.
• Add icons or images in each dropdown item using Row() inside child.
• Validate selections using built-in form validation in Flutter.

Conclusion

The DropdownButton widget in Dart is powerful yet straightforward. With just a few lines of code, you can deliver a smooth user experience for making selections in your mobile app. Whether you’re building a settings page, a user profile editor, or a registration form, dropdowns are an essential UI element.