😸

【Flutter】ドロップダウン

に公開
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SamplePage(),
    );
  }
}

class SamplePage extends StatefulWidget {
  const SamplePage({Key? key}) : super(key: key);

  
  State<SamplePage> createState() => _SamplePageState();
}

class _SamplePageState extends State<SamplePage> {
  // ドロップダウンのアイテムリスト
  final List<String> items = ['aaa', 'bbb', 'ccc'];

  // 選択されたアイテム
  String? selectedItem = 'aaa';

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DropdownButton Sample'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DropdownButton<String>(
              items: items.map((String item) {
                return DropdownMenuItem<String>(
                  value: item,
                  child: Text(item),
                );
              }).toList(),
              onChanged: (String? value) {
                setState(() {
                  selectedItem = value;
                });
              },
              value: selectedItem,
            ),
            const SizedBox(
              height: 32,
            ),
            Text('$selectedItem が選択されました。'),
          ],
        ),
      ),
    );
  }
}

Discussion