Cannot figure out how to change the “initialValue” of a DropDown menu…
here and example: Once you’ve selected a new item in the 1st dropdown, onChange should trigger the 2nd DropDown to a new “initial value”
This is an example, I’m working on a settings page where I’m selecting from a list of “items” and based on this selection the “initial value” of the DropDownMenu changes so then he can be modified starting from the actual setting…
Thank you so much!
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: MyFirstDropDown()),
Expanded(child: MySecondDropDown()),
],
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
class MyFirstDropDown extends StatefulWidget {
const MyFirstDropDown({super.key});
@override
MyFirstDropDownState createState() => MyFirstDropDownState();
}
class MyFirstDropDownState extends State<MyFirstDropDown> {
List<String> items = ["first", "second", "third", "last"];
String dropDownValue = "";
@override
initState() {
super.initState();
dropDownValue = items.first;
}
@override
Widget build(BuildContext context) {
return DropdownButton(
value: dropDownValue,
icon: const Icon(Icons.keyboard_arrow_down),
items: items.map((dynamic items) {
return DropdownMenuItem<String?>(
value: items,
child: Text(items),
);
}).toList(),
// After selecting the desired option,it will
// change button value to selected value
onChanged:(newValue) {
setState(() {
///CHANGE THE SECOND DROPDOWN,
});
},
);
}
}
class MySecondDropDown extends StatefulWidget {
const MySecondDropDown({super.key});
@override
MySecondDropDownState createState() => MySecondDropDownState();
}
class MySecondDropDownState extends State<MySecondDropDown> {
List<String> items = ["first", "second", "third", "last"];
String dropDownValue = "";
@override
initState() {
super.initState();
dropDownValue = items.last;
}
@override
Widget build(BuildContext context) {
return DropdownButton<String?>(
value: dropDownValue,
icon: const Icon(Icons.keyboard_arrow_down),
items: items.map((dynamic items) {
return DropdownMenuItem<String?>(
value: items,
child: Text(items),
);
}).toList(),
onChanged: (newValue) {
setState(() {
dropDownValue = newValue!;
});
},
);
}
}