I have this widget:
DropdownButton<String>(
value: rentPeriod,
items: rentPeriods.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(translate("expense.$value")),
);
}).toList(),
onChanged: (value) async {
setState(() {
rentPeriod = value;
});
},
),
How can I disable, let's say, the first option of the list?
i dont think there is any straight forward way of disabling a DropdownMenuItem
but you can have a list of the DropdownMenuItems you want to disable and then when you run setState you can check if that DropdownMenuItem is contained in that list and if it is then do nothing, also check by the DropdownMenuItem text if its contained in that list and if it is then change the color to be greyed out.
Like this
class MyWidget extends StatefulWidget {
#override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
var rentPeriods = <String>['one', 'two'];
final disabledItems = ['one'];
var rentPeriod;
#override
Widget build(BuildContext context) {
return DropdownButton<String>(
value: rentPeriod,
items: rentPeriods.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
translate("expense.$value"),
style: TextStyle(
color: disabledItems.contains(value) ? Colors.grey : null,
),
),
);
}).toList(),
onChanged: (value) async {
if (!disabledItems.contains(value)) {
setState(() {
rentPeriod = value;
});
}
},
);
}
}
You can create your own disable customization, changing the color and the callback of onChangedfunction in the DropdownButton, like this example:
https://dartpad.dev/587b44d2f1b06e056197fcf705021699?null_safety=true
Related
I am using CheckboxListTile to show some todo item in flutter(v3.0.4). This is the code looks like:
CheckboxListTile(
controlAffinity: ListTileControlAffinity.leading,
title: Text(element.name,style:element.isCompleted == 1? TextStyle(color: Colors.grey):TextStyle(color: Colors.black)),
value: element.isCompleted == 1?true:false,
checkColor: Colors.green,
selected: element.isCompleted == 1?true:false,
onChanged: (bool? value) {
if(value!){
element.isCompleted = 1;
}else{
element.isCompleted = 0;
}
TodoProvider.updateTodo(element).then((value) => {
TodoProvider.getTodos().then((todos) => {
buildTodoItems(todos)
})
});
},
))
when the user tap the CheckboxListTile item text, I want to show the todo detail information, when the user tap the checkbox, I want to make the todo task changed to complete. Now I am facing a problem is that I could not detect which part the user tap, all the way will trigger onchange event. I have already read the CheckboxListTile source code, seems no api to do this. Am I misssing something? what should I do to detect which part the user select?
You can wrap your title in a GestureDetector(). Now when the title is tapped, only the gesture detector will be run, and not the onChanged().
In this example, if you tap on the text "Checkbox" then you can see the actual checkbox value is not being updated but the GestureDetector is being called, and if you look at the console "tapped" is being printed.
Here is a complete example. I hope you understand:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatefulWidget {
const MyWidget({Key? key}) : super(key: key);
#override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
var _value = false;
#override
Widget build(BuildContext context) {
return CheckboxListTile(
title: GestureDetector(
child: Text('Checkbox'),
onTap: () {
print('tapped');
// you can change the value here too
// setState(() {
// _value = !_value;
// });
},
),
value: _value,
onChanged: (bool? value) {
setState(() {
_value = value!;
});
},
);
;
}
}
I am getting this error in the console when I am trying to use flutter DropdownButton Widget.
package:flutter/src/material/dropdown.dart': Failed assertion: line 1252 pos 12: 'widget.items!.where((DropdownMenuItem item) => item.value == widget.value).length == 1': is not true.
There is a long traceback...
Here I am adding small code sample that will reproduce this error... Anyone can simply copy paste in main.dart file
// flutter import
import 'package:flutter/material.dart';
void main() {
runApp(const BugReportApp());
}
class BugReportApp extends StatefulWidget {
const BugReportApp({Key? key}) : super(key: key);
#override
State<BugReportApp> createState() => _BugReportAppState();
}
class _BugReportAppState extends State<BugReportApp> {
final TextEditingController _dropdownController = TextEditingController();
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bug Report',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Flex(direction: Axis.vertical, children:[
DropdownButton<String>(
value: _dropdownController.text == ""
? null
: _dropdownController.text,
items: ["hello, world", "how are you", "goodbye"]
.map((_value) => DropdownMenuItem<String>(
child: Text(
_value,
)))
.toList(),
onChanged: (_value) {
setState(() {
_dropdownController.text = _value ?? _dropdownController.text;
});
},
),
],),
);
}
}
I was expecting dropown to work normally but, I don't know why it didn't.
You are missing value on DropdownMenuItem.
.map((_value) => DropdownMenuItem<String>(
value: _value, // this
child: Text(
_value,
)))
Also make sure to use Scaffold on home.
Try this code, also added some explanation in the code:
class _MyHomePageState extends State<MyHomePage> {
final TextEditingController _dropdownController = TextEditingController();
String? dropDownValue = 'hello, world'; // add one value as the defaul one which must exists in the dropdown value
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
children: [
Flex(direction: Axis.vertical, children:[
DropdownButton<String>(
value: dropDownValue, // this place should not have a controller but a variable
onChanged: (_value) {
setState(() {
dropDownValue = _value;
});
},
items: ["hello, world", "how are you", "goodbye"]
.map<DropdownMenuItem<String>>((String _value) => DropdownMenuItem<String>(
value: _value, // add this property an pass the _value to it
child: Text(_value,)
)).toList(),
),
])
],
),
);
}
}
please add the VALUE field in both DropdownMenuItem and DropdownButton to prevent error
For a DropDown when I select any purticular option that value gets displayed in the dropDown.
How do I effectively change what is displayed once a purticular drop down menu item is clicked on.
As you can see from the below images. In the Brands Dropdown once I select an item its value gets displayed. However, I would like to change the value that is displayed.
How do I accomplish that? Thanks.
EDITED please pay attention on hint property and this.hintValue
You need to set State in onChanged event and associate value to new value grabbed from onchanged like this
onChanged: (String newValue) {
setState(() {
this.hintValue = newValue;
});
},
while:
return DropdownButton<String>(
value: dropdownValue,
hint: Text("${this.hintValue}"),
icon: Icon(Icons.arrow_downward),
iconSize: 24,
fullcode will be like this:
class DropDownWidget extends StatefulWidget {
DropDownWidget({Key key}) : super(key: key);
#override
_DropDownWidgetState createState() => _DropDownWidgetState();
}
/// This is the private State class that goes with MyStatefulWidget.
class _DropDownWidgetState extends State<DropDownWidget> {
String dropdownValue = 'One';
String hintValue;
#override
Widget build(BuildContext context) {
return DropdownButton<String>(
value: dropdownValue,
hint: Text("${this.hintValue}"),
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String newValue) {
setState(() {
this.hintValue = newValue;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
);
}
}
reference from: flutter docs
for an authentication I would like to recover the base_url of the company chosen from a drop-down list, but I can't do it, being a beginner a little help will be welcome.
here is the code of the dropdownlist:
class DropDown extends StatefulWidget {
DropDown({Key key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<DropDown> {
String _mySelection;
String _myBaseUrl;
List<Map> _myJson = [{"id":2,"society":"test","baseUrl":"url.com"},{"id":1,"society":"planeef","baseUrl":"url.com"}];
#override
Widget build(BuildContext context) {
return Container(
child: new DropdownButton<String>(
isDense: true,
hint: new Text("Select"),
value: _mySelection,
onChanged: (String newValue) {
setState(() {
_mySelection = newValue;
});
},
items: _myJson.map((Map map) {
return new DropdownMenuItem<String>(
value: map["id"].toString(),
child: new Text(
map["society"],
),
);
}).toList(),
),
);
}
}
Check the code below. You can use singleWhere function to retrieve the element from the id value you are getting from the dropdown and then read baseUrl from the element.
The singleWhere function matches and returns a single element from the list based on the condition we provide.
Note -
The singleWhere function throws an error by default if there are duplicates or no element is found. You might need to also pass the orElse parameter to singleWhere or add some error handling in that case.
More about that can be found here.
class _MyHomePageState extends State<MyHomePage> {
String _mySelection;
List<Map> _myJson = [{"id":2,"society":"test","baseUrl":"url.com"},{"id":1,"society":"planeef","baseUrl":"url.com"}];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: new DropdownButton<String>(
isDense: true,
hint: new Text("Select"),
value: _mySelection,
onChanged: (String newValue) {
Map<dynamic,dynamic> _myElement = _myJson.singleWhere((test) => test["id"] == int.parse(newValue));
print(_myElement["baseUrl"]);
//Add the above two lines
setState(() {
_mySelection = newValue;
});
},
items: _myJson.map((Map map) {
return new DropdownMenuItem<String>(
value: map["id"].toString(),
child: new Text(
map["society"],
),
);
}).toList(),
),
)
);
}
}
I have a simple Switch in my Drawer:
SwitchListTile(
title: Text("Dark Theme"),
value: darkThemeEnabled,
onChanged: (darkThemeEnabled) {
if (darkThemeEnabled) {
_themeChanger.setTheme(ThemeData.dark());
} else {
_themeChanger.setTheme(AppTheme.light);
}
)
When I enable my Switch it changes to my dark theme, but how can I change it back? How can I run something on disabling?
I know it must be pretty simple, but I'm currently stuck.
SwitchListTile widget itself doesn't manage state. You can create a StatefulWidget and call setState to update the UI.
class OnOff extends StatefulWidget {
#override
_OnOffState createState() => _OnOffState();
}
class _OnOffState extends State<OnOff> {
bool flag = false;
#override
Widget build(BuildContext context) {
return SwitchListTile(
title: const Text('Change Me'),
value: flag,
onChanged: (bool value) {
setState(() {
flag = value;
});
},
);
}
}
SwitchListTile(
title: Text("Dark Theme"),
value: darkThemeEnabled,
onChanged: (){
if(darkThemeEnabled)
doSometing();
}
)