Display the label on top of the FormBuilderDropdown with border - flutter

I have a FormBuilderDropdown with borders like the below image. But when there is a value in the dropdown, I cannot see the label like in the textbox above the dropdown. I want to show the dropdown with the label with the borders. How it is possible?
Here is the code
FormBuilderDropdown(
name: widget.name,
initialValue: "USA",
decoration: InputDecoration(
labelText: widget.label,
labelStyle: TextStyle(
color: widget.enabled
? Colors.black54
: Theme.of(context).disabledColor),
contentPadding: EdgeInsets.all(16),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Theme.of(context).primaryColor),
),
border: new OutlineInputBorder(borderSide: new BorderSide()),
),
allowClear: widget.allowClear,
hint: Text(widget.hint),
validator: widget.validator,
enabled: widget.enabled,
items: countries
.map((country) => DropdownMenuItem(
value: country['alpha_2_code'],
child: Text(country['en_short_name']),
))
.toList(),
)

In my case, FormBuilderDropdown label is working here.
Do flutter clean and restart the app, it may solve your issue, else check value on items.
Test widget
class _DistrictslayoutState extends State<Districtslayout> {
final districts = List.generate(22, (index) => "item $index");
#override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) => Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FormBuilderDropdown(
name: "name",
initialValue: districts[0],
decoration: InputDecoration(
labelText: "label Text",
labelStyle: TextStyle(
color: true
? Colors.black54
: Theme.of(context).disabledColor),
contentPadding: EdgeInsets.all(16),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Theme.of(context).primaryColor),
),
border: new OutlineInputBorder(
borderSide: new BorderSide()),
),
items: districts
.map(
(e) => DropdownMenuItem(
value: e,
child: Text(e),
),
)
.toList()),
])));
}
}

I am using DropdownButtonFormField which is working pretty well.
DropdownButtonFormField(
// value: 'item1',
hint: Text('select item'),
decoration: InputDecoration(labelText: 'select an item'),
onChanged: (_) {},
dropdownColor: Colors.white,
items: [
DropdownMenuItem(
child: Text('item 1'),
value: 'item1',
),
DropdownMenuItem(
child: Text('item 2'),
value: 'item2',
),
],
),

Related

How to get data in a Flutter-ListView?

I'm building a form for shipping and am able to add as many items as possible. (Adding a Widget in a ListView every time a button is pressed)
My question is, once the form widgets are created and filled, how do I get the information from each TextFormField in each Widget?
Once the information is retrieved I will send it to Firebase.
Here's the code I Have:
import 'package:flutter/material.dart';
import 'package:flutter_login_test/helpers/constants.dart';
class AddItemsToRequest extends StatefulWidget {
const AddItemsToRequest({Key? key}) : super(key: key);
#override
State<AddItemsToRequest> createState() => _AddItemsToRequestState();
}
class _AddItemsToRequestState extends State<AddItemsToRequest> {
List<TextEditingController> controllers = [];
List<Widget> fields = [];
RegExp regExp = RegExp('[aA-zZ]');
int quantity = 0;
double weight = 0;
double height = 0;
Widget itemForm() {
return Column(children: [
Container(
decoration:
BoxDecoration(color: grey, border: Border.all(color: black)),
width: double.infinity,
child: const Center(
child: Text('Package details',
style: TextStyle(
fontWeight: FontWeight.bold,
backgroundColor: grey,
fontSize: 24)),
)),
Row(
children: [
Flexible(
child: TextFormField(
onChanged: (value) {
quantity = value as int;
},
keyboardType: TextInputType.number,
validator: (value) => value!.isEmpty || value is int
? 'Quantity cannot be empty'
: null,
autovalidateMode: AutovalidateMode.onUserInteraction,
decoration: const InputDecoration(
errorStyle: TextStyle(color: Colors.redAccent),
border: OutlineInputBorder(
borderSide: BorderSide(),
borderRadius: BorderRadius.all(
Radius.circular(0.0),
),
),
fillColor: Color.fromARGB(255, 238, 238, 238),
filled: true,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blueAccent, width: 2.5),
),
hintText: "Quantity : "),
),
),
Flexible(
child: TextFormField(
onChanged: (value) {
weight = value as double;
},
keyboardType: TextInputType.number,
validator: (value) => value!.isEmpty || regExp.hasMatch(value)
? 'Weight cannot be empty'
: null,
autovalidateMode: AutovalidateMode.onUserInteraction,
decoration: const InputDecoration(
errorStyle: TextStyle(color: Colors.redAccent),
border: OutlineInputBorder(
borderSide: BorderSide(),
borderRadius: BorderRadius.all(
Radius.circular(0.0),
),
),
fillColor: Color.fromARGB(255, 238, 238, 238),
filled: true,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blueAccent, width: 2.5),
),
hintText: "Weight : "),
),
),
Flexible(
child: TextFormField(
onChanged: (value) {
height = value;
},
validator: (value) => value!.isEmpty ? 'Height cannot be empty' : null,
autovalidateMode: AutovalidateMode.onUserInteraction,
decoration: const InputDecoration(
errorStyle: TextStyle(color: Colors.redAccent),
border: OutlineInputBorder(
borderSide: BorderSide(),
borderRadius: BorderRadius.all(
Radius.circular(0.0),
),
),
fillColor: Color.fromARGB(255, 238, 238, 238),
filled: true,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blueAccent, width: 2.5),
),
hintText: "Height : "),
),
),
],
),
]);
}
Widget _addTile() {
return ElevatedButton(
child: const Icon(Icons.add),
onPressed: () async {
final controller = TextEditingController();
final field = itemForm();
setState(() {
controllers.add(controller);
fields.add(field);
});
});
}
Widget _listView() {
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: fields.length,
itemBuilder: (context, index) {
final item = fields[index];
return Dismissible(
key: ObjectKey(item),
onDismissed: (direction) {
// Remove the item from the data source.
setState(() {
fields.removeAt(index);
});
ScaffoldMessenger.of(context)
.showSnackBar(const SnackBar(content: Text('Package removed')));
},
background: Container(
color: const Color.fromARGB(255, 210, 31, 19),
child: const Center(
child: Text(
'Remove ',
style: TextStyle(
color: white, fontWeight: FontWeight.bold, fontSize: 32),
),
)),
child: Container(
width: double.infinity,
margin: const EdgeInsets.all(5),
child: fields[index],
),
);
},
);
}
Widget _okButton() {
return ElevatedButton(
onPressed: () {
for (var element in fields) {
print(quantity);
}
Navigator.of(context).pop();
print('ok');
},
child: const Text("OK"),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(backgroundColor: blue),
body: Column(
mainAxisSize: MainAxisSize.max,
children: [
Flexible(child: _addTile()),
SizedBox(
height: MediaQuery.of(context).size.height - 200,
child: _listView()),
Flexible(child: _okButton()),
],
),
);
}
}
I think you are expecting this answer. iterate your list of texteditingcontroller and get the text stored in that controllers one by one.
for (int i = 0; i < controllers.length; i++) {
var data = controllers[i].text;
//print or add data to any other list and insert to another list and save to database
}

here my listview is not scrolling dart flutter , please help me iam new to flutter

return Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Stack(
children: [
Positioned(
width: MediaQuery.of(context).size.width,
height: 25.0*SizeConfig.heightMultiplier,
child:Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xff009cba), Color(0xff000e11)])
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(flex:3,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
FittedBox(child: Text("Firm Details",style: GoogleFonts.lato(color: Color(0xfffbfbfb),fontSize: 1.6*SizeConfig.textMultiplier),/*TextStyle(color: Color(0xfffbfbfb),)*/)),
SizedBox(height: 0.5*SizeConfig.heightMultiplier,),
FittedBox(child: Text("Please select the category that best describes your business model.",style: GoogleFonts.lato(color: Color(0xffb3fbfbfb),fontSize: 1.3*SizeConfig.textMultiplier) /*TextStyle(color: Color(0xffb3fbfbfb),fontSize: 12.0)*/,)),
],
),
),
),
Expanded(flex:1,child:Container(
width: 10.0*SizeConfig.widthMultiplier,
height: 10.0*SizeConfig.heightMultiplier,
child:Image.asset("assets/images/firmDetail.png",width:1.0*SizeConfig.widthMultiplier,height: 1.0*SizeConfig.heightMultiplier,),
), ),
],
),
), ),
Positioned(
top:20.0*SizeConfig.heightMultiplier,
child:Container(
width: MediaQuery.of(context).size.width,
height: 500.0*SizeConfig.heightMultiplier,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0*SizeConfig.widthMultiplier),
color: Colors.white,
),
child:new Container(
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
SizedBox(height: 2.0*SizeConfig.heightMultiplier,),
Center(child: Padding(
padding: EdgeInsets.all(1.8*SizeConfig.heightMultiplier),
child: Text("Please select the category that best describes your business model.",style: GoogleFonts.lato(fontWeight: FontWeight.bold),),
)),
horizontalList1,
verticalList, // here vertical list
],
),
),
),
),
],
),
),
);
here in widget verticallist Listview is not scrolling,but when we add Sizedbox after form with fixedheight then it is scrolling but i dont need fixed height for scrollview
Widget verticalList = new Container(
margin: EdgeInsets.symmetric(vertical: 0*SizeConfig.heightMultiplier),
height: MediaQuery.of(context).size.height,
child:ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: [
Form(
key: _formKey,
child:ListView(
shrinkWrap: true,
children: [
Padding(
padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
child: new TextFormField(
validator: (String value) {
if (value.isEmpty) {
return 'PinCode';
} else {
return null;
}
},
keyboardType: TextInputType.phone,
controller: _pincode,
// selectionColor:Color(0xffe4065f),
style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,),
decoration: const InputDecoration(
labelText: "PinCode",
labelStyle: TextStyle(color: Color(0xffe4065f)),
focusColor: Color(0xffe4065f),
hintText:
"PinCode",
hintStyle: TextStyle(fontSize: 13.0),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xffe4065f))),
),
// style: Theme.of(context).textTheme.body1,
),
),
Padding(
padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
child: new TextFormField(
validator: (String value) {
if (value.isEmpty) {
return 'PAN of the unit. is required';
} else {
return null;
}
},
keyboardType: TextInputType.text,
controller: _pan,
// selectionColor:Color(0xffe4065f),
style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,),
decoration: const InputDecoration(
labelText: "PAN of the unit",
labelStyle: TextStyle(color: Color(0xffe4065f)),
focusColor: Color(0xffe4065f),
hintText:
"PAN of the unit",
hintStyle: TextStyle(fontSize: 13.0),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xffe4065f))),
),
// style: Theme.of(context).textTheme.body1,
),
),
Padding(
padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
child: FormField<String>(
builder: (FormFieldState<String> state) {
return InputDecorator(
decoration: InputDecoration(
labelText: "Constitution",
errorStyle: TextStyle(color: Colors.redAccent, fontSize: 1.6*SizeConfig.textMultiplier),
hintText: 'Please select expense',),
isEmpty: _constitutions == '',
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: _constitutions,
isDense: true,
onChanged: (String newValue) {
setState(() {
_constitutions = newValue;
state.didChange(newValue);
});
},
items: _constitution.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value,style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,)),
);
}).toList(),
),
),
);
},
),
),
Padding(
padding:EdgeInsets.only(left:6.0*SizeConfig.widthMultiplier,right: 6.0*SizeConfig.widthMultiplier,top:1.8*SizeConfig.widthMultiplier,bottom: 1.8*SizeConfig.widthMultiplier),
child: new TextFormField(
validator: (String value) {
if (value.isEmpty) {
return 'Line of Activity is required';
} else {
return null;
}
},
keyboardType: TextInputType.text,
controller: _lineActicity,
// selectionColor:Color(0xffe4065f),
style: GoogleFonts.lato(fontSize: 1.6*SizeConfig.textMultiplier,),
decoration: const InputDecoration(
labelText: "Line of Activity",
labelStyle: TextStyle(color: Color(0xffe4065f)),
focusColor: Color(0xffe4065f),
hintText:
"Line of Activity",
hintStyle: TextStyle(fontSize: 13.0),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xffe4065f))),
),
// style: Theme.of(context).textTheme.body1,
),
),
Padding(
padding:EdgeInsets.only(
left: 1.0*SizeConfig.widthMultiplier,
right: 1.0*SizeConfig.widthMultiplier,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FlatButton(
onPressed: () {
//x _postData();
if (!_formKey.currentState.validate()) {
//_formKey.currentState.save();
if (_constitutions == null || _districtSelectedValue == null) {
print("eroore");
Flushbar(
message: "please select required fields",
duration: Duration(seconds: 3),
)..show(context);
} else {
// Every of the data in the form are valid at this point
_formKey.currentState.save();
print(_constitutions);
}
} else {
// submitOtp();
_postData();
}
},
child: Text(
"SAVE & NEXT",
style: GoogleFonts.lato(color: Colors.white),
),
color: Color(0xffe4065f),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
side: BorderSide(color: Color(0xffe4065f)),
),
),
],
),
),
],
),
),
// SizedBox(height: 1000,),
],
)
);
here ,when we add Sizedbox after form with fixedheight then it is scrolling but i dont need fixed height for scrollview im new to flutter please help
You can wrap your main widget with the SingleChildScrollView widget
I would suggest a simple widget hierarchy like
Scaffold
- Container (For the red background)
- Column
- Container (with size for the lorem ipsom text.
- Lorem Ipso Text.
- Expanded (So that it will use the rest of the height automatically.)
- Container (with white back ground and top rounded borders. Makes sure you add circular borders only to top and not to bottom of this container.
- DefaultTabController
- builder (to get different context of the default tab controller if more than one is used in your full app.)
- Column
- TabBar (if the number of categories is large use scrolling here as a property of the tab bar.) wrap in container if you need specific height of the tab bar.
- Expanded
- TabBarView to show the appropriate form.
- SingleChildScrollView
-Column
-Your fields
your list view is wrapper in a container that is very long and has no scroll on it. So it wont scroll as the list fits within that long container.
With list views you want a fixed height. It is the fixed height that is given for the visible parts of the list. Remove the wrapping container or reduce the height so all of it is visible on screen.
Also look at your use of the stack. You might have issues once you fix this with the list scrolling on top of the text "Firm Details" etc.

Flutter: deleting an element from a list doesn't delete corresponding UI element generated with loop

I have a DataTable where i add the DataRows with a for loop to the UI. The loop iterates over a list. Over the UI, it is possible to add and remove items from the list.
Like in the picture, every DataRow has TextFormFields in order to get some inputs.
Here is my problem: When i put some values in the TextFields of the rows and then delete one of those rows, always the last row gets deleted, despite me changing the values in the List and updating the state accordingly.
DataTableRows with TextFormFields
So if i for example try to delete the first row in the picture where the weight is set to 10, the value 10 is still there in the first row after the last row disappeared. Since i update the state when i delete the row, and the inputs all have their initialValues set to correspond with the values in the List, shouldn't the row with the 10 disappear? Or is there something wrong with my thought process?
The print statement show that the right ListItem gets deleted, so i am not quite sure what is happening here.
I am really new to Flutter and Dart, so any help is appreciated!
Here the Code of the Table:
import "package:flutter/material.dart";
import 'package:pr_note_app/definitions/ExerciseSet.dart';
class ExerciseTable extends StatefulWidget {
final String name;
ExerciseTable({Key key, #required this.name}) : super(key: key);
#override
_ExerciseTableState createState() => _ExerciseTableState();
}
class _ExerciseTableState extends State<ExerciseTable> {
var _sets = [new ExerciseSet("-", "", "")];
void popUpMenuButtonItemSelected(value) {
switch (value) {
case "Add Set":
setState(() {
_sets.add(new ExerciseSet("-", "", ""));
});
break;
default:
}
}
void removeSetAt(index) {
print(_sets);
setState(() {
_sets.removeAt(index);
});
print(_sets);
}
#override
Widget build(BuildContext context) {
return Column(
children: [
AppBar(
elevation: 0,
title: TextFormField(
initialValue: widget.name,
cursorColor: Colors.black,
decoration: new InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
hintText: "My New Exercise"),
),
actions: [
PopupMenuButton(
itemBuilder: (BuildContext context) => <PopupMenuEntry>[
const PopupMenuItem(value: "Add Set", child: Text("Add Set")),
const PopupMenuItem(
value: "Remove Exercise", child: Text("Remove Exercise"))
],
onSelected: (value) => popUpMenuButtonItemSelected(value),
),
],
iconTheme: IconThemeData(color: Colors.black),
automaticallyImplyLeading: false,
backgroundColor: Colors.white,
),
// SET NUMBER | LAST | WEIGHT | REPS
DataTable(
showCheckboxColumn: false,
columnSpacing: 30,
columns: const <DataColumn>[
DataColumn(
label: Text(
'Set',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Last',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Weight',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Reps',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(label: Text(""))
],
rows: [
for (var i = 0; i < _sets.length; i++)
DataRow(onSelectChanged: (bool) => print("select $bool"), cells: [
// SET NUMBER
DataCell(Text("${i + 1}")),
// LAST
DataCell(Text("${_sets[i].last}")),
// WEIGHT
DataCell(Container(
width: MediaQuery.of(context).size.width * 0.13,
child: TextFormField(
initialValue: "${_sets[i].weight}",
onChanged: (value) {
setState(() {
_sets[i].weight = value;
});
},
cursorColor: Colors.black,
decoration: new InputDecoration(
isDense: true,
fillColor: Colors.grey[200],
filled: true,
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
)))),
// REPS
DataCell(Container(
width: MediaQuery.of(context).size.width * 0.13,
child: TextFormField(
initialValue: "${_sets[i].reps}",
onChanged: (value) {
setState(() {
_sets[i].reps = value;
});
},
cursorColor: Colors.black,
decoration: new InputDecoration(
isDense: true,
fillColor: Colors.grey[200],
filled: true,
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
)))),
DataCell(Container(
width: MediaQuery.of(context).size.width * 0.13,
child: IconButton(
icon: Icon(Icons.delete),
onPressed: () => removeSetAt(i),
color: Colors.black,
),
))
])
],
)
],
crossAxisAlignment: CrossAxisAlignment.stretch,
);
}
}
The reason is probably that the framework can't figure out which state to assign to the items.
You need to add key to DataRow:
DataKey(
key: ObjectKey(_sets[i]),
...

Flutter: how to set the height of a dropdown in Flutter

I have a dropdown list in my flutter app that has about 30 items in it. When it is selected I see the values but it takes up whole screen.
How can I control the height of the selected list so that it does not overlay the entire screen (maybe show 10 items with a scroll)
Here is my code
Widget buildCategoryFormField(candidateModel) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Job category"),
SizedBox(
height: 5,
),
FormField(
builder: (FormFieldState state) {
return InputDecorator(
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey,
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey,
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue,
),
),
// hintText: "firstname *",
// labelText: "job category",
errorText: state.hasError ? state.errorText : null,
labelStyle: TextStyle(
color: Colors.grey,
),
),
isEmpty: _selectedjobCategory == '',
child: new DropdownButtonHideUnderline(
child: new DropdownButton(
style: TextStyle(fontSize: 18, color: Palette.GREY),
value: _selectedjobCategory,
isDense: true,
onChanged: (String newValue) {
setState(() {
_selectedjobCategory = newValue;
state.didChange(newValue);
});
},
items: JOB_CATEGORY.map((String value) {
return new DropdownMenuItem(
value: value,
child: new Text(value),
);
}).toList(),
),
),
);
},
validator: (val) => validateJobCategory(val),
),
],
);
}
You can define menuMaxHeight on DropdownButton to set maximum height of the expanded dropdown list items.
Expanded(
/// LayoutBuilder can be used to fetch the parent widget's dimensions
child: LayoutBuilder(builder: (context, constraints) {
return Center(
child: DropdownButton<String>(
/// Set dropdown list max height
menuMaxHeight: constraints.maxHeight,
value: dropdownValue,
items: dropdownItems,
),
);
}
)
Adding pagination to the dropdown list is feasible, but this will require creating a custom DropdownButton class. Design-wise, it would be better to break the list into smaller chunks (i.e. by categories) if you'll need to display >50 items in the dropdown.

Flutter Layout Problem. How to get all the fields the same length

I'm developing a registration screen.
I can't get all the fields with the same length in the screen.
They are different types of fields: ListTile, Dropdown button, and Checkbox. I'm new to Flutter. Can I apply any parameter to get the same padding on both sides?
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Register"),
),
body: new Stack(
children: [
new Padding(
padding: const EdgeInsets.only(
left: 16.0, top: 30.0, right: 16.0, bottom: 16.0),
child: ListView(
children: <Widget>[
new ListTile(
leading: const Icon(Icons.person),
title: TextField(
decoration: InputDecoration(
labelText: "Username : ", hintText: " Username ",
errorText: _correctUsername ? null : 'Complete Username',),
onSubmitted: (value) {
_checkInput();
},
controller: _usernameController,
),
),
new FormField(
builder: (FormFieldState state) {
return InputDecorator(
decoration: InputDecoration(
icon: const Icon(Icons.person),
labelText: 'Gender',
errorText: _correctGender ? null : 'Select Gender',),
child: new DropdownButtonHideUnderline(
child: new DropdownButton(
value: _selectedGender,
items: _dropDownMenuGender,
onChanged: changedDropDownGender,
),
),
);
},
),
new ListTile(
leading: const Icon(Icons.person),
title: TextField(
decoration: InputDecoration(
labelText: "About me : ", hintText: " About me "),
controller: _aboutController,
),
),
new FormField(
builder: (FormFieldState state) {
return InputDecorator(
decoration: InputDecoration(
icon: const Icon(Icons.person),
labelText: 'I have a car',
),
child: new Checkbox(
value: _havecar, onChanged: _havecarChanged));
},
),
],
),
),
]
),
);
}
Any help will be appreciated.
Regards.
Replace your ListTiles with just and note the icon property.
TextField(
decoration: InputDecoration(
labelText: "Username : ",
hintText: " Username ",
icon: const Icon(Icons.person),
errorText: _correctUsername ? null : 'Complete Username',
),
onSubmitted: (value) {
_checkInput();
},
controller: _usernameController,
),