In flutter, How to set a single radio button checked by default, like below?
What I want
,
What I get
Center(
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 30, top: 10),
child: SizedBox(
width: 150, // <-- match_parent
height: 45,
child: RadioListTile(
title: Padding(
padding: const EdgeInsets.only(left: 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
///use your image
Text(
" English",
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
),
],
),
),
value: "English",
groupValue: "english",
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5)),
onChanged: (value) {
setState(() {});
},
tileColor: Color(0xff28e8df),
),
),
You could just set the value and groupValue to be the same.
value: "English",
groupValue: "English",
or
value: "english",
groupValue: "english",
Related
I want to achieve that specific result in UI but I think there is thing i am missing in the Row/column component.
the UI I want to achieve is as follows:
but i am able to do that change:
as you can see there are many gaps between the popup menu button and the right side width.
this the paint shows me:
how much width popUpMenuButton is getting which cause the UI to accommodate that space
i tried the following way to achieve that:
Row(
children: [
Expanded(
flex: 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
date.toString(),
style: cTextStyleBold,
),
const SizedBox(
height: 20,
),
Text(
"${fromTime!} - ${toTime!}",
style: cTextStyle,
),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
children: [
Text(
approvedText!,
style: cTextStyleTimeRegistrationBold,
),
const SizedBox(
width: 10,
),
Transform.scale(
scale: 1.2,
child: SizedBox(
width: 20,
child: Checkbox(
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
fillColor: MaterialStateProperty.all(
Colors.black,
),
checkColor: Colors.white,
shape: const CircleBorder(),
value: approved == "1" ? true : false,
splashRadius: 20,
onChanged: (value) {},
),
),
),
],
),
Row(
children: [
Text(
supervisorShiftText!,
style: cTextStyleTimeRegistrationBold,
),
const SizedBox(
width: 10,
),
Transform.scale(
scale: 1.2,
child: SizedBox(
width: 20,
child: Checkbox(
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
fillColor: MaterialStateProperty.all(
Colors.black,
),
checkColor: Colors.white,
shape: const CircleBorder(),
value: approvedBySupervisor == "1" ?
true : false,
splashRadius: 20,
onChanged: (value) {},
),
),
),
],
),
],
),
Row(
children: [
PopupMenuButton<String>(
position: PopupMenuPosition.under,
onSelected: handleClick,
itemBuilder: (BuildContext context) {
return {'Edit', 'Delete'}.map((String choice)
{
return PopupMenuItem<String>(
value: choice,
child: Text(choice),
);
}).toList();
},
),
],
),
],
),
I want the single selected radio button widget and text widget in the same row. It won't work even if I try to wrap it with the row. I want it like the image below.I want this, But I got this. Thanks in advance!
Column(
children: [
RadioListTile(
title: Padding(
padding: const EdgeInsets.only(left: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
///use your image
Text(
" English",
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
),
],
),
),
value: "English",
groupValue: "english",
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5)),
onChanged: (value) {
setState(() {});
},
tileColor: Color(0xff28e8df),
),
Container(
decoration: BoxDecoration(
color: Color(0xffbebdbd),
border: Border.all(color: Color(0xffbebdbd)),
borderRadius: BorderRadius.circular(5)),
child: Padding(
padding: EdgeInsets.all(10.0),
child: Text("العربية",
style: TextStyle(
fontSize: 17,
color: Color(0xff000000),
fontWeight: FontWeight.bold)))),
],
),
You have to use Row widget and wrap each child in it with Expanded, because RadioListTile want to take the width of its parent, and Row wait its children to render, so it can know its own width.
By using Expanded the Row know that it must take all the possible with, and it's children can fit correctly in it.
try this update i hope it will fix the issue
Container(
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width / 2,
height: 50,
child: RadioListTile(
title: Padding(
padding: const EdgeInsets.only(left: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
///use your image
Text(
" English",
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
),
],
),
),
value: "English",
groupValue: "english",
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
onChanged: (value) {
setState(() {});
},
tileColor: Color(0xff28e8df),
),
),
Container(
width: MediaQuery.of(context).size.width / 2,
decoration: BoxDecoration(
color: Color(0xffbebdbd),
border: Border.all(color: Color(0xffbebdbd)),
borderRadius: BorderRadius.circular(5),
),
child: Padding(
padding: EdgeInsets.all(10.0),
child: Text(
"العربية",
style: TextStyle(
fontSize: 17,
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
),
),
),
],
),
),
How to make a single radio button like the image below.
This is what I tried. Anyone can help?
RadioListTile(
title: Row(
children: [
///use your image
CountryFlags.flag(
'bh',
width: 20,
height: 20,
borderRadius: 5,
),
Text(" Bahrain"),
],
),
value: "Bahrain",
groupValue: "bahrain",
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
onChanged: (value) {
setState(() {});
},
),
You can use MainAxisAlignment.center
RadioListTile(
tileColor: Colors.cyanAccent,
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
///use your image
Icon(Icons.flag),
Text(
"Bahrain",
style: TextStyle(
color: Colors.black,
),
),
],
),
How to navigate to different page for each _buildcard function? Below are my code. I want to navigate to different page using _buildcard function but still get error since it is function and not class. Is there any way to do?
_buildCard(3, "Azzahra\nVilla", 1400),
_buildCard(4, "Afsana\nVilla", 1300)
var rating = 0.0;
_buildCard(img, text, price)
{
return Card(
child: Row(children: <Widget>[
Container(
margin: EdgeInsets.all(8.0),
width: 120.0,
height: 180.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/$img.jpeg"), fit: BoxFit.cover),
borderRadius: BorderRadius.circular(10.0)),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"$text",
maxLines: 2,
textAlign: TextAlign.justify,
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 22.0),
),
SizedBox(height: 5.0),
Text(
"Janda Baik",
style:
TextStyle(fontSize: 11.0, color: Colors.grey),
),
SizedBox(height: 5.0),
SmoothStarRating(
rating: rating,
isReadOnly: false,
size: 14,
filledIconData: Icons.star,
halfFilledIconData: Icons.star_half,
defaultIconData: Icons.star_border,
color: Colors.yellow,
starCount: 5,
allowHalfRating: true,
spacing: 2.0,
onRated: (value) {
print("rating value -> $value");
// print("rating value dd -> ${value.truncate()}");
},
),
]),
Column(children: <Widget>[
Text(
"\RM$price",
style: TextStyle(
fontSize: 22.0, fontWeight: FontWeight.bold),
),
Text(
"per night",
style: TextStyle(fontSize: 11.0, color: Colors.grey),
)
Try this code
return InkWell(
onTap: () {
text=='Azzahra\nVilla'?
Navigator.push(context, MaterialPageRoute(builder: (context)=> AzzahraClassName())):
Navigator.push(context, MaterialPageRoute(builder: (context)=> AfsanaClassName()));
},
child: Card(child:....))
I have a list like shown below. Since I uploaded the menu items, Language, going back part doesn't work. When I click on Flutter inspector, I get an error like the image below.
List<MenuItem> menuItems = [
MenuItem(title: 'Contact' items: [
MenuItem(title: 'WriteUs'),
MenuItem(title: 'Call Center' items: [
MenuItem(title: 'Call Call Center'),
MenuItem(title: 'We will call you'),
]),
MenuItem(title: 'WhatsApp'),
]),
MenuItem(title: 'Language' items: [
MenuItem(title: 'English'),
MenuItem(title: 'Pусский'),
]),
MenuItem(title:'Dealer'),
];
I only use the menu item in two places and their codes are here. When I looked from here,many answers were that scaffold should be added.I tried but it didn't work
renderContent() {
return Scaffold(
body: SafeArea(
child: Padding(
padding: EdgeInsets.only(
left: 22,
right: 22,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
padding: EdgeInsets.only(top: 5, bottom: 5),
onPressed: () {
Navigator.pop(context);
},
child: Row(
children: [
Icon(Cat.x, size: 19, color: HexColor('#2C2C2C')),
],
),
),
...renderMenuItems(context, menuItems),
],
),
),
),
);
}
renderContentWithLogin() {
final topPadding = MediaQuery.of(context).padding.top;
return isLoading
? Container(
color: Colors.white60,
width: double.infinity,
height: double.infinity,
child: Padding(
padding: EdgeInsets.all(10),
child: CupertinoActivityIndicator(
radius: 30,
),
),
)
: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(
left: 22, right: 22, top: topPadding, bottom: 22),
color: HexColor('#FFA300'),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
padding: EdgeInsets.only(top: 5, bottom: 25),
onPressed: () {
Navigator.pop(context);
},
child: Row(
children: [
Icon(Cat.x, size: 19, color: Colors.white),
],
),
),
Text(
me != null ? '${me['firstName']} ${me['lastName']}' : '',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
customer != null ? customer['name'] + ' $countryCode': '',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
],
),
),
Container(
padding: EdgeInsets.all(22),
child: Column(
children: [
...renderCustomers(context),
],
),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1, color: HexColor('#D2D2D2')),
),
),
),
Container(
padding: EdgeInsets.all(22),
child: Column(
children: [
...renderMenuItems(context, menuItems),
],
),
),
],
);
}
And here is my Render mwnu item,
renderMenuSubItems(BuildContext context) {
return selectedMenuItem.items.map(
(item) => MaterialButton(
onPressed: () {
redirectItem(item);
},
padding: EdgeInsets.only(top: 5, bottom: 5),
child: Row(
children: [
Text(
item.title,
style: TextStyle(fontSize: 14),
),
],
),
),
);
}