Hello this is my flutter widget SearchableDropdown, and it is wrapped using a container just for highlighting the border for understanding how much space the widget have been taken.
I want to reduce the padding/space of the SearchableDropdown widget around the text, and make the UI like this. How to do that?
new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Text(
'You are here',
style: GoogleFonts.poppins(
color: HexColor("#B8B8B8"), fontSize: 10),
textAlign: TextAlign.start,
),
new Container(
decoration: new BoxDecoration(
border: Border.all(color: Colors.red),
),
child: _searchableDropDown(context, providerData),
)
],
),
Widget _searchableDropDown(BuildContext context, HomePageProviderData data) {
return new SearchableDropdown.single(
hint: new Text(
data.currentCity,
style: GoogleFonts.poppins(
textStyle: TextStyle(
color: Color(0xFF373539),
fontSize: 16,
fontWeight: FontWeight.w600),
),
),
underline: SizedBox(),
displayClearIcon: false,
items: data.listCity.map((item) {
//
}).toList(),
onChanged: (String value) {
//
},
);
}
try use wrapping your dropdown inside SizedBox() like this :
SizedBox(
height: 20,
child: _searchableDropDown(context, providerData),
);
result:
Related
body: Container(
padding: EdgeInsets.all(25),
child: Table(
border: TableBorder.all(),
columnWidths: {
0: FractionColumnWidth(0.14),
1: FractionColumnWidth(0.6),
2: FractionColumnWidth(0.3),
},
children: [
// here to add iconButton
buildRow(['No.','List of Books','Action'], isHeader: true),
buildRow(['1','Harry Potter Philosopher','Action']),
buildRow(['2','Sleeping Beauty','Action']),
buildRow(['3','Beauty and The Beast','Action']),
],
),
),
);
// here List<String>
TableRow buildRow(List<String> cells, {bool isHeader = false}) => TableRow(
children: cells.map((cell) {
final style = TextStyle(
fontWeight: isHeader? FontWeight.bold : FontWeight.normal,
fontSize: 18,
);
return Padding(
padding: const EdgeInsets.all(12),
child: Center(
child: Text(
(cell), //here error
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
),
);
}).toList(),
);
}
Here is i confused to declare icon button in the parameter buildRow cause it carry String but when i change to Widget it will appear the error at Text(cell). I want to add the iconButton in the third row of the table
Just declare List<Strings> cells to List<Widgets> cells like below code:
Use like this:
buildRow([Text('1'), IconButton(onPressed: (){}, icon: Icon(Icons.edit))], isHeader: true),
So I have a dropdown button, but the item text has different length, so when I choose different item, the text moves to a different position like shown in the picture. How should I fix that?
Here is the code:
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
DropdownButton<TaskAssort>(
value: _selected,
icon: const Icon(Icons.arrow_drop_down),
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.black,
decoration: TextDecoration.none,
),
isExpanded: true,
onChanged: (TaskAssort? v) {
_selected = v!;
setState(() {});
},
items: [
DropdownMenuItem(
value: TaskAssort.Unfinished,
child: Text(getAssortText(TaskAssort.Unfinished),
textAlign: TextAlign.end),
),
DropdownMenuItem(
value: TaskAssort.UnfinishedDaily,
child: Text(getAssortText(TaskAssort.UnfinishedDaily),
textAlign: TextAlign.end),
),
DropdownMenuItem(
value: TaskAssort.Histroy,
child: Text(getAssortText(TaskAssort.Histroy),
textAlign: TextAlign.end),
),
]),
],
),
Set alignment of DropdownButton
alignment: Alignment.centerRight
I want to use the result of my DropdownButton to change some text displayed, how would I achieve this?
I have attempted to use a textControlEditor, but I can't make this work with Text.
I want the text to display the advice as the text, which shoiuld be based on value
This is my DropdownButton :
child: Container(
width: 300,
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 15),
decoration: BoxDecoration(
border: Border.all(color: Color(0xff202124), width: 3.0),
color: Colors.white,
borderRadius: BorderRadius.circular(30)),
child: DropdownButton<String>(
onChanged: (value){
setState(() {_selectedColor = value;});
if (value == 'basic') advice = 'Have a great day!';
else if (value == 'Tired') advice = 'Have a rest today!';
else if (value == 'Happy') advice = 'Try to get lots of work done today!';
else if (value == 'Sad') advice = 'Take some time for yourself today';
else if (value == 'Bored') advice = 'Go on a walk and then get back to working';
else if (value == 'Productive') advice = 'Use that productivity';
else advice = 'Good luck today!';
print(advice);
//update text here
},
value: _selectedColor,
underline: Container(),
hint: Center(
child: Text('How have you been feeling today?',
style: TextStyle(color: Color(0xffA9A9A9)),)),
icon: Icon(
Icons.arrow_downward,
color: Color(0xffA9A9A9),
),
isExpanded: true,
items: _emotion
.map((e) => DropdownMenuItem(
child: Container(
alignment: Alignment.centerLeft,
child: Text(
e,
style: TextStyle(fontSize: 18),
),
),
value: e,
)).toList(),
selectedItemBuilder: (BuildContext context) => _emotion
.map((e) => Center(
child: Text(
e,
style: const TextStyle(
fontSize: 18,
color: Color(0xffA9A9A9),
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold),
),
))
.toList(),
),
)),
and here is where I want the text to change:
Expanded(
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(20),
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Color(color),
),
child: Center(
child: Text(
advice,
style: TextStyle(fontFamily: 'Arial', fontSize: 18, color: Colors.white, height: 1, ),
textAlign: TextAlign.center,
)
),
),
),
If the whole code is required I am more than happy to share that as well, thank you!
Okay so here you have to create a function which returns String value. This string value will be the value which you select from the drop-down button.
Here's an example:
String getAdvice() {
if (selectedDropDownValue == 'DefaultValue') {
return 'Default Text';
} else {
return '$selectedDropDownValue';
}
}
And then call this function inside the Text Widget where you want the selected advice to appear. Like this:
child: Center:
child: Text(
getAdvice(), //This is the updated line from your code
style: TextStyle(fontFamily: 'Arial', fontSize: 18, color: Colors.white, height: 1, ),
textAlign: TextAlign.center,
),
),
Hope that answers your question. Feel free to clear up any confusions.
I want to display remember me button and the forget password text in a same line. how can I do this. image is showing my implementation so far. appreciate your help on this
CheckboxListTile(
title: const Text(
"Remember Me",
style: TextStyle(
color: textGrey, fontFamily: "Dubai", fontSize: 14),
),
value: checkedValue,
onChanged: (newValue) {
FocusManager.instance.primaryFocus?.unfocus();
setState(() {
if (isLoading != true) {
checkedValue = newValue!;
print(newValue);
}
});
},
contentPadding: EdgeInsets.only(left: 0, top: 0),
controlAffinity:
ListTileControlAffinity.leading, // <-- leading Checkbox
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
child: Text(
"Forget Password",
style: TextStyle(
color: textGrey, fontFamily: "Dubai", fontSize: 14),
),
onPressed: () {
//Get.to(ForgetPassword());
},
)
],
),
You can try this, it's solve my problem.
Create a row
Wrap CheckboxListTile with sizedbox
Add width to the SizedBox
Add SizedBox into a this row
An example:
Row(
children [
SizedBox(
width: ..
height: ..
child: CheckboxListTile(...)
),
Text(...)
]
)
I am struggling to select an item from auto complete text view which is placed under the dialog. When I search something it is showing me suggestions but item not keeps selected when I going to tap on one item because I noticed that whole dialog is refreshing on item click of auto complete text view.
I have create a separate screen for this dialog also but still same
issue is coming.
class AssetEditDialog extends StatefulWidget {
#override
State createState() => new AssetEditDialogState();
}
class AssetEditDialogState extends State<AssetEditDialog> {
final dbHelper = DatabaseHelper.instance;
TextEditingController roomController = new TextEditingController();
final FocusNode _roomFocusNode = new FocusNode();
#override
Widget build(BuildContext context) {
roomController.text =
Global.scanAssetResult.assetRoom.isEmpty && Global.scanAssetResult.assetRoom == null ? Global.notAvailable : Global.scanAssetResult.assetRoom;
AutoCompleteTextField searchTextField;
GlobalKey<AutoCompleteTextFieldState<String>> key = new GlobalKey();
return Dialog(
child: new Container(
padding: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Asset Number",
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 12,
),
),
Container(
margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
),
Text(
Global.scanAssetResult.assetNo,
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.black,
fontSize: 12,
),
),
Container(
margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
),
Text(
"Asset Serial Number",
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 12,
),
),
Container(
margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
),
Text(
Global.scanAssetResult.assetSerialNo,
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.black,
fontSize: 12,
),
),
Container(
margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
),
Text(
"Asset Sector",
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 12,
),
),
searchTextField = AutoCompleteTextField<String>(
key: key,
suggestions: Global.sectorList,
style: new TextStyle(color: Colors.black, fontSize: 16.0),
decoration: new InputDecoration(
contentPadding: EdgeInsets.fromLTRB(5.0, 5.0, 5.0, 5.0),
hintText: 'Search here',
hintStyle: TextStyle(color: Colors.black)),
itemFilter: (item, query) {
return item.toLowerCase().startsWith(query.toLowerCase());
},
itemSorter: (a, b) {
return a.toLowerCase().compareTo(b.toLowerCase());
},
clearOnSubmit: false,
itemSubmitted: (item) {
setState(() {
try {
searchTextField.textField.controller.text = item;
return;
} on Exception catch (exception) {
Global.writeErrorLog(true, "Autocomplete text view ", exception.toString());
}
});
},
itemBuilder: (context, item) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
item,
style: TextStyle(fontSize: 16.0),
),
SizedBox(
width: 10.0,
),
Padding(
padding: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),
),
],
);
},
),
],
),
),
);
}
Here is screenshot :
Please give a proper solution to achieve it.
Thanks.
I got an answer. Just look below code:
Just remove below lines :
setState(() { //Remove this line
try {
searchTextField.textField.controller.text = item;
return;
} on Exception catch (exception) {
Global.writeErrorLog(true, "Autocomplete text view ", exception.toString());
}
}); ////Remove this line also
Because, Flutter call the build method again when we call setState((){}); method.
Enjoy.