Can I put the checkbox and textformfield in line with flutter? - flutter

I'm new to flutter, and right now I'm trying to do something similar to this:
img 1.
Where the textformfield is aligned inline with the checkbox, and the checkbox is shrunk at the corner, but the max that I can do is this:
img 2.
Where the checkbox is filling half of the screen, I've tried to expand the textformfield in several ways, like sizedbox, flex and expand, but none of then made the checkbox shrink to the corner and the textformfield expand, the line is always split in the middle.
The actual row code looks like this:
Row(
children: [
Expanded(
child: TextFormField(
style: TextStyle(
fontSize: 20
),
decoration: InputDecoration(
hintText: "Senha",
),
autocorrect: false,
obscureText: true,
),
),
Flexible(
child: SizedBox(
width: 10,
child: Checkbox(value: true, onChanged: (value){}),
)
)
],
),
Is there any way for me to do this?
Do I have to use a container or something like that?
Any help would be appreciated.

You can use CheckboxListTile class.
CheckboxListTile(
title: const Text('Title'),
value: value,
onChanged: (value) {
print(value);
},
);
let me know if it work for you.

I've managed to do it using flex property, as the following code shows:
Row(
children: [
Expanded(
flex: 11,
child: TextFormField(
style: TextStyle(
fontSize: 20
),
decoration: InputDecoration(
hintText: "Usuario",
),
autocorrect: false,
obscureText: true,
),
),
Flexible(
child: SizedBox(
width: 10,
child: CheckboxListTile(
value: true,
onChanged: (value) {
},
),
)
)
],
),

Related

How do I align a TextFormField and Text widget inside a row in Flutter?

I am new to flutter, I would like to align the text widget shown in the screen shot to the bottom of the row so it is on the same line as the text form field. I would like to move "Kilos" to the bottom of the row.
Here is the code:
return Row(
children: [
Flexible(
child: TextFormField(
decoration: InputDecoration(labelText: label),
keyboardType: _getKeyboardType(),
validator: (value) => _getFormValidator()(value),
onSaved: (value) { saveAction(formItem,value); },
onTap: () {print(TextInputType.emailAddress);},
),
),
Text('Kilos',style: TextStyle(backgroundColor: Colors.red),)
],
);
I have tried wrapping the Row and the Text widgets within an Align widget.
You can achieve this with Stack..
here is sample code.
Stack(
children: [
TextFormField(
decoration: const InputDecoration(
hintText: 'Enter a search term'
),
),
Positioned(
right: 0,
bottom: 0,
child: Text(
'Kilos',
style: TextStyle(backgroundColor: Colors.red),
))
],
),
You can try with intrinsic height and make your crossAlignment.end
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Flexible(
child: Align(
alignment: Alignment.topLeft,
child: TextFormField(
decoration: InputDecoration(labelText: "label"),
/* keyboardType: _getKeyboardType(),
validator: (value) => _getFormValidator()(value),
onSaved: (value) {
saveAction(formItem, value);
},*/
onTap: () {
print(TextInputType.emailAddress);
},
),
),
),
Text(
'Kilos',
style: TextStyle(backgroundColor: Colors.red),
)
],
),
)
Output:

Issue with Login form Layout in Flutter

I'm making a login form in Flutter, I'm using a ListView that has a Container as a child and it's child is a Stack widget which has Positioned children. Because of the Stack, I have to have a bound height, so hence the Container widget, which I gave the height: height: MediaQuery.of(context).size.height * 1.2. If I remove the * 1.2 my Button and and Text widget don't show up, and when I click on the login with * 1.2, my validator pops up, red warning signs shows that your info is entered incorrectly, so I can't see the button anymore. Example in pictures:
This is with height: MediaQuery.of(context).size.height * 1.2
Then I try to login, validator pops, and now I can't see the button nor the text and link below the button:
The problem I am facing is, how do I layout this login form that can only be scrollable as far as it needs, so I don't have empty space after the Button, just to spread the form so it is visible, not get something like this if I increment the height of the Container?
Code:
ListView(
shrinkWrap: true,
children: [
Container(
height: MediaQuery.of(context).size.height * 1.6,
child: Stack(
children: [
Positioned(
width: MediaQuery.of(context).size.width,
top: MediaQuery.of(context).size.width * 0.1,
child: Image.asset(
'assests/images/loginform.png',
scale: 2.5,
height: 60,
width: 119,
),
),
Positioned(
width: MediaQuery.of(context).size.width,
top: MediaQuery.of(context).size.width * 0.35,
child: Padding(
padding: const EdgeInsets.only(left: 24.0, right: 25.0),
child: Column(
children: <Widget>[
Form(
key: _registrationFormKey,
child: Column(
children: [
TextFormField(
textAlign: TextAlign.start,
onChanged: (value) {
context.read<User>().name = value;
},
decoration: kTextFieldDecoration.copyWith(
hintText: 'Full name'),
validator: (thisValue) {
if (thisValue.isEmpty) {
return 'Please enter your full name';
}
return null;
},
),
SizedBox(
height: 24.0,
),
TextFormField(
keyboardType: TextInputType.phone,
textAlign: TextAlign.start,
onChanged: (value) {
context.read<User>().phoneNumber = value;
},
decoration: kTextFieldDecoration.copyWith(
hintText: 'Phone number'),
validator: _validateMobile,
),
SizedBox(
height: 24.0,
),
TextFormField(
keyboardType: TextInputType.streetAddress,
textAlign: TextAlign.start,
onChanged: (value) {
context.read<User>().address = value;
},
decoration: kTextFieldDecoration.copyWith(
hintText: 'Address'),
validator: (thisValue) {
if (thisValue.isEmpty) {
return 'Please enter your address';
}
return null;
},
),
SizedBox(
height: 24.0,
),
TextFormField(
keyboardType: TextInputType.text,
textAlign: TextAlign.start,
onChanged: (value) {
context.read<User>().companyName = value;
},
decoration: kTextFieldDecoration.copyWith(
hintText: 'Company name'),
validator: (thisValue) {
if (thisValue.isEmpty) {
return 'Please enter your company name';
}
return null;
},
),
SizedBox(
height: 24.0,
),
TextFormField(
keyboardType: TextInputType.text,
textAlign: TextAlign.start,
onChanged: (value) {
context.read<User>().website = value;
},
decoration: kTextFieldDecoration.copyWith(
hintText: 'Website name'),
validator: _validateWebsite),
SizedBox(
height: 24.0,
),
TextFormField(
keyboardType: TextInputType.emailAddress,
textAlign: TextAlign.start,
onChanged: (value) {
context.read<User>().email = value;
},
decoration: kTextFieldDecoration.copyWith(
hintText: 'E-mail address'),
validator: _validateEmail,
),
SizedBox(
height: 24.0,
),
TextFormField(
keyboardType: TextInputType.text,
obscureText: _obscureText,
textAlign: TextAlign.start,
onChanged: (value) {
context.read<User>().password = value;
},
decoration: kTextFieldDecoration.copyWith(
hintText: 'Password',
suffixIcon: IconButton(
icon: const Icon(Icons.visibility_outlined),
onPressed: _togglePassVisibility,
),
),
validator: _validatePassword,
),
],
),
),
FormField<bool>(
// 1
initialValue: _agree,
builder: (FormFieldState<bool> state) {
// 2
return Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Checkbox(
// 3
value: state.value,
onChanged: (bool val) => setState(() {
// 4
_agree = val;
// 5
state.didChange(val);
}),
),
const Text('I agree with'),
TextButton(
onPressed: () {},
child: Text('Terms and conditions'),
),
],
),
// 6
state.errorText == null
? Text("")
: Text(state.errorText,
style: TextStyle(color: Colors.red)),
],
);
},
// 7
validator: (val) => _validateTerms(_agree),
),
AlarmButtons(
buttonColour: Color(0xFF29ABE2),
buttonText: 'CREATE ACCOUNT',
buttonTextColour: Colors.white,
buttonBorderSide: Colors.white,
onButtonPress: () async {
if (_registrationFormKey.currentState.validate()) {
signUpToCognito(context);
Navigator.pushNamed(
context, ConfirmRegistrationScreen.id);
}
},
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Already have an account?'),
TextButton(
onPressed: () {
Navigator.pushNamed(context, LoginScreen.id);
},
child: Text('Log in'),
),
],
),
],
),
),
),
],
),
)
],
)
Thanks in advance for the help and suggestions!
there are a couple mistakes (or at least optimizations) in your code. I will go over them one by one:
If you have a small number of children that need to be scrolled, it is better to use a SingleChildScrollView with a Column instead of a list view. ListView builds its children lazily - that is, it only builds widgets that are visible on the screen. If you have only a handful of widgets with no complex animations, then you don't really need that. SingleChildScrollView is more flexible that a ListView.
SingleChildScrollView(
child: Column(
children: [...]
)
)
It seems that you want the image to be on the background with the form validation on top of it. For that, you used a Stack and a Column as children to a ListView. Instead, have the Stack as a parent, with both the ListView and the image as children to the Stack. Now this might produce an error, as the ListView might expand infinitely. A simple solution is to wrap it within a Positioned widget with all its sides set to zero.
Stack(
children: [
BackgroundImageWidget(),
Positioned(
top: 0, bottom: 0, left: 0, right: 0, // or width: screenWidth, height: screenHeight,
child: ListView(...),
)
]
)

Flutter: ListTile width

I have this code displaying 2 ListTiles in the same line:
Row(
children: <Widget>[
Flexible(
child: ListTile(
leading: Icon(Icons.call),
title: TextFormField(
controller: _phoneNumberController,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
hintText: translate('contact_list.number')),
validator: (value) {
return Helpers.checkInput(value);
},
),
),
),
Expanded(
child: ListTile(
title: TextFormField(
controller: _phoneNumberController,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
hintText: translate('contact_list.number')),
validator: (value) {
return Helpers.checkInput(value);
},
),
),
),
],
),
Both of them are taking 50% of the space but I'd need the first one taking a fixed width.
What I'm trying to archive is display a telephone number input with its phone code on the left (and that needs to be smaller)
This could be a possible solution for what you are looking for:
Row(
children: <Widget>[
ConstrainedBox(
constraints: BoxConstraints(
/// Just an example, but this makes sure, that since you set a fixed width like 300.0, on small screens this won't get too big. For example by setting a maxWidth constraint like this, its width will be 300.0, but at max as big as 1 / 3 of the screen width so it gets smaller on small screen sizes
maxWidth: MediaQuery.of(context).size.width / 3,
),
child: SizedBox(
/// Enter your fixed width here, 300.0 ist just an example
width: 300.0,
child: ListTile(
leading: Icon(Icons.call),
title: TextFormField(
controller: _phoneNumberController,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
hintText: translate('contact_list.number')),
validator: (value) {
return Helpers.checkInput(value);
},
),
),
),
),
Expanded(
child: ListTile(
title: TextFormField(
controller: _phoneNumberController,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
hintText: translate('contact_list.number')),
validator: (value) {
return Helpers.checkInput(value);
},
),
),
),
],
),

Cannot set focus to the TextField inside ExpansionTile programmaticaly

I have an ExpansionTile with a TextField inside and trying to set the focus to this text field when user expands the tile. But for some reasons I can't get it working.
Here is the code:
ExpansionTile(
key: PageStorageKey<String>("notes_key"),
title: Text(
"Notes",
style: TextStyle(color: Colors.indigo),
),
onExpansionChanged: (expanded){
if(expanded){
FocusScope.of(context).requestFocus(_notesFocusNode);
_notesController.value = _notesController.value.copyWith(text: _notes);
} else {
_notesFocusNode.unfocus();
}
},
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
),
textInputAction: TextInputAction.newline,
style: TextStyle(color: Colors.black),
keyboardType: TextInputType.multiline,
focusNode: _notesFocusNode,
controller: _notesController,
key: PageStorageKey("notes_field_key"),
minLines: 1,
maxLines: null,
onChanged: (value) => _notes = value,
),
),
IconButton(
icon: Icon(Icons.done),
color: Colors.teal,
onPressed: () => _notesFocusNode.unfocus(),
),
],
),
],
)
Any help appreciated.
For a bigger context, the text field is not inside any form. The provided piece of code lays inside the bigger one, where it is wrapped in the ListView. Probably I need to have some parent focus scope in my view?
The TextFormField is not yet available to get Focus when you expand the Tile. It only becomes available after a few milliseconds of the animation starting. Since you don't have a way to know when the animation has finished, you can make a workaround by adding a delay. I would advise a minimum of 200 milliseconds so that the animation doesn't stagger but the TextFormField gets focus:
Future.delayed(Duration(milliseconds: 200), (){
FocusScope.of(context).requestFocus(_notesFocusNode);
});

TextFormField Enable/Disable According to Radio Button checked Flutter

How can i Enable/Disable TextFormField According to radio button when checked in flutter ?
new Text('Allpages? :', style: new TextStyle(height: 1.0, fontSize: 15.2, fontWeight: FontWeight.bold,)),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Radio(
value: 0,
groupValue: _printAllValue,
onChanged: _setPrintAllValue,
),
new Text('Yes'),
new Radio(
value: 1,
groupValue: _printAllValue,
onChanged: _setPrintAllValue,
),
new Text('No'),
],
),
new Padding(padding: new EdgeInsets.all(5.0)),
new Text('Start and End pages :', style: new TextStyle(height: 1.0, fontSize: 15.2, fontWeight: FontWeight.bold,)),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Container(
width: 200,
child: new TextFormField(
style: TextStyle(color: Colors.black87),
textInputAction: TextInputAction.done,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
labelText: 'Start Page',
),
),
),
new Container(
width: 200,
child: new TextFormField(
style: TextStyle(color: Colors.black87),
textInputAction: TextInputAction.done,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
labelText: 'End Page',
),
),
),
],
),
new Padding(padding: new EdgeInsets.all(10.0)),
I need to 'Start Page', 'End Page' to be activated when check the No radio Button and deactivated when yes radio button checked
You can wrap your TextFormField inside AbsorbPointer and handle absorb property like:
bool _disable = false; // set this to false initially
AbsorbPointer(
absorbing: _disable, // true makes TextFormField disabled and vice-versa
child: TextFormField(),
)
Whenever you want to disable above field, you can change its property and actually fetch the value from your Radio and assign it to _disable
Edit:
There is a property in TextFormField, you can change that
TextFormField(
enabled: !_disable, // set to false to disable it.
),