How to remove dropdown bottom line?
My Code
Container(
padding: EdgeInsets.fromLTRB(15, 5, 10, 5),
child: Row(
children: <Widget>[
dropdownButton,
Expanded(child: phoneField),
],
),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey, width: 1),
borderRadius: BorderRadius.circular(32.0)),
)
And this is Dropdown
var dropdownButton = DropdownButton(
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['99451', '99450', '99455', '99470 ']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
);
You have to wrap your DropdownButton inside
DropdownButtonHideUnderline like this
var dropdownButton = DropdownButtonHideUnderline(
child: DropdownButton(
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['99451', '99450', '99455', '99470 '].map<DropdownMenuItem<String>>
((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
)
);
you can use like that
underline: SizedBox()
Found a solution using
underline: Container(),
Full Changed Code
var dropdownButton = DropdownButton(
value: dropdownValue,
underline: Container(),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['99451', '99450', '99455', '99470 ']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
);
Related
I am trying to add a delete button in a ListViewBuilder and I have gotten the Delete function to work but I can not seem to get the listViewBuilder to refresh to show the user the new list without going to another screen.
ListViewBuilder Widget:
class LayoutBuilderWidgetDoorsOptions extends StatelessWidget {
LayoutBuilderWidgetDoorsOptions({Key? key}) : super(key: key);
String? dropdownValueObjects;
String? dropdownValueDoorWidth;
String? dropdownValueDoorPanelType;
String? dropdownValueOpLcWidth;
String? dropdownValueOpLcPanelType;
String? dropdownValueWalls;
bool deleted = false;
#override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: const EdgeInsets.all(20),
width: 150,
child: DropdownButton(
value: dropdownValueObjects,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
onChanged: (String? value) {
if (value == 'Sliding Door') {
if (SelectedUpperPanelHt == 'None') {
Fluttertoast.showToast(
msg:
'ERROR: Sliding Door can not have top removed. Please remove Sliding Doors or change Upper Height',
webPosition: "center",
webBgColor:
"linear-gradient(to right, #dc1c13, #B90E0A)",
timeInSecForIosWeb: 5,
toastLength: Toast.LENGTH_LONG);
throw new FormatException();
}
}
dropdownValueObjects = value!;
(context as Element).markNeedsBuild();
},
items: Options.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
if (dropdownValueObjects == 'Swing Door' ||
dropdownValueObjects == 'Sliding Door' ||
dropdownValueObjects == null)
Container(
margin: const EdgeInsets.all(20),
width: 150,
child: DropdownButton(
value: dropdownValueDoorPanelType,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
onChanged: (String? value) {
if (value != 'Select A Value') {
dropdownValueDoorPanelType = value!;
(context as Element).markNeedsBuild();
} else {
Fluttertoast.showToast(
msg: 'Select A Value is not a valid choice',
webPosition: "center",
webBgColor:
"linear-gradient(to right, #dc1c13, #B90E0A)",
timeInSecForIosWeb: 5,
toastLength: Toast.LENGTH_LONG);
throw new FormatException();
}
},
items: PanelTypeOptions.map<DropdownMenuItem<String>>(
(String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
if (dropdownValueObjects == 'Swing Door' ||
dropdownValueObjects == 'Sliding Door' ||
dropdownValueObjects == null)
Container(
margin: const EdgeInsets.all(20),
width: 150,
child: DropdownButton(
value: dropdownValueDoorWidth,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
onChanged: (String? value) {
dropdownValueDoorWidth = value!;
(context as Element).markNeedsBuild();
},
items: DoorWidthOptions.map<DropdownMenuItem<String>>(
(String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
if (dropdownValueObjects == 'Opening' ||
dropdownValueObjects == 'Light Curtain')
Container(
margin: const EdgeInsets.all(20),
width: 150,
child: DropdownButton(
value: dropdownValueOpLcPanelType,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
onChanged: (String? value) {
if (value != 'Select A Value') {
dropdownValueOpLcPanelType = value!;
(context as Element).markNeedsBuild();
} else {
Fluttertoast.showToast(
msg: 'Select A Value is not a valid choice',
webPosition: "center",
webBgColor:
"linear-gradient(to right, #dc1c13, #B90E0A)",
timeInSecForIosWeb: 5,
toastLength: Toast.LENGTH_LONG);
throw new FormatException();
}
},
items:
NAOption.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
if (dropdownValueObjects == 'Opening' ||
dropdownValueObjects == 'Light Curtain')
Container(
margin: const EdgeInsets.all(20),
width: 150,
child: DropdownButton(
value: dropdownValueOpLcWidth,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
onChanged: (String? value) {
dropdownValueOpLcWidth = value!;
(context as Element).markNeedsBuild();
},
items: PanelWidthOptions.map<DropdownMenuItem<String>>(
(String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
Container(
margin: const EdgeInsets.all(20),
width: 150,
child: DropdownButton(
value: dropdownValueWalls,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
onChanged: (String? value) {
dropdownValueWalls = value!;
(context as Element).markNeedsBuild();
},
items:
ActualWalls.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
FloatingActionButton.extended(
onPressed: () {
deleted = true;
for (var i = 0; i < listDynamicDoorsOptions.length; i++) {
if (listDynamicDoorsOptions[i].deleted == true) {
listDynamicDoorsOptions.removeAt(i);
(context as Element).markNeedsBuild();
}
}
},
label: Text('Delete', style: TextStyle(color: Colors.white)))
],
),
],
),
);
}
}
I have used the Function: (context as Element).markNeedsBuild(); to reload the dropdownButtons but this does not need to work in this cause because now the context is deleted. Obviously SetState((){}); will not work since this has to be a Stateless Widget. Any help would be greatly appreciated!
I have a DropdownButton which displays user type.
List<String> items = ['Engineer', 'Technician', 'Sales'];
String? currentSelectedValue;
child: DropdownButtonHideUnderline(
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20.0),
child: DropdownButton<String>(
dropdownColor: Colors.blue.shade100,
isExpanded: true,
hint: Text('Select the user Type'),
onChanged: (newValue) {
setState(() {
currentSelectedValue = newValue;
});
print(currentSelectedValue);
},
items: items.map((String value) {
return DropdownMenuItem(
value: value,
child: Text(
value,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
value: currentSelectedValue,
),
),
),
I can see the list, but when I select a value, it is not displaying on the Text portion of the DropdownButton. I could see the selected value printed in the console.
Can anyone help me to find the mistake?
Make sure to put currentSelectedValue outside the build method.
class Ft extends StatefulWidget {
const Ft({super.key});
#override
State<Ft> createState() => _FtState();
}
class _FtState extends State<Ft> {
List<String> items = ['Engineer', 'Technician', 'Sales'];
String? currentSelectedValue;
#override
Widget build(BuildContext context) {
return Scaffold(
body: DropdownButtonHideUnderline(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: DropdownButton<String>(
dropdownColor: Colors.blue.shade100,
isExpanded: true,
hint: Text('Select the user Type'),
onChanged: (newValue) {
setState(() {
currentSelectedValue = newValue;
});
print(currentSelectedValue);
},
items: items.map((String value) {
return DropdownMenuItem(
value: value,
child: Text(
value,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
value: currentSelectedValue,
),
),
),
);
}
}
How to Design this type of Dropdown dropdown with radio button - sample
I will tryed more time of this design.. and if I select one option it sohwes only Text
My Code
child: DropdownButton<String>(
value: selectedVtypes,
items: ['New', 'Pre-Owned'].map((String value) {
return DropdownMenuItem(
child: Container(
width: 150,
child: ListTile(
title: Text(value),
trailing: Radio(
value: value,
groupValue: value,
onChanged: (val) {},
),
),
),
value: value,
);
}).toList(),
onChanged: (String? vtype) {
setState(() {
selectedVtypes = vtype;
});
},
),
),```
I am working on a dropdown and I have the values in a variable, but I can't get the selected value to be shown, instead is always a static value on.
So far I did this:
class DropDownWidget extends State {
String dropdownValue = 'Activities';
String holder = '';
List<String> postType = ['Activities', 'Sell/buy', 'New Friends', 'City Recommendations', 'Post'];
void getDropDownItem() {
setState(() {
holder = dropdownValue;
});
}
#override
Widget build(BuildContext context) {
return Container(
height: 100,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/img/blue.png'),
fit: BoxFit.cover,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
child: DropdownButton<String>(
value: dropdownValue,
icon: Icon(
Icons.keyboard_arrow_down_outlined,
color: TheBaseColors.lightRed,
),
iconSize: 30,
elevation: 16,
style: TextStyle(color: TheBaseColors.lightRed, fontSize: 18),
onChanged: (String data) {
setState(() {
dropdownValue = data;
});
switch (data) {
case 'Activities':
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CreateActivity()),
);
break;
case 'Sell/buy':
Navigator.push(
context,
}
},
items: postType.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
],
),
);
}
}
I have saved the dropdow value in a variable and then set it in the SetState, but how to show the selected item each time?
Try This
String dropdownValue = 'Activities';
DropdownButton<String>(
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>['Activities', 'Sell/buy', 'New Friends', 'City Recommendations', 'Post']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
I'm trying to build a form with a DropdownButtonFormField with 4 items but i don't know why it doesn't want to expand.
Added isDense : true but it wasn't because of it being too small
Here's the button code
new Container(
child: DropdownButtonFormField(
isDense: false,
hint: Text('Ecole'),
onSaved: (value) {
this._data.ecole = value.toString();
},
items: ['HEI', 'ISEN', 'ISA', 'all'].map((String value) {
return DropdownMenuItem(
value: value,
child: Text(value),
);
}).toList()),
),
1
Try this
String dropdownValue = 'HEI';
DropdownButton<String>(
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>['HEI', 'ISEN', 'ISA', 'all']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),