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";
So I have a translator widget that was taken from Google Translate and it all works fine. When the input text is translated, the results are in the form of text (not textfield). In the case where I write a long paragraph for translation, I could implement "keyboardType: TextInputType.multiline, maxLines: null," for textfield but I do not know how to do the same for text. Is there something for text widget too?
Currently, the translator widget looks like this:
I want the grey area to have multiple lines where I can scroll through it.
Code:
Widget build(BuildContext context) {
return Container(
height: 350.0,
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.only(left: 16.0),
child: TextField(
keyboardType: TextInputType.multiline,
maxLines: null,
focusNode: this.widget.focusNode,
controller: this._textEditingController,
onChanged: this._onTextChanged,
decoration: InputDecoration(
contentPadding: const EdgeInsets.symmetric(vertical: 10),
border: InputBorder.none,
suffixIcon: RawMaterialButton(
onPressed: () {
if (this._textEditingController.text != "") {
this.setState(() {
this._textEditingController.clear();
this._textTranslated = "";
});
} else {
this.widget.onCloseClicked(false);
}
},
child: new Icon(
Icons.close,
color: Colors.grey,
),
shape: new CircleBorder(),
),
),
),
),
),
Divider(),
Flexible(
child: Container(
color: Colors.grey,
margin: EdgeInsets.only(left: 16.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
this._textTranslated,
softWrap: true,
style: TextStyle(color: Colors.blue[700], fontSize: 20),
),
),
),
),
],
),
);
}
You can wrap your Text in a SingleChildScrollView:
Flexible(
child: SingleChildScrollView(
child: Container(
color: Colors.grey,
margin: EdgeInsets.only(left: 16.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
this._textTranslated,
softWrap: true,
style: TextStyle(color: Colors.blue[700], fontSize: 20),
),
),
),
),
),
i have a layout which i am working on but i am very new to flutter what i would like to do is
have a layout as such:
but what i have managed to do so far is this
the code for what i have managed to do is here:
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 3,
child: Container(
padding: EdgeInsets.all(20.0),
color: Colors.cyan,
child: Row(
children: <Widget>[
Checkbox(
value: false,
onChanged: (bool? value) {
setState(() {
print(value!);
});
}, //onChanged
),
Text("Enable 1"),
new Flexible(
child: new TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'username',
),
), //textfield
), //flexible
new Flexible(
child: new TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'password',
),
), //textfield
), //flexible
],
),
) //Container
), //Expanded
Expanded(
flex: 1,
child: Container(
child: ElevatedButton.icon(
icon: Icon(
Icons.save_alt,
color: Colors.green,
size: 24.0,
),
label: Text('Save'),
onPressed: () {
print('pressed');
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.greenAccent),
),
),
),
)
]
)//end of body,
i have no idea on how to achieve my desired output any help would be appreciated
You should use a Column instead of the Row.
Then a Row for the text and the checkbox to be aligned.
Here's an example:
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 3,
child: Container(
padding: EdgeInsets.all(20.0),
color: Colors.cyan,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Checkbox(
value: false,
onChanged: (bool value) {
setState(() {
print(value);
});
}, //onChanged
),
Text("Enable 1"),
],
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: new TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'username',
),
),
), //flexible
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: new TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'password',
),
),
), //flexible
],
),
) //Container
), //Expanded
Expanded(
flex: 1,
child: Container(
child: ElevatedButton.icon(
icon: Icon(
Icons.save_alt,
color: Colors.green,
size: 24.0,
),
label: Text('Save'),
onPressed: () {
print('pressed');
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.greenAccent),
),
),
),
)
])
i cant seem to work my way around this i cant make it scrollable tried all the solution but i am getting errors in every method so decided to post my code here and hope someone will report the code with listview scrollable page same code the current error i am getting is this:
Exception caught by rendering library ═════════════════════════════════
Null check operator used on a null value
The relevant error-causing widget was
ListView
lib\signup.dart:17
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
Null check operator used on a null value
The relevant error-causing widget was
ListView
import 'package:flutter/material.dart';
import 'package:property_records/constraint.dart';
class Signup extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SizedBox(
height: 200.0,
child: ListView(
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/pr.png'),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Register Now",
style: Theme.of(context).textTheme.headline5.copyWith(fontWeight: FontWeight.bold),
),
],
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(right: 5),
child: Icon(
Icons.lock,
color: KPrimaryColor,
),
),
Expanded(
child: TextField(decoration: InputDecoration(hintText: "Your Name")),
)
],
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(right: 5),
child: Icon(
Icons.email,
color: KPrimaryColor,
),
),
Expanded(
child: TextField(decoration: InputDecoration(hintText: "Email Address")),
)
],
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(right: 5),
child: Icon(
Icons.lock,
color: KPrimaryColor,
),
),
Expanded(
child: TextField(decoration: InputDecoration(hintText: "Password")),
)
],
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(right: 5),
child: Icon(
Icons.lock,
color: KPrimaryColor,
),
),
Expanded(
child: TextField(decoration: InputDecoration(hintText: "Confirm Password")),
)
],
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(right: 5),
child: Icon(
Icons.lock,
color: KPrimaryColor,
),
),
Expanded(
child: TextField(decoration: InputDecoration(hintText: "Mobile Number")),
)
],
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(right: 5),
child: Icon(
Icons.lock,
color: KPrimaryColor,
),
),
Expanded(
child: TextField(decoration: InputDecoration(hintText: "Office Name")),
)
],
),
Spacer(),
FittedBox(
child: Padding(
padding: const EdgeInsets.only(bottom: 150),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 36, vertical: 16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: KPrimaryColor,
),
child: Row(
children: [
Text(
"Sign Up",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Icon(
Icons.arrow_forward,
color: Colors.white,
)
],
),
),
),
),
],
),
),
)
],
),
),
);
}
}
You can wrap everything into a SingleChildScrollView
SingleChildScrollView(
child: MyBigMessedView(),
)
Just make sure, that you have phyics: NeverScrollableScrollPhysics() in your nested ListView if you have some.
Also, don't use Expanded as every parent widget.