【Flutter】ドロップダウンの作り方｜選択肢を作り選べなくする

/// 選択肢1つ分。id は選んだときに渡る値、name は画面に出る文字。
class Language {
  const Language(this.id, this.name);

  final String id;
  final String name;
}

const languages = [
  Language('ja-JP', '日本語 (日本)'),
  Language('en-US', 'English (United States)'),
  Language('fr-FR', 'Français (France)'),
];

import 'package:flutter/material.dart';

import '../models/language.dart';

class LanguageDropdown extends StatelessWidget {
  const LanguageDropdown({
    super.key,
    required this.languages,
    required this.selectedId,
    required this.enabled,
    required this.onChanged,
  });

  final List<Language> languages;
  final String? selectedId;
  final bool enabled;
  final ValueChanged<String?> onChanged;

  @override
  Widget build(BuildContext context) {
    return DropdownButtonFormField<String>(
      initialValue: selectedId,
      decoration: const InputDecoration(
        border: OutlineInputBorder(),
        labelText: '言語',
      ),
      items: [
        for (final language in languages)
          DropdownMenuItem(value: language.id, child: Text(language.name)),
      ],
      // onChanged が null のとき、ドロップダウンは押せなくなる。
      onChanged: enabled ? onChanged : null,
    );
  }
}

import 'package:flutter/material.dart';

import '../models/language.dart';
import '../widgets/language_dropdown.dart';

class DropdownPage extends StatefulWidget {
  const DropdownPage({super.key, required this.title});

  final String title;

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

class _DropdownPageState extends State<DropdownPage> {
  String? _selectedId = languages.first.id;
  bool _enabled = true;

  String get _selectedName =>
      languages.firstWhere((l) => l.id == _selectedId).name;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            LanguageDropdown(
              languages: languages,
              selectedId: _selectedId,
              enabled: _enabled,
              onChanged: (id) => setState(() => _selectedId = id),
            ),
            const SizedBox(height: 12),
            Text('選んだ言語: $_selectedName（ID: $_selectedId）'),
            const SizedBox(height: 12),
            SwitchListTile(
              title: const Text('変更を許可する'),
              value: _enabled,
              onChanged: (value) => setState(() => _enabled = value),
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'pages/dropdown_page.dart';

void main() {
  runApp(
    const MaterialApp(home: DropdownPage(title: 'ドロップダウン')),
  );
}

items: [
  for (final language in languages)
    DropdownMenuItem(value: language.id, child: Text(language.name)),
],

onChanged: enabled ? onChanged : null,