alvin_demo.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.indigo),
      home: MyHomePage(),
    ),
  );
}

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

  final _selectedNameNotifier = ValueNotifier("Alpha");
  final _nameList = ["Alpha", "Beta", "Gamma", "Delta", "Epsilon"];

  @override
  Widget build(BuildContext context) {
    String _inputtedName = "";
    return Scaffold(
      appBar: AppBar(title: const Text("Flutter Demo Home Page")),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: ListView(
          children: <Widget>[
            const SizedBox(height: 48),
            const Text("Please write the name you've chosen from bottom list"),
            const SizedBox(height: 8),
            TextField(
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: "Letter Name",
              ),
              onChanged: (v) => _inputtedName = v,
            ),
            const SizedBox(height: 24),
            const Text("Please choose a name to write"),
            const SizedBox(height: 8),
            Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.circular(4),
              ),
              padding: const EdgeInsets.symmetric(horizontal: 12),
              child: ValueListenableBuilder<String>(
                valueListenable: _selectedNameNotifier,
                builder: (_, selectedName, __) {
                  return DropdownButtonHideUnderline(
                    child: DropdownButton<String>(
                      isExpanded: true,
                      value: selectedName,
                      items: [
                        for (final letterName in _nameList)
                          DropdownMenuItem(
                            value: letterName,
                            child: Text(letterName),
                          ),
                      ],
                      onChanged: (v) {
                        if (v != null) {
                          _selectedNameNotifier.value = v;
                        }
                      },
                    ),
                  );
                },
              ),
            ),
            const SizedBox(height: 48),
            ElevatedButton(
              onPressed: () {
                final isEquial = _inputtedName.toLowerCase() ==
                    _selectedNameNotifier.value.toLowerCase();
                showDialog(
                  context: context,
                  builder: (_) {
                    return AlertDialog(
                      title: const Text("Result"),
                      content: Text("${isEquial ? '' : 'Not '}Equal"),
                      actions: [
                        TextButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          child: const Text("Ok"),
                        ),
                      ],
                    );
                  },
                );
              },
              child: const Text("Verify"),
            ),
          ],
        ),
      ),
    );
  }
}