decadent-spray-0251

readme.md

decadent-spray-0251

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';

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

void main() {
  runApp(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 StatefulWidget {
  @override
  State<MyWidget> createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  List<String> numberStrings = [
    'One',
    'Two',
    'Three',
    'Four',
    'Five',
    'Six',
    'Seven',
    'Eight',
    'Nine',
    'Ten'
  ];
  late List<String> items = [];
  String selectedFirstItem = 'One';
  late String selectedSecondItem;

  @override
  void initState() {
    super.initState();
    final startingIndex = numberStrings.indexOf(selectedFirstItem);
    items
        .addAll(List.generate(5, (int index) => '$selectedFirstItem / ${startingIndex+index}'));
    selectedSecondItem = items.first;
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
      DropdownButton<String>(
        value: selectedFirstItem,
        items: numberStrings
            .map((i) => DropdownMenuItem<String>(value: i, child: Text(i)))
            .toList(),
        selectedItemBuilder: (BuildContext context) {
          return numberStrings.map((v) {
            return Container(
              padding: const EdgeInsets.only(left: 10),
              alignment: Alignment.centerLeft,
              constraints: const BoxConstraints(minWidth: 100),
              child: Text(
                v,
                style: const TextStyle(
                    color: Colors.deepOrange, fontWeight: FontWeight.w600),
              ),
            );
          }).toList();
        },
        onChanged: (value) {
          setState(() {
            selectedFirstItem = value!;
            final startingIndex = numberStrings.indexOf(selectedFirstItem);
            items.clear();
            items.addAll(
                List.generate(5, (int index) => '$selectedFirstItem / ${startingIndex+index}'));
          });
        },
      ),
      const SizedBox(width: 25),
      DropdownButton<String>(
          value: selectedSecondItem,
          items: items.map((i) {
            return DropdownMenuItem<String>(
                key: ValueKey(i), value: i, child: Text(i));
          }).toList(),
          selectedItemBuilder: (BuildContext context) {
            return items.map((v) {
              return Container(
                padding: const EdgeInsets.only(left: 10),
                alignment: Alignment.centerLeft,
                constraints: const BoxConstraints(minWidth: 100),
                child: Text(
                  v,
                  style: const TextStyle(
                      color: Colors.blue, fontWeight: FontWeight.w600),
                ),
              );
            }).toList();
          },
          onChanged: (value) {
            setState(() {
              selectedSecondItem = value!;
            });
          })
    ]));
  }
}