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
Related
I want that Cancellation charges and the bottom button remains fixed on screen, while the Choose Seat(s) and passengers should be scrollable. But, whenever I am trying to insert any widget after singlechildscrollview, it is not appearing at the bottom.
As, my column has 3 widgets, a row, singlechildscrollview and button, so my button and top row should remain there and remaining seats and passengers should be scrollable, but I am not able to see the bottom button, while my row working fine, remaining there.
Code -
showCancellationCharges(BuildContext? context) {
final DateTime currentDate = DateTime.now();
if (ticketData!.data!.booking!.boarding!.eta! >
currentDate.millisecondsSinceEpoch)
showModalBottomSheet(
backgroundColor: Colors.white,
context: context!,
builder: (context) => Wrap(
children: [
StatefulBuilder(
builder: (context, stateSetter) => Padding(
padding: MediaQuery.of(context).viewInsets,
child: Container(
//height: MediaQuery.of(context).size.height*0.7,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(top: 5.0, bottom: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Cancellation Charges',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
)
),
IconButton(
icon: Icon(
Icons.close,
color: colorPrimary,
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
),
Container(
height: MediaQuery.of(context).size.height*0.5,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'Choose Seat(s)',
style: TextStyle(color: popUpLightTextColor),
),
),
Column(
children: List.generate(
ticketData!.data!.booking!.seats!.length,
(index) => CancellationItem(
checkBoxState: ticketData!.data!.booking!
.seats![index].selected,
checkBox: (v) => stateSetter(() {
print('seat at index $index $v');
if (v)
totalSeatToCancel++;
else
totalSeatToCancel--;
ticketData!.data!.booking!.seats![index]
.selected = v;
}),
// checkBoxState: data[index.],
imagePath:
'assets/icons/ticket_seat_icon.svg',
title: ticketData!
.data!.booking!.seats![index].code,
)),
),
// CancellationSeatItems(
// data: ticketData.data.booking.seats,
// ),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'Choose Passenger(s)',
style: TextStyle(color: popUpLightTextColor),
),
),
Column(
children: List.generate(
ticketData!.data!.booking!.passengers!.length,
(index) => CancellationItem(
checkBoxState: ticketData!.data!.booking!
.passengers![index].selected,
checkBox: (v) => stateSetter(() {
if (v)
totalPassengerToCancel++;
else
totalPassengerToCancel--;
print('passenger at index $index $v');
ticketData!.data!.booking!
.passengers![index].selected = v;
}),
imagePath: (ticketData!.data!.booking!
.passengers![index].gender ==
'MALE')
? 'assets/icons/male_icon.svg'
: 'assets/icons/female_icon.svg',
title: ticketData!.data!.booking!
.passengers![index].name,
)),
),
],
),
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Container(
child: ValueListenableBuilder(
valueListenable: isCalculating,
builder: (BuildContext context, bool val, Widget? child) {
return FlatButton(
height: 44,
minWidth: MediaQuery.of(context).size.width,
color: val ? Colors.grey : colorPrimary,
onPressed: () => calculateItem(),
child: Text(
val ? 'Calculating...' : 'Calculate',
style: TextStyle(
color: Colors.white,
fontSize: 16
),
),
);
},
),
),
),
// CancellationPassengerItems(
// data: ticketData.data.booking.passengers,
// ),
],
),
),
),
),
),
],
));
else
_snackbarService.showSnackbar(
message: 'Sorry, ticket can not be cancelled');
}
Actually I solved the problem. I just used isScrollControlled: true, parameter for showModalBottomSheet and it's done.
you may put the listview inside a container with a height
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 ...
]
),
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'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;
});
},
),
)
I'm trying to build out a custom dropdown menu that looks like this:
I've managed to implement the ListTiles and Row of Buttons without the dropdown, but I'm not sure how to nest all of that within a dropdown menu class. This is what I've got so far:
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(),
body: SizedBox.expand(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[0]),
title: Text('All Circles'),
),
Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[1]),
title: Text('Pickup'),
),
Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[2]),
title: Text('Kappa Delta'),
),
Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[3]),
title: Text('Ok Boomer'),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("Join a Circle"),
color: Color(0xffb74093),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red),
),
),
RaisedButton(
child: Text("Create a Circle"),
color: Colors.red,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red),
),
),
],
),
],
),
),
),
);
}
}
I'm not sure you can use ListTile after the items: directly.
If you did run the code above, you're getting errors.
it needs to return DropdownMenuItem instead of ListTile directly
return DropdownMenuItem<String>(
value: value,
child: Row(
children: <Widget>[
CircleAvatar(backgroundColor: Colors.primaries[3]),
Text(value)
],
));
I think the above code would be relatively correct.
this is very simple first create a drop-down menu widget and then give your widget to a drop-down menu item
like this
give value to each drop-down item according to your objects array
DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(
color: Colors.deepPurple
),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[0]),
title: Text(value),
);
})
.toList(),
);