The full page code is very long but my DropdownButton widget code like this.
The problems are,
first: I can't update my selectedCity, it doesn't get an update. Also, the print function calls null, since my cityList data is like [new york, paris, london] etc...
second: flutter doesn't change focus from any TextField to DropdownButton fully. I mean, clicked TextField, then DropdownButton but focus reverts to that TextField after the button click. It is default action of Flutter?
List<dynamic> _cityList;
String _selectedCity;
#override
Widget build(BuildContext context) {
return DropdownButton(
value: _selectedCity,
style: TextStyle(
fontSize: 11,
color: textColor,
),
items: _cityList.map((city) {
return DropdownMenuItem<String>(
child: Padding(
padding: const EdgeInsets.only(left: 4),
child: Text(city),
),
);
}).toList(),
onChanged: (String value) {
setState(() {
_selectedCity = value;
print(_selectedCity);
});
},
isExpanded: true,
);
}
Edit: The solution of resetting FocusNode after selecting an item from DropdownMenuItem is adding this line inside of setstate like this:
this: FocusScope.of(context).requestFocus(new FocusNode());
to here: onChanged:(){setSate((){here}}
I hope it will help you. I have modified your code a little bit
List<dynamic> _cityList;
String _selectedCity;
It will show the Dropdown Button and when you click on it and select any value showing in the print
#override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
body: ListView(
children: [
Column(
children: <Widget>[
DropdownButton<String>(
items: _cityList.map((dynamic value) {
return DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (value) {
setState(() {
_selectedCity = value;
print(_selectedCity);
});
},
),
],
),
],
),
);
}
for the focus problem you should use focusNodes one with the drop down list and another with the text field https://docs.flutter.io/flutter/widgets/FocusNode-class.html.
Related
Hi I am new to flutter and have been going through flutter's udacity course building their unit converter app to try to learn about the framework. I was attempting to architecture the app using bloc but have ran into an issue with my dropdown menu. Every time when I change the item in the dropdown it resets back to the default value when focusing on the text input field. It looks like the widget tree i rebuilt when focusing on a textfield. The default units are the reset because in my bloc constructor I have a method to set default units. I am at a loss for where I would move my default units method so that it does not conflict. What should I do in my bloc to set default units only when a distinct category is set, and when it is first being built.
I tried using _currentCatController.stream.distinct method to only update the stream when distinct data is passed but that did not seem to work either. I tried to wrap the default units method in various conditional statements that did not give me the result I wanted.
you can find all the source here https://github.com/Renzo-Olivares/Units_Flutter
class _ConverterScreenState extends State<ConverterScreen> {
///function that creates dropdown widget
Widget _buildDropdown(
bool selectionType, ValueChanged<dynamic> changeFunction) {
print("build dropdown");
return Padding(
padding: const EdgeInsets.symmetric(vertical: 15.0),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black, style: BorderStyle.solid),
borderRadius: BorderRadius.circular(4.0)),
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: StreamBuilder<Unit>(
stream: _conversionBloc.inputUnit,
initialData: widget._category.units[0],
builder: (context, snapshotIn) {
return StreamBuilder<Unit>(
stream: _conversionBloc.outputUnit,
initialData: widget._category.units[1],
builder: (context, snapshotOut) {
return StreamBuilder<Category>(
stream: _conversionBloc.currentCategory,
initialData: widget._category,
builder: (context, snapshotDropdown) {
return DropdownButton(
items: snapshotDropdown.data.units
.map(_buildDropdownItem)
.toList(),
value: selectionType
? snapshotIn.data.name
: snapshotOut.data.name,
onChanged: changeFunction,
isExpanded: true,
hint: Text("Select Units",
style: TextStyle(
color: Colors.black,
)),
);
});
});
})),
),
),
);
}
}
class ConversionBloc {
//input
final _currentCatController = StreamController<Category>();
Sink<Category> get currentCat => _currentCatController.sink;
final _currentCatSubject = BehaviorSubject<Category>();
Stream<Category> get currentCategory => _currentCatSubject.stream;
ConversionBloc() {
print("conversion bloc");
//category
_currentCatController.stream.listen((category) {
print("setting category ${category.name}");
_category = category;
_currentCatSubject.sink.add(_category);
//units default
setDefaultUnits(_category);
});
}
void setDefaultUnits(Category category) {
print("setting default units for ${category.name}");
_inputUnits = category.units[0];
_outputUnits = category.units[1];
_inputUnitSubject.sink.add(_inputUnits);
_outputUnitSubject.add(_outputUnits);
}
}
The issue here is that the DropdownButton value wasn't updated on onChanged. What you can do here is handle the value passed from onChanged and update the DropdownButton value. Also, focusing on a Widget displayed on screen shouldn't rebuild Widget build().
I want user to select the option given in Radio Button before moving to second page in My Flutter Application. I'm showing Radio button widget inside Alertdialog it shows but radio button not changed after selecting.
Everything State Class
floatingActionButton: FloatingActionButton(
child: Icon(Icons.create),
onPressed: () {
return showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text("Select Grade System and No of Subjects"),
actions: <Widget>[
Radio(value: 0, groupValue: groupValue, onChanged: selectRadio),
Radio(value: 1, groupValue: groupValue, onChanged: selectRadio),
],
));
},
),
selectRadio Function
void selectRadio(int value)
{
setState(() {
groupValue=value;
});
}
I had the same issue. I solved it by using this:
showDialog<void>(
context: context,
builder: (BuildContext context) {
int selectedRadio = 0;
return AlertDialog(
content: StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return Column(
mainAxisSize: MainAxisSize.min,
children: List<Widget>.generate(4, (int index) {
return Radio<int>(
value: index,
groupValue: selectedRadio,
onChanged: (int value) {
setState(() => selectedRadio = value);
},
);
}),
);
},
),
);
},
As I said the above comment showDialog creates new context and that setState on the calling widget therefore won't affect the dialog
You can create new stateful widget naming MyDialog.Checkout this gist such that you can get it(it uses dropdown but you can implement radio widget in same way).
custom language popup
You need to create separate statefulwidget class to handle state of radio button. Refer this example
when i try to add two dropDownFormField in a row its showing an exception i don't know why they are not fitting into a row. i tried to wrap it also not working.when add two dropDown buttons in a row it works perfectly.but i want use validator so i am using dropdownformfield
Widget collgDD= Wrap(children:<Widget>[Row(
children:<Widget>[DropdownButtonFormField(
value: selectedcollg,
items: collg.map((value){
return new DropdownMenuItem<String>(child: Text(value),
value: value,);
}).toList(),
hint: Text("select ur collg"),
onChanged: (value){
setState(() {
selectedcollg=value;
});
},
),
DropdownButtonFormField(
value: selectbranch,
items: branch.map((value){
return new DropdownMenuItem<String>(child: Text(value),
value: value,);
}).toList(),
hint: Text("select ur collg"),
onChanged: (value){
setState(() {
selectbranch=value;
});
},
)
])]);
Use flexible widget
Widget collgDD = Row(children: <Widget>[
Flexible(
child: dropdown1
),
Flexible(
child: dropdown2,
)
]);
I'm trying to get familiar with flutter and I'm facing some weird case. I want to build a dynamic ListView where a + button allows to add elements. I wrote the following State code:
class MyWidgetListState extends State<MyWidgetList> {
List<Widget> _objectList = <Widget>[
new Text('test'),
new Text('test')
];
void _addOne() {
setState(() {
_objectList.add(new Text('test'));
});
}
void _removeOne() {
setState(() {
_objectList.removeLast();
});
}
#override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new ListView(
shrinkWrap: true,
children: _objectList
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new IconButton(
icon: new Icon(Icons.remove_circle),
iconSize: 36.0,
tooltip: 'Remove',
onPressed: _objectList.length > 2 ? _removeOne : null,
),
new IconButton(
icon: new Icon(Icons.add_circle),
iconSize: 36.0,
tooltip: 'Add',
onPressed: _addOne,
)
],
),
new Text(_objectList.length.toString())
],
);
}
}
My problem here is that the ListView is visually stuck with the 2 elements I initialized it with.
Internally the _objectList is well managed. For testing purpose I added a simple Text widget at the bottom that shows the size of the list. This one works fine when I click the Add/Remove buttons and it gets properly refreshed. Am I missing something?
Flutter is based around immutable data. Meaning that if the reference to an object didn't change, the content didn't either.
The problem is, in your case you always send to ListView the same array, and instead mutate its content. But this leads to ListView assuming the list didn't change and therefore prevent useless render.
You can change your setState to keep that in mind :
setState(() {
_objectList = List.from(_objectList)
..add(Text("foo"));
});
Another Solution!!
Replace ListView with ListView.builder
Code:
ListView.builder(
itemBuilder: (ctx, item) {
return _objectList[item];
},
shrinkWrap: true,
itemCount: _objectList.length,
),
Output:
I doing a AlertDialog, so when I tried to insert Slider widget inside the state of value sound realy stranger, and this doesn't happens if Slider is outside of AlertDialog
new Slider(
onChanged: (double value) {
setState(() {
sliderValue = value;
});
},
label: 'Oi',
divisions: 10,
min: 0.0,
max: 10.0,
value: sliderValue,
)
The complete widget code of AlertDialog
Future<Null> _showDialog() async {
await showDialog<Null>(
context: context,
builder: (BuildContext context) {
return new AlertDialog(
title: const Text('Criar novo cartão'),
actions: <Widget>[
new FlatButton(onPressed: () {
Navigator.of(context).pop(null);
}, child: new Text('Hello'))
],
content: new Container(
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Text('Deseja iniciar um novo cartão com quantos pedidos ja marcados?'),
new Slider(
onChanged: (double value) {
setState(() {
sliderValue = value;
});
},
label: 'Oi',
divisions: 10,
min: 0.0,
max: 10.0,
value: sliderValue,
)
],
),
),
);
}
);
}
and everything is under State class of StatefullWidget.
Its look like doesn't update the value and when try to change the value keep in same position.
Update 1
The problem is there are 2 required parameters in Slider (onChanged, value), So I shoud update this or UI keep quite, see the video how the aplication is running
Video on Youtube
Update 2
I've also opened a issue to get help with this at Github repository, if someone wants to get more information can go to issue #19323
The problem is that it's not your dialog that holds the state. It's the widget that called showDialog. Same goes for when you call setState, you are calling in on the dialog creator.
The problem is, dialogs are not built inside build method. They are on a different widget tree. So when the dialog creator updates, the dialog won't.
Instead, you should make your dialog stateful. Hold the data inside that dialog. And then use Navigator.pop(context, sliderValue) to send the slider value back to the dialog creator.
The equivalent in your dialog would be
FlatButton(
onPressed: () => Navigator.of(context).pop(sliderValue),
child: Text("Hello"),
)
Which you can then catch inside the showDialog result :
final sliderValue = await showDialog<double>(
context: context,
builder: (context) => MyDialog(),
)
I've come up with the same issue with a checkbox and that's my solution, even if it's not the best approach. (see the comment in the code)
Future<Null>_showDialog() async {
return showDialog < Null > (
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return new AlertDialog(
title: Text("title"),
content: Container(
height: 150.0,
child: Checkbox(
value: globalSearch,
onChanged: (bool b) {
print(b);
globalSearch = b;
Navigator.of(context).pop(); // here I pop to avoid multiple Dialogs
_showDialog(); //here i call the same function
},
)),
);
},
);
}
Easiest and least amount of lines:
Use StatefulBuilder as top widget of Content in the AlertDialog.
StatefulBuilder(
builder: (context, state) => CupertinoSlider(
value: brightness,
onChanged: (val) {
state(() {
brightness = val;
});
},
),
));
I had similar issue and resolved by putting everything under AlertDialog in to a StatefullWidget.
class <your dialog widget> extends StatefulWidget {
#override
_FilterDialogState createState() => _FilterDialogState();
}
class _<your dialog widget> extends State<FilterDialog> {
#override
Widget build(BuildContext context) {
return AlertDialog(
//your alert dialog content here
);
}
}
create a statefull class with the slider at the return time and the double value should declare inside the statefull class thus the setstate func will work.
here is an example i done this for my slider popup its same for alert dialog use can declare the variable as global thus it can be accessed by other classes
class _PopupMenuState extends State<PopupMenu> {
double _fontSize=15.0;
#override
Widget build(BuildContext context) {
return Container(
child: Slider(
value: _fontSize,
min: 10,
max: 100,
onChanged: (value) {
setState(() {
print(value);
_fontSize = value;
});
},
),
);
}
}