I would like to align each button next to each text above, but I am kinda stuck.
Each button + text remains in a column. What I want is the individuals being aligned in a row.
Here is the code from the image above:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Radio(
value: 1,
groupValue: id,
onChanged: (val) {
setState(() {
predominant = 'recessiva_aa';
id = 1;
});
},
),
const Text(
'Epistasia Recessiva (aa)',
style: TextStyle(fontSize: 17.0),
),
Radio(
value: 2,
groupValue: id,
onChanged: (val) {
setState(() {
predominant = 'recessiva_bb';
id = 2;
});
},
),
const Text(
'Epistasia Recessiva (bb)',
style: TextStyle(fontSize: 17.0),
),
// ...
Use radio list tiles. They have a title text widget.
RadioListTile(
title: Text('This Works!'),
value: true,
groupValue: //your group value,
onChanged: (value) {
//someLogic;
}),
you can wrap your Radio and Textin a Row, something like
Row(
children: [
const Text(
'Epistasia Recessiva (aa)',
style: TextStyle(fontSize: 17.0),
),
Radio(
value: 2,
groupValue: id,
onChanged: (val) {
setState(() {
predominant = 'recessiva_bb';
id = 2;
});
},
),
// more widgets ...
]
),
Related
I want to put an information button that works just like an AlertDialog() but I'm having problems to put it next to the checkbox text since they're organized inside a Column() and I cannot just put a Row() inside of it.
Here is the code of the checkboxes:
Column (
// ...
RadioListTile(
title: Text('Pelagens de camundongos',
style: TextStyle(
fontSize: 17.0, color: Colors.white)),
value: 1,
groupValue: id,
onChanged: (val) {
setState(() {
predominant = 'recessiva_aa';
id = 1;
});
},
),
const SizedBox(
height: 5.0,
),
RadioListTile(
title: Text('Pelagem em cães labradores',
style: TextStyle(
fontSize: 17.0, color: Colors.white)),
value: 2,
groupValue: id,
onChanged: (val) {
setState(() {
predominant = 'recessiva_ee';
id = 2;
});
},
),
),
Inside of the title of your RadioListTile instead of putting a text widget you can put a row and inside of that row have Text and an IconButton that will pop up your alert dialog when pressed like this
Column(
children: [
RadioListTile(
title: Row(
children: [
Text('Pelagens de camundongos',
style: TextStyle(fontSize: 17.0, color: Colors.white)),
IconButton(
icon: Icon(
Icons.info_outline,
),
onPressed: () {
// code to pop up alert dialog
},
),
],
),
value: 1,
groupValue: id,
onChanged: (val) {
setState(() {
predominant = 'recessiva_aa';
id = 1;
});
},
),
const SizedBox(
height: 5.0,
),
RadioListTile(
title: Row(
children: [
Text('Pelagem em cães labradores',
style: TextStyle(fontSize: 17.0, color: Colors.white)),
IconButton(
icon: Icon(
Icons.info_outline,
),
onPressed: () {
// code to pop up alert dialog
},
),
],
),
value: 2,
groupValue: id,
onChanged: (val) {
setState(() {
predominant = 'recessiva_ee';
id = 2;
});
},
),
],
)
I am trying to add 3 radio buttons with titles in a row in flutter using Radio Button ad ListTile but the title of each radio button is overflowing and is appearing in two lines. How can I make it appear in one line?
Here is Image
Here is the code I am using for displaying 3 tiles.
Padding(
padding: EdgeInsets.only(left: 5, right: 5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Gender",
style: TextStyle(fontSize: 19),),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child:ListTile(
title: const Text('Female'),
leading: Radio(
fillColor: MaterialStateColor.resolveWith((states) => Color(0XFFB63728)),
value: Gender.female,
groupValue: _gen,
onChanged: (Gender? value) {
setState(() {
_gen = value;
});
},
),
),
),
Expanded(
child: ListTile(
title: const Text('Male'),
leading: Radio(
fillColor: MaterialStateColor.resolveWith((states) => Color(0XFFB63728)),
value: Gender.male,
groupValue: _gen,
onChanged: (Gender? value) {
setState(() {
_gen = value;
});
},
),
),),
Expanded(
child:ListTile(
title: const Text('Other'),
leading: Radio(
fillColor: MaterialStateColor.resolveWith((states) => Color(0XFFB63728)),
value: Gender.other,
groupValue: _gen,
onChanged: (Gender? value) {
setState(() {
_gen = value;
});
},
),
),
),
],
)
Add contentPadding property inside ListTile :
ListTile(
contentPadding: EdgeInsets.all(0)
)
contentPadding set 0 remove extra space between leading and title.
For more information : https://api.flutter.dev/flutter/material/ListTile/contentPadding.html
I try to collect data in firestore from my Flutter app. With the following code: my question is how to display a error message when the user didn't choose an item on DropdownMenuItem?
body: Form(
key: _formKeyValue,
child: ListView(
padding: EdgeInsets.symmetric(horizontal: 12.0),
children: <Widget>[
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DropdownButton(
items: _specialite
.map((value) => DropdownMenuItem(
child: Text(
value,
textAlign: TextAlign.center,
style: TextStyle(color: Colors.black),
),
value: value,
))
.toList(),
onChanged: (selectedAccountType) {
print('$selectedAccountType');
setState(() {
medicalType = selectedAccountType;
});
},
value: medicalType,
isExpanded: false,
hint: Text(
'choisissez la spécialité',
style: TextStyle(color: Colors.black),
),
)
],
),
....
....
i used this answer https://stackoverflow.com/a/59746301/15400156 but nothing displayed on screen.
You can make the first menu item called "Select xxx", which is also the default item (index 0), then you can check the index when the user hit "Submit" button.
You can achieve this in different ways.Remove value property from DropDownButton and initialize medicalType with String medicalType;. Then on submit button press, check if medicalType is null or not. Below is the full code.
class MyWidget extends StatefulWidget {
#override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
List<String> _specialite = ["abc", "def", 'ghi'];
String medicalType;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Form(
// key: _formKeyValue,
child: ListView(
padding: EdgeInsets.symmetric(horizontal: 12.0),
children: <Widget>[
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DropdownButton(
items: _specialite
.map((value) => DropdownMenuItem(
child: Text(
value,
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
value: value,
))
.toList(),
onChanged: (String selectedAccountType) {
print('$selectedAccountType');
setState(() {
medicalType = selectedAccountType;
});
},
// value: medicalType,
isExpanded: false,
hint: Text(
'choisissez la spécialité',
style: TextStyle(color: Colors.black),
),
)
],
),
ElevatedButton(
onPressed: () {
if (medicalType == null) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("please choose medical type")));
}
},
child: Text("submit"))
]),
));
}
}
I have three radio buttons so that the user can select their gender. However, only the male radio button is getting highlighted. Even though my console prints other radio buttons when selected, they don't get highlighted on screen. I don't know what to do about it so any help will be really appreciated!
import 'package:flutter/material.dart';
import 'package:vibing/User_Login.dart';
import 'package:vibing/register_user.dart';
import 'package:vibing/register_user.dart';
class UserDetails extends StatefulWidget {
#override
_UserDetailsState createState() => _UserDetailsState();
}
enum Gender{
Male, Female, Others
}
class _UserDetailsState extends State<UserDetails> {
#override
Widget build(BuildContext context) {
final formkey = GlobalKey<FormState>();
String user_name;
String user_age;
int group_value = -1;
Gender _gender = Gender.Male;
final _userName = Container(
padding: EdgeInsets.only(left: 10, right: 10),
child: TextFormField(
autofocus: false,
keyboardType: TextInputType.text,
validator: (value) {
if(value.isEmpty)
{
return 'Field cannot be empty';
}
return null;
},
onSaved: (value)=> user_name = value,
decoration: InputDecoration(
hintText: 'Enter Name',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10)
),
),
),
);
final _userAge = Container(
padding: EdgeInsets.only(left: 10, right: 10),
child: TextFormField(
keyboardType: TextInputType.number,
autofocus: false,
validator: (value) {
if(value.isEmpty)
{
return 'Field cannot be empty';
}
return null;
},
onSaved: (value)=> user_age = value,
decoration: InputDecoration(
hintText: 'Enter Age',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10)
),
),
),
);
final _male = Radio(
value: Gender.Male,
activeColor: Colors.black,
groupValue: _gender,
onChanged: (Gender value){
setState(() {
print(value);
_gender = value;
});
},
);
final _female = Radio(
activeColor: Colors.black,
value: Gender.Female,
groupValue: _gender,
onChanged: (Gender value){
setState(() {
print(value);
_gender = value;
});
},
);
final _others = Radio(
activeColor: Colors.black,
value: Gender.Others,
groupValue: _gender,
onChanged: (Gender value){
setState(() {
print(value);
_gender = value;
});
},
);
return Scaffold(
backgroundColor: Colors.yellow,
body: Container(
key: formkey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Register",
style: TextStyle(fontSize: 64.0, fontWeight: FontWeight.bold),),
SizedBox(height: 50,),
_userName,
SizedBox(height: 20,),
_userAge,
SizedBox(height: 30,),
Row(
crossAxisAlignment: CrossAxisAlignment.center ,
children: <Widget>[
Text(" Gender: ", style: TextStyle(fontSize: 20.0),),
_male,
Text("Male"),
_female,
Text("Female"),
_others,
Text("Others"),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.center ,
children: <Widget>[
FloatingActionButton.extended(
heroTag: "next_button",
backgroundColor: Colors.yellow,
foregroundColor: Colors.black,
onPressed: ()=> Navigator.push(context, MaterialPageRoute(builder: (context)=>UserReg())),
label: Text("Next", style: TextStyle(fontWeight: FontWeight.bold),)
),
SizedBox(width: 230,),
FloatingActionButton.extended(
heroTag: "prev_button",
backgroundColor: Colors.yellow,
foregroundColor: Colors.black,
onPressed: ()=> Navigator.push(context, MaterialPageRoute(builder: (context)=>UserLogin())),
label: Text("Prev", style: TextStyle(fontWeight: FontWeight.bold),)
),
],
),
],
),
),
);
}
}
It doesn't work because you declare state inside the build function. Move it out :
class _UserDetailsState extends State<UserDetails> {
String user_name;
String user_age;
int group_value = -1;
Gender _gender = Gender.Male;
By the way, you can generate widgets for each enum value :
children: <Widget>[
for(var gender in Gender.values)
Radio(
value: gender,
activeColor: Colors.black,
groupValue: _gender,
onChanged: (Gender value){
setState(() {
print(value);
_gender = value;
});
},
);
]
Make sure your minimum SDK version is 2.6.0 or above in the pubspec.yaml
I'm learning Flutter. I have a problem (see image below). I would like to separate the space between Text "sex" and TextField "name". I would also like to bring together RadioListTile, they are very separate. Is it possible to do that? Follow my code
class _AlertDialogWidgetState extends State<AlertDialogWidget> {
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: ListBody(
children: <Widget>[
TextField(
autofocus: true,
decoration: InputDecoration(
contentPadding: new EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
border: OutlineInputBorder(), hintText: "New user"),
onChanged: (text) => widget.name = text,
),
Text(
'Sex',
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold),
),
RadioListTile(
title: Text("Female"),
value: "female",
groupValue: widget.sex,
onChanged: (String value) {
setState(() {
widget.sex = value;
});
},
),
RadioListTile(
title: Text("Male"),
value: "male",
groupValue: widget.sex,
onChanged: (String value) {
setState(() {
widget.sex = value;
});
},
),
RadioListTile(
title: Text("Other"),
value: "other",
groupValue: widget.sex,
onChanged: (String value) {
setState(() {
widget.sex = value;
});
},
),
],
),
);
}
}
Wrap your TextField with Padding to put more space between TextField and Text like this:
Padding(
padding: EdgeInsets.only(top: 15),
child: Text(
'Sex',
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
For RadioListTile, you cannot change the padding of radio, but you could use Radio wrapped with ListTile and set its alignment to have it closer to the title:
ListTile(
title: Align(
child: new Text("Female"),
alignment: Alignment(-1.2, 0),
),
leading: Radio(
value: "female",
groupValue: 'F',
onChanged: (String value) {
setState(() {
widget.sex = value;
});
},
),
)