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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // If the following line is removed, DropdownButton works properly.
  SemanticsBinding.instance.ensureSemantics();
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: DropdownExample()
        ),
      ),
    );
  }
}

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

  @override
  State<DropdownExample> createState() => _DropdownExampleState();
}

class _DropdownExampleState extends State<DropdownExample> {
  final TextEditingController _valueController1 = TextEditingController();
  String _selectedValue2 = "One";
  String _selectedValue3 = "One";

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        spacing: 8,
        children: [
          Flexible(
              child: Text(
                  'When deployed to Flutter Web on an iPhone browser with ensureSemantics(), selecting from a DropdownButton or DropdownButtonFormField with touchscreen or mouse will cause the screen to blank out. Selection from the keyboard and VoiceOver work fine. DropdownMenu works fine, as do the other widgets when ensureSemantics is not set.'
              )
          ),
          Divider(),

          // Example 1: DropdownMenu widget work properly whether ensureSemantics
          // is enabled or not.
          Text('Example 1: DropdownMenu'),
          DropdownMenu(
              dropdownMenuEntries: ['One', 'Two', 'Three']
                  .map(
                    (String value) =>
                      DropdownMenuEntry<String>(value: value, label: value),
                  )
                  .toList(),
            controller: _valueController1,
            initialSelection: 'One',
          ),
          Divider(),

          // Example 2: DropdownButton
          // Selecting an item from a DropdownButton widget pop-up overlay with
          // the touchscreen or mouse causes the screen to blank on iPhone web
          // browsers when ensureSemantics is enabled. Keyboard and VoiceOver
          // selection work fine. DropdownButton touchscreen selection works
          // properly when ensureSemantics is not enabled.
          Text('Example 2: DropdownButton'),
          DropdownButton<String>(
            dropdownColor: Colors.amber,
            items: ['One', 'Two', 'Three']
                .map(
                  (value) =>
                  DropdownMenuItem(value: value, child: Text(value)),
            )
                .toList(),
            value: _selectedValue2,
            onChanged: (value) {
              setState(() {
                _selectedValue2 = value!;
              });
            },
          ),
          Divider(),

          // Example 3: DropdownButtonFormField
          // Like DropdownButton, selecting an item from a
          // DropdownButtonFormField widget pop-up overlay with the touchscreen
          // or mouse causes the screen to blank on iPhone web browsers when
          // ensureSemantics is enabled. Keyboard and VoiceOver selection work
          // fine. DropdownButtonFormField touchscreen selection works properly
          // when ensureSemantics is not enabled.
          Text('Example 3: DropdownFormField'),
          DropdownButtonFormField<String>(
            dropdownColor: Colors.amber,
            items: ['One', 'Two', 'Three']
                .map(
                  (value) =>
                  DropdownMenuItem(value: value, child: Text(value)),
            )
                .toList(),
            value: _selectedValue3,
            onChanged: (value) {
              setState(() {
                _selectedValue3 = value!;
              });
            },
          ),
        ],
      ),
    );
  }
}