I want to wrap the body inside a SingleChildScrollView widget but for some reason, it is not working. When I wrap the Container inside a SingleChildScrollView widget everything goes away. Any solution?
Scaffold(
body: Container(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Spacer(),
DisplayText(),
Spacer(),
Form(
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your username',
),
textInputAction: TextInputAction.next,
),
TextFormField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your password',
),
),
],
),
),
.
.
.
.
],
),
),
);
You can wrap the entire layout with Column and expand the child using Expanded widget then add SingleChildScrollView. Please remove Spacer, if you need space in-between widgets use SizedBox instead.
Scaffold(
body: Column(
children: [
Expanded(
child: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 10,),
DisplayText(),
SizedBox(height: 10,),
Form(
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your username',
),
textInputAction: TextInputAction.next,
),
TextFormField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your password',
),
),
],
),
),
],
),
),
),
),
],
),
);
Related
This is the design I want to make
This is my current design
I'm new to flutter. My question is how to make the text above the textformfield. I have searched on the internet and tried to do it but still no success. I don't know where else to go to solve my problem. I hope overflow is willing to help me.
This is my code:
Container(
width: double.infinity,
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
SizedBox(
height: 100,
width: 100,
child: Text('First Name'),
),
SizedBox(
width: 200,
child: TextFormField(
style: TextStyle(color: Colors.black),
controller: firstName,
onSaved: (String? value) {
firstName.text = value!;
},
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'First Name',
hintStyle: TextStyle(
color: Colors.black, fontSize: 16),
),
),
),
],
)
],
),
)
Your problem occurs because of wrong widget placement. Notice that you've Row inside a Column, but you don't really use Column's children in order to vertically place 'First Name' text widget.Also the row is basically redundant currently. You can make a Row of Columns I just shared below in order to achieve your desired UI. Try to play with it :)
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(
height: 20,
width: 100,
child: Text('First Name'),
),
SizedBox(
width: 150,
child: TextFormField(
style: const TextStyle(color: Colors.black),
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'First Name',
hintStyle: TextStyle(color: Colors.black, fontSize: 16),
),
),
)
],
),
200px is too big and structure I will prefer
Row
-Expanded
- Column (CrossAxisAlignment.startMainAxisSize.min,)
- Text
- TextFormField
-Expanded
- Column (CrossAxisAlignment.startMainAxisSize.min,)
- Text
- TextFormField
-Expanded
- Column (CrossAxisAlignment.startMainAxisSize.min,)
- Text
- TextFormField
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Row(
children: [
filed(),
filed(),
filed(),
],
),
)
],
),
);
}
Expanded filed() {
return Expanded(
child: Padding(
padding: EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.only(bottom: 20),
child: Text('First Name'),
),
TextFormField(
style: TextStyle(color: Colors.black),
onSaved: (String? value) {},
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'First Name',
hintStyle: TextStyle(color: Colors.black, fontSize: 16),
),
),
],
),
),
);
}
}
To create the TextField you want, you just need to use a Column like this:
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('First Name', style: TextStyle(fontWeight: FontWeight.bold),),
SizedBox(
width: 200,
child: TextFormField(
style: TextStyle(color: Colors.black),
onSaved: (String? value) {
// firstName.text = value!;
},
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'First Name',
hintStyle: TextStyle(color: Colors.black, fontSize: 16),
),
),
)
],
)
The result is:
In the input decoration of TextFormField, use label instead of hintText.
decoration: InputDecoration(
border: OutlineInputBorder(),
label: Text('First Name',
style: TextStyle(color: Colors.black, fontSize: 16),),
),
List item
You use the the property 'Labletext' of TextFormFiled or TextField....
to give the above text of the textformFiled.
just use column widget first children is Text and second children as TextFormField.
I have a dropDownButton populated with a query from my database here I have the users, when I select an item I want to show all the user info in the TextFields below.
Since some of the information should not be edited by hand, I wanted to make some of the fields as containers, so I can't write in them, but some fields should be a TextField so I can edit them. I'm new to flutter so I still don't understand this at full, and I can't find a way to load the info in the TextFields when I change the dropDownButton.
here is the code below:
class UtilizadorPage extends StatefulWidget {
#override
_UtilizadorPageState createState() => new _UtilizadorPageState();
}
class _UtilizadorPageState extends State<UtilizadorPage> {
Utilizador user = Utilizador();
BDLocal db = BDLocal.instance;
Utilizador? _currentUser;
var txt = TextEditingController();
#override
void initState(){
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Utilizadores",
),
),
body: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FutureBuilder<List<Utilizador>>(
future: user.getUtilizadores(),
builder: (BuildContext context,
AsyncSnapshot<List<Utilizador>> snapshot){
if (!snapshot.hasData) return CircularProgressIndicator();
return DropdownButton<Utilizador>(
alignment: Alignment.center,
items: snapshot.data?.map((util) => DropdownMenuItem<Utilizador>(
child: Text(util.nome),
value: util,
)).toList(),
onChanged:(Utilizador? value) {
setState(() {
_currentUser = value;
});
},
isExpanded: false,
//value: _currentUser,
hint: Text('Select User'),
);
}),
]
),
SizedBox(height: 20.0),
Row(
children: [
_currentUser != null
? Expanded(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 1,
child: Container(
child: InputDecorator(
decoration: InputDecoration(
labelText: "Nome",
floatingLabelBehavior:FloatingLabelBehavior.always,
border: OutlineInputBorder(),
),
child: Text(_currentUser!.nome)
),
),
),
SizedBox(width: 10.0),
Expanded(
flex: 1,
child: Container(
child: InputDecorator(
decoration: InputDecoration(
labelText: "ID na BDNuvem",
floatingLabelBehavior:FloatingLabelBehavior.always,
border: OutlineInputBorder(),
),
child: Text(_currentUser!.id_BDNuvem.toString())
),
),
),
]),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 1,
child: TextFormField(
initialValue: _currentUser!.perfil.toString(),
decoration: InputDecoration(
label: Text("Perfil"),
floatingLabelBehavior:FloatingLabelBehavior.always,
border: OutlineInputBorder(),
),
),
),
SizedBox(width: 10.0),
Expanded(
flex: 1,
child: Container(
child: InputDecorator(
decoration: InputDecoration(
labelText: "Numero de Colaborador",
floatingLabelBehavior:FloatingLabelBehavior.always,
border: OutlineInputBorder(),
),
child: Text(_currentUser!.numero.toString())
),
),
),
],
),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 1,
child: Container(
child: InputDecorator(
decoration: InputDecoration(
labelText: "Nome do Funcionario",
floatingLabelBehavior:FloatingLabelBehavior.always,
border: OutlineInputBorder(),
),
child: Text(_currentUser!.nomeFuncionario)
),
),
),
],
),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 1,
child: Container(
child: InputDecorator(
decoration: InputDecoration(
labelText: "Email",
floatingLabelBehavior:FloatingLabelBehavior.always,
border: OutlineInputBorder(),
),
child: Text(_currentUser!.email)
),
),
),
],
),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 1,
child: Container(
child: InputDecorator(
decoration: InputDecoration(
labelText: "Senha",
floatingLabelBehavior:FloatingLabelBehavior.always,
border: OutlineInputBorder(),
),
child: Text(_currentUser!.senha)
),
),
),
],
),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 1,
child: Container(
child: InputDecorator(
decoration: InputDecoration(
labelText: "Ultima Atualizacao",
floatingLabelBehavior:FloatingLabelBehavior.always,
border: OutlineInputBorder(),
),
child: Text(_currentUser!.ultimaAtualizacao)
),
),
),
SizedBox(width: 10.0),
Expanded(
flex: 1,
child: Container(
child: InputDecorator(
decoration: InputDecoration(
labelText: "Atualizado Por",
floatingLabelBehavior:FloatingLabelBehavior.always,
border: OutlineInputBorder(),
),
child: Text(_currentUser!.atualizadoPor)
),
),
),
],
),
],
),
)
: Text("No User selected"),
],
)
],
),
);
}
}
I only have one textField now because I'm still experimenting things.
what I wanted to do is update the value of the text with the info I retrieved from the query for example: _currentUser!.perfil.toString(), which holds a string that represent the type of user
If you've assigned a TextEditingController to Textfield you can simply manipulate value in by
myTextEditingController.text = "new value";
I have an authentication screen like this:
#override
Widget build(BuildContext context) {
final bottom = MediaQuery.of(context).viewInsets.bottom;
return Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Column(
children: <Widget>[
SizedBox(height: 48),
Image.asset(
"assets/images/logo.png",
width: 132,
),
SizedBox(height: 48),
Form(
child: Column(
children: <Widget>[
AuthTextFormField(
icon: Icons.email_outlined,
labelText: 'Email',
keyboardType: TextInputType.emailAddress,
),
AuthTextFormField(
icon: Icons.lock_outline,
labelText: 'Password',
obscureText: true,
),
],
),
),
],
),
),
),
);
}
I have followed this answer, but it still did not work for me. The keyboard still covered the text field. Any idea?
Thank you.
[UPDATE]
I use the code written in the answer above (by Jay Jay). And, this is the screenshot:
Its covered like this:
This Code works fine for me, I have removed the image and added a Container on its place with some height.
Also I have made some changes to your Code,
Scaffold(
resizeToAvoidBottomPadding: true,
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Column(
children: <Widget>[
SizedBox(height: 48),
Container(
color: Colors.blue,
height: 500,
),
SizedBox(height: 48),
Form(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.email), labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.lock_outline),
labelText: 'Password'),
obscureText: true,
),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.email), labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.email), labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.email), labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
),
],
),
),
],
),
),
),
);
After trying it out, I think you should just add a height to your image.asset or better use a Container and specify the image in its decoration property and give the container a fixed height. It should all work correctly.
Here my code which works:
return Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Column(
children: <Widget>[
SizedBox(height: 48),
Container(
height: 300,
color: Colors.red,
),
SizedBox(height: 48),
Form(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
icon:Icon(Icons.email),
labelText: 'Email'
),
keyboardType: TextInputType.emailAddress,
),
TextFormField(
decoration: InputDecoration(
icon: Icon(Icons.lock_outline),
labelText: 'Password'
),
obscureText: true,
),
],
),
),
],
),
),
),
);
Error showing is
Invalid Matrix
I want my submit button and Cancel button as this is Form submission in flutter
My ScrollWidget is scrolling down but my SUBMIT and CANCEL Raised Buttons are getting invisible or not shown.
the code is as follows:
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
autofocus: false,
decoration: InputDecoration(
prefixIcon: Icon(Icons.person_pin),
labelText: 'CompanyName',
hintText: 'Type the company Name',
),
),
),
),
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
autofocus: false,
decoration: InputDecoration(
prefixIcon: Icon(Icons.phone_android),
labelText: 'ModelName',
hintText: 'Type the Model Name',
),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
keyboardType: TextInputType.number,
inputFormatters: [
WhitelistingTextInputFormatter.digitsOnly
],
decoration: InputDecoration(
labelText: 'SerielNumber',
hintText: 'Type the Seriel Number',
prefixIcon: Icon(Icons.view_headline),
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
color: Color(0xff476cfb),
onPressed: () {
Navigator.of(context).pop();
},
elevation: 4.0,
splashColor: Colors.blueGrey,
child: TextField(
maxLines: null,
autofocus: false,
decoration: InputDecoration(
prefixIcon: Icon(Icons.place),
labelText: 'Cancel',
),
),
),
RaisedButton(
color: Color(0xff476cfb),
onPressed: () {
uploadPic(context);
},
elevation: 4.0,
splashColor: Colors.blueGrey,
child: TextField(
maxLines: null,
autofocus: false,
decoration: InputDecoration(
prefixIcon: Icon(Icons.place),
labelText: 'Submit',
),
),
),
],
)
],
),
),
);
}
}
The problem is with your RaisedButton's Child. TextField must have bounded width.
you can use Text widget or Container widget as child of RaisedButton and use Row as child of Container to set title and icon like code below:
RaisedButton(
color: Color(0xff476cfb),
onPressed: () {
Navigator.of(context).pop();
},
elevation: 4.0,
splashColor: Colors.blueGrey,
child: Container(
child: Row(
children: [
Text('submit'),
Icon(Icons.place),
],
)),
),
For a TextField to work in Flutter, you need to give it a length. I've got a form working by wrapping the TextFields in Expandeds but I'd rather have the TextField resize based on the required width so that as the user types, the TextField expands. Here's my form code:
return Row(
children: <Widget>[
Expanded(
child: TextFormField(
keyboardType: TextInputType.number,
initialValue: snapshot.data[0].toString(),
textAlign: TextAlign.center,
decoration: InputDecoration(labelText: "Width", labelStyle: ),
),
),
Expanded(
child: TextFormField(
keyboardType: TextInputType.number,
initialValue: snapshot.data[1].toString(),
textAlign: TextAlign.center,
decoration: InputDecoration(labelText: "Height"),
),
),
],
);
And here is a picture of my form:
Simply add horizontal padding to the TextField like this
return Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(2,
(index) => Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: TextFormField(
keyboardType: TextInputType.number,
initialValue: index == 0 ? "3280" : "2464",
textAlign: TextAlign.center,
decoration: InputDecoration(
labelText: index == 0 ? "Width" : "Height"),
),
),
))),
),
);
You should set width for your text form field
for example:
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 100,
child: TextFormField(
keyboardType: TextInputType.number,
initialValue: "11",
textAlign: TextAlign.center,
decoration: InputDecoration(labelText: "Width"),
),
),
Container(
width: 100,
child: TextFormField(
keyboardType: TextInputType.number,
initialValue: "22",
textAlign: TextAlign.center,
decoration: InputDecoration(labelText: "Height"),
),
),
],
),
),
);
}