dropdown_provider

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

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => DropdownService()
        )
      ],
      child: MyApp()
    )
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    
    return Consumer<DropdownService>(
      builder: (context, dropdownService, child) {
        return Container(
            padding: const EdgeInsets.all(30),
            child: Column(
              children: [
                const Text('First dropdown:'),
                DropdownButton<DropdownOption>(
                  value: dropdownService.selectedFirstOption,
                  icon: const Icon(Icons.arrow_drop_down),
                  elevation: 16,
                  onChanged: (DropdownOption? newValue) {
                      dropdownService.selectedFirstOption = newValue!;
                  },
                  items: dropdownService.firstDropdown.map((DropdownOption option) {
                    return DropdownMenuItem<DropdownOption>(
                      value: option,
                      child: Text(option.text!),
                    );
                  }).toList(),
                ),
                const SizedBox(height: 20),
                const Text('Second dropdown:'),
                DropdownButton<DropdownOption>(
                  value: dropdownService.selectedSecondOption,
                  icon: const Icon(Icons.arrow_drop_down),
                  elevation: 16,
                  onChanged: (DropdownOption? newValue) {
                      dropdownService.selectedSecondOption = newValue!;
                  },
                  items: dropdownService.secondDropdown.map((DropdownOption option) {
                    return DropdownMenuItem<DropdownOption>(
                      value: option,
                      child: Text(option.text!),
                    );
                  }).toList(),
                ),
                const SizedBox(height: 20),
                Material(
                  color: Colors.amber,
                  child: TextButton(
                    onPressed: dropdownService.selectedFirstOption != null 
                      && dropdownService.selectedSecondOption != null ? () {
                      
                      Navigator.of(context).push(
                        MaterialPageRoute(builder: (context) => NextPage())
                      );
                    } : null,
                    child: const Text('Evaluate', style: TextStyle(color: Colors.black)
                    )
                  )
                )
              ]
            )
          );
      }
    );
  }
}

class NextPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    DropdownService dropdownService = Provider.of<DropdownService>(context, listen: false);

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('The result of ${dropdownService.selectedFirstOption!.text!} and ${dropdownService.selectedSecondOption!.text!}:'),
            const SizedBox(height: 20),
            Text('${dropdownService.selectedFirstOption!.value! + dropdownService.selectedSecondOption!.value!}',
              style: const TextStyle(fontSize: 50)
            ),
          ],
        ),
      ),
    );
  }
}

class DropdownService extends ChangeNotifier {
  
  List<DropdownOption> firstDropdown = [
    DropdownOption(text: 'Value (5)', value: 5),
    DropdownOption(text: 'Value (6)', value: 6),
    DropdownOption(text: 'Value (7)', value: 7),
  ];
  
  DropdownOption? _selectedFirstOption; // = DropdownOption(text: 'Select Value', value: -1);
  DropdownOption? _selectedSecondOption; // = DropdownOption(text: 'Select Value', value: -1);

  DropdownOption? get selectedFirstOption => _selectedFirstOption;
  DropdownOption? get selectedSecondOption => _selectedSecondOption;

  set selectedFirstOption(DropdownOption? value) {
    _selectedFirstOption = value;
    notifyListeners();
  }

  set selectedSecondOption(DropdownOption? value) {
    _selectedSecondOption = value;
    notifyListeners();
  } 
  
  List<DropdownOption> secondDropdown = [
    DropdownOption(text: 'Value (1)', value: 1),
    DropdownOption(text: 'Value (2)', value: 2),
    DropdownOption(text: 'Value (3)', value: 3),
  ];
}


class DropdownOption {
  String? text;
  double? value;
  
  DropdownOption({ this.text, this.value });
}