import 'package:flutter/material.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(const App());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.light,
      ),
      home: const Home(),
    );
  }
}

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int _value = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Dropdown'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(
          vertical: 8.0,
          horizontal: 16.0,
        ),
        child: Column(
          children: [
            Row(
              children: [
                const SizedBox(
                  width: 100,
                  child: Text('Leading'),
                ),
                Expanded(
                  child: MyDropdown(
                    value: _value,
                    onChanged: (value) {
                      if (value != null && value != _value) {
                        setState(() {
                          _value = value;
                        });
                      }
                    },
                  ),
                ),
                const SizedBox(
                  width: 100,
                  child: Text('Trailing'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class MyDropdown extends StatelessWidget {
  const MyDropdown({
    Key? key,
    required this.value,
    required this.onChanged,
  }) : super(key: key);

  final int value;
  final ValueChanged<int?> onChanged;

  @override
  Widget build(BuildContext context) {
    return DropdownButton<int>(
      isExpanded: true,
      onChanged: onChanged,
      value: value,
      borderRadius: const BorderRadius.all(
        Radius.circular(16.0),
      ),
      items: [
        for (int i = 0; i < 100; i++)
          DropdownMenuItem(
            value: i,
            child: Text(
              i.toString(),
            ),
          ),
      ],
    );
  }
}