I want to remove suffix icon from DropdownSearch widget. I am using dropdown_search plugin.
I have tried giving size to icon and also added visibility false. but any of these didn't work.
Even I have tried using dropdown builder too..!!
Please help..!!
DropdownSearch<String>(
dropdownBuilder: (context, str) {
return Text(str ?? "-");
},
dropdownDecoratorProps: DropDownDecoratorProps(
textAlign: TextAlign.left,
textAlignVertical: TextAlignVertical.center,
dropdownSearchDecoration: _appTheme.dropDownDecoration()),
dropdownButtonProps: const DropdownButtonProps(
alignment: Alignment.centerRight,
padding: EdgeInsets.all(0),
icon: SizedBox(
width: 0,
child: Visibility(
visible: false,
child: Icon(
Icons.arrow_downward,
size: 0,
)),
),
isVisible: false,
constraints: BoxConstraints(maxWidth: 0, maxHeight: 0),
iconSize: 0),
popupProps: PopupProps.menu(
textStyle: _appTheme.textFiledStyle,
showSelectedItems: true,
showSearchBox: true,
),
items: _registrationBloc.countries,
onChanged: (value) {
_registrationBloc.selectedCountry = value;
},
selectedItem: _registrationBloc.selectedCountry,
)
set the isVisible property to false it will work.
or you can use other plugin. one is searchfield which i have used.
There is a 'dropDownButton' property for DropdownSearch, use it as follows
dropDownButton : Container(),
hope it works
Related
I want to dropdownlist but i'm not able to do following things.
change the width of the dropdownbutton
make the dropdownlist to start at the dropdownbutton's height , not above it as default
adjust the height of the dropdownmenuitem
Want i want is
What i have is
The code goes like
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
// isDense: true,
// isExpanded: true,
itemHeight: null,
// menuMaxHeight: 10,
alignment: AlignmentDirectional.center,
elevation: 0,
value: selectedQuantity,
selectedItemBuilder: (BuildContext context) {
return _dropDownQuantities.map<Widget>((String item) {
return Container(
alignment: Alignment.center,
// color: Colors.green,
child: Text(
'Qty: $item',
style: TextStyle(fontSize: 14),
),
);
}).toList();
},
items: _dropDownQuantities.map((e) {
return DropdownMenuItem(
alignment: AlignmentDirectional.topStart,
child: Container(
child: Column(
children: [Container(child: Text(e))],
)),
value: e,
);
}).toList(),
hint: Text("Qty: 1 "),
onChanged: (value) {
setState(() {
selectedQuantity = value!;
});
}),
),
),
Use DropdownButton2 to achieve that.
Use buttonWidth property to change the width of the dropdownbutton.
Use offset property to change the position of the dropdown menu. You should add button's height to the dy offset to make it start at the dropdownbutton's height like this: Offset(0.0, "button's height")
Use itemHeight property to adjust the height of the dropdownmenuitem.
Disclaimer: I am the author of the package mentioned above.
I m new to flutter, need help to set the value of the DropdownButton programmatically.
The value is from textfield. Once i click it, it will set the value at the dropdownbutton automatically.
Widget _districtListContainer() {
return Container(
width: 360.0,
child: new InputDecorator(
decoration: InputDecoration(
suffixIcon: new Icon(
Icons.search,
color: Colors.blue[700],
),
labelText: 'Select District',
labelStyle: TextStyle(fontSize: 12.0)),
isEmpty: _selectedDistrict == null,
child: new DropdownButtonHideUnderline(
child: new DropdownButton<District>(
value: _selectedDistrict,
isDense: true,
isExpanded: false,
onChanged: (District newValue) {
setState(() {
_selectedDistrict = newValue;
});
},
items: _listDistrict?.map((District value) {
return new DropdownMenuItem<District>(
value: value,
child: new Text(
value.district != null ? value.district : '',
style: new TextStyle(fontSize: 11.0),
),
);
})?.toList() ??
[],
),
),
),
margin: EdgeInsets.only(bottom: 10.0));
}
thanks
First Of All, Add the data into the list[] From the TextFormfield then retrieve the list into DropDownButton item.
Also, Make Sure, DropDown Button List Display Textformfield data insert activity could not be able to update simultaneously.
I am trying CarouselSlider.I want to make the upside Carousel Slider,bottom side TextFormField. I am holding a list of image paths in selected and send to the screen like this:
ElevatedButton(
onPressed: () {
Navigator.of(context).pushNamed(
OcrScreen.routeName,
arguments: {'image': selected},
);
},
After that I am taking arguments in other screen like this:
final args = ModalRoute.of(context)!.settings.arguments as Map;
final images=args['image'];
Later
I am putting this list into CarouselSlider:
return Scaffold(extendBodyBehindAppBar: false,
appBar: AppBar(
title: const Text('OCR'),
elevation: 0,
backgroundColor: Colors.transparent,
),
body:Column(children:[Container(
child: CarouselSlider(
options: CarouselOptions(),
items: images
.map((image) => Container(
child: Center(
child:
Image.file(File(image),fit: BoxFit.cover, width: 1000)),
))
.toList(),
)),TextFormField(
keyboardType: TextInputType.multiline,
controller: _titleController,
autofocus: false,
style: TextStyle(fontSize: 22.0, color: Colors.black),
maxLines: 20,
decoration: InputDecoration(
filled: true,
isDense: true,
contentPadding: new EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
fillColor: Colors.white,
))]
));
}
I am getting List is not a subtype of type List? error and I couldn't find the solution for this error can anyone help me to find a solution?
Seems like args['image'] can be null that's why you get this error because items should be of type List<Widget>. Try creating the variable this way.
final List<String> images = args['image'] ?? [];
However, you may want to check first if images.isNotEmpty beforing mapping it.
I am looking for a Flutter Plugin to use in one of my POC projects. Idea is to create a dropdown field with a search option, something similar to what you can see on Yatra(dot)com.
It will be really helpful if someone can guide me to create a widget by myself to achieve this.
Any guidance is highly appreciated.
Have a look in this site and try out this code
Container(
child: DropdownSearch<String>(
mode: Mode.DIALOG,
showSearchBox: true,
searchBoxDecoration: InputDecoration(
filled: true,
fillColor: Colors.grey,
),
showAsSuffixIcons: true,
showClearButton: false,
dropdownButtonBuilder: (_) => Padding(
padding: const EdgeInsets.all(8.0),
child: const Icon(
Icons.arrow_drop_down,
size: 24,
color: Colors.red,
),
),
showSelectedItem: true,
items: ["bs", "test", "company"],
onChanged: (String newValue) {
setState(() {
// dropDownValue = newValue;
});
},
// selectedItem: dropDownValue,
),
),
I am new to flutter development. I am using the dropdown button of my application. When opening the drop-down menu, the text is getting cut in the popup dialog. Below I attached a screenshot with coding. Please guide me in fixing this issue.
DropdownButtonHideUnderline(
child: new DropdownButton(
isExpanded: true,
value: dropDownValue,
isDense: true,
//icon: Icon(Icons.keyboard_arrow_down, color: Colors.white,),
onChanged: (String newValue) {
setState(() {
dropDownValue = newValue;
state.didChange(newValue);
});
},
items: dropDownList.map((String value) {
return new DropdownMenuItem(
value: value,
child: new SizedBox(
width: MediaQuery.of(context).size.width / 1.4,
child: new Text(value,
softWrap: true,
style: TextStyle(color: Colors.white, fontSize: 18.0),),)
);
}).toList(),
),
),
);
Copying the DropdownMenuItem class as someone else suggested will not be enough as DropdownButton requires items to be of type List<DropdownMenuItem<T>>.
I have created the following widget which should help with your issue:
import 'package:flutter/material.dart';
/// Looks like a DropdownButton but has a few differences:
///
/// 1. Can be opened by a single tap even if the keyboard is showing (this might be a bug of the DropdownButton)
///
/// 2. The width of the overlay can be different than the width of the child
///
/// 3. The current selection is highlighted in the overlay
class CustomDropdown<T> extends PopupMenuButton<T> {
CustomDropdown({
Key key,
#required PopupMenuItemBuilder<T> itemBuilder,
#required T selectedValue,
PopupMenuItemSelected<T> onSelected,
PopupMenuCanceled onCanceled,
String tooltip,
double elevation = 8.0,
EdgeInsetsGeometry padding = const EdgeInsets.all(8.0),
Icon icon,
Offset offset = Offset.zero,
Widget child,
String placeholder = "Please select",
}) : super(
key: key,
itemBuilder: itemBuilder,
initialValue: selectedValue,
onSelected: onSelected,
onCanceled: onCanceled,
tooltip: tooltip,
elevation: elevation,
padding: padding,
icon: icon,
offset: offset,
child: child == null ? null : Stack(
children: <Widget>[
Builder(
builder: (BuildContext context) => Container(
height: 48,
alignment: AlignmentDirectional.centerStart,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
DefaultTextStyle(
style: selectedValue!= null ? Theme.of(context).textTheme.subhead
: Theme.of(context).textTheme.subhead.copyWith(color:
Theme.of(context).hintColor),
child: Expanded(child: selectedValue== null ? Text(placeholder) : child),
),
IconTheme(
data: IconThemeData(
color: Theme.of(context).brightness == Brightness.light
? Colors.grey.shade700 : Colors.white70,
),
child: const Icon(Icons.arrow_drop_down),
),
],
),
),
),
Positioned(
left: 0.0,
right: 0.0,
bottom: 8,
child: Container(
height: 1,
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(color: Color(0xFFBDBDBD), width: 0.0)),
),
),
),
],
),
);
}
It actually extends PopupMenuButton as you can see, but I've made it look the same as the DropdownButton.
itemBuilder needs to return List<PopupMenuEntry<T>>, with each entry usually being a PopupMenuItem to which you can provide any child widget.
selectedValue is the currently selected value, which will be highlighted in the overlay. If it is null, a Text widget with the placeholder string is shown. If it is not null, the child widget is shown.
You should be able to disable the highlight by modifying this class to either call super() with an initialValue of null, or even better add a boolean to the constructor to control this from the outside.
The height of DropdownMenuItem is hardcoded to _kMenuItemHeight:
https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/dropdown.dart#L486
The only thing you can do is copy this entire file and adjust to your needs.