Cannot put two DropDownButtons in Flutter

Question

I'm trying to put two DropdownButtons in the same app, but it doesn't seem to work 'cause value2 doesn't seem to change. Could you help me? Thanks in advance!

Here's the code:

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(FirestoreApp());
}

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

  @override
  _FirestoreAppState createState() => _FirestoreAppState();
}

class _FirestoreAppState extends State<FirestoreApp> {
  String? value;
  String? value2;

  String prof = '';
  String points = '';

  @override
  Widget build(BuildContext context) {
    CollectionReference collection =
        FirebaseFirestore.instance.collection('Prof');

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            children: [
              Container(
                width: 200,
                margin: EdgeInsets.fromLTRB(12,100, 12, 12),
                padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(color: Colors.black, width: 4)
                ),
                child: DropdownButton<String>(
                  value: value,
                  isExpanded: true,
                  items: <DropdownMenuItem<String>>[
                    DropdownMenuItem(value: null, child: Text('Seleziona'), ),
                    DropdownMenuItem(value: '1', child: Text('1'), ),
                    DropdownMenuItem(value: '2', child: Text('2'), ),    
                  ],
                  onChanged: (value) => setState(() {
                    this.value = value;
                    prof = value!;
                  }),
                ),
              ),
              Container(
                width: 1000,
                margin: EdgeInsets.fromLTRB(12,100, 12, 12),
                padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(color: Colors.black, width: 4)
                ),
                child: DropdownButton<String>(
                  value: value2,
                  isExpanded: true,
                  items: <DropdownMenuItem<String>>[
                    DropdownMenuItem(value: null, child: Text('a'), ),
                    DropdownMenuItem(value: '20', child: Text('b'), ),
                    DropdownMenuItem(value: '15', child: Text('c'), ),
                    DropdownMenuItem(value: '30', child: Text('d'), ),
                  ],
                  onChanged: (value) => setState(() {
                    this.value = value2;
                    points = value2!;
                  }),
                ),
              )
            ],
          )
        ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.save),
        onPressed: () {
          if (prof != null && points != null) {
            collection.doc('EtaApkQZConQUXzAS4JH').update({'$prof': FieldValue.increment(int.parse(points))});
          }
          setState(() {
            prof = '';
            points = '';
          });
        })
      )
    );
  }

}

P.S. Actually, there are more DropdownMenuItems, but I removed them to make the code more readable

Answer 1

On your second DropDownButton you are settting the variable value to value2. You switched those variables and it is the reason why value2 never gets an update. To fix it set value2 to value.

onChanged: (value) => setState(() {
  // this.value = value2;
  value2 = value;
  points = value2!;
}),