I am a Flutter beginner. We use the Dart language. How do I create a single radio button with only one country flag and country name? Can anyone help me with this? Thanks in advance!
Row(
children: [
Text('Country & Currency',
style: TextStyle(
fontSize: 15,
color: Color(0xff8712bc),
decorationStyle: TextDecorationStyle.wavy)),
],
),
RadioListTile(
title: Text("Bahrain"),
value: "Bahrain",
groupValue: "bahrain",
onChanged: (value) {
setState(() {});
},
)
You can use Row widget on title.
RadioListTile(
title: Row(
children: [
///use your image
Icon(Icons.flag),
Text("Bahrain"),
],
),
value: "Bahrain",
groupValue: "bahrain",
onChanged: (value) {
setState(() {});
},
),
Related
In flutter, how to create a switch button and text in a row. I tried but didn't get what I wanted. And how to remove the tag inside the custom switch.
import 'package:custom_switch/custom_switch.dart';
bool status = true;
Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 40),
child: CustomSwitch(
activeColor: Color(0xff771ae1),
value: status,
onChanged: (value) {
setState(() {});
},
),
SizedBox(height: 12.0,),
Text('Value : $status', style: TextStyle(
color: Colors.black,
fontSize: 20.0
),)
),
],
),
You can use SwitchListTile widget. For your case, you need to use CupertinoSwitch.
CupertinoListTile(
title: Text("title"),
trailing: CupertinoSwitch(
value: true,
thumbColor: Colors.white,
activeColor: Colors.deepPurple,
// trackColor: ,
onChanged: (value) {},
)),
I know that I can wrap my radio widgets with theme widget but in my case, i use different ways. how to make my radio button have a grey background color when on unselected?
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
RadioListTile<SingingCharacter>(
title: const Text('Akaun Individu', style: TextStyle(fontWeight: FontWeight.bold),),
subtitle: Text('Membuat pembayaran untuk diri sendiri'),
controlAffinity: ListTileControlAffinity.trailing,
value: SingingCharacter.akaunSendiri,
groupValue: _character,
onChanged: (SingingCharacter? value) {
setState(() {
_character = value;
});
},
),
Divider(thickness: 2),
RadioListTile<SingingCharacter>(
title: const Text('Akaun Syarikat', style: TextStyle(fontWeight: FontWeight.bold),),
subtitle: Text('Membuat pembayaran untuk organisasi'),
controlAffinity: ListTileControlAffinity.trailing,
value: SingingCharacter.akaunSyarikat,
groupValue: _character,
onChanged: (SingingCharacter? value) {
setState(() {
_character = value;
});
},
),
],
);
}
}
You can do this with overriding theme data.
Example:
...
body: Center(
child: Theme(
data: Theme.of(context).copyWith(
unselectedWidgetColor: Colors.purple,
),
child: Column(
children: [
RadioListTile<String>(
title: const Text(
'RadioListTile 1',
style: TextStyle(fontWeight: FontWeight.bold),
),
subtitle: const Text('Selected'),
controlAffinity: ListTileControlAffinity.trailing,
value: 'value',
groupValue: 'value',
onChanged: (String? value) {},
),
RadioListTile<String>(
title: const Text(
'RadioListTile 2',
style: TextStyle(fontWeight: FontWeight.bold),
),
subtitle: const Text('Unselected'),
controlAffinity: ListTileControlAffinity.trailing,
value: 'value',
groupValue: 'valuex',
onChanged: (String? value) {},
),
],
),
),
),
...
add this property to your tile tileColor: varUnselect ? Colors.grey : Colors.transparent, varUnselect is get value of unselect radio
I've struggled to remove flutter's DropdownButton left padding so it can match the TextField below. Anyone can help?
Here's my code:
DropdownButton<MenuModel>(
itemHeight: itemHeight,
isExpanded: true,
underline: null,
value: currentValue,
hint: Text(placeholder, style: hintStyle),
style: textStyle,
disabledHint: Text(currentValue?.label ?? placeholder, style: textStyle),
onChanged: widget.modalMode ? null : _onChanged,
items: widget.listMenu.map<DropdownMenuItem<MenuModel>>((MenuModel val) {
return DropdownMenuItem<MenuModel>(
child: Text(val.label),
value: val,
);
}).toList(),
)
finally I've found the problem. So it happen because I wrapped the DropdownButton with ButtonTheme(alignedDropdown: true)
ButtonTheme(
alignedDropdown: true, // it's the culprit
child: DropdownButton<MenuModel>(
itemHeight: itemHeight,
isExpanded: true,
underline: null,
value: currentValue,
hint: Text(placeholder, style: hintStyle),
style: textStyle,
disabledHint: Text(currentValue?.label ?? placeholder, style: textStyle),
onChanged: widget.modalMode ? null : _onChanged,
items: widget.listMenu.map<DropdownMenuItem<MenuModel>>((MenuModel val) {
return DropdownMenuItem<MenuModel>(
child: Text(val.label),
value: val,
);
}).toList(),
),
)
Thanks for the help.
Try below code hope its helpful to you. refer Dropdown here. just change my widget to your widgets
Create variable and List of dropdown:
var selectedCategory;
List categoryDropDownList = [
'One',
'Two',
'Three',
'Four',
];
Your Widget:
DropdownButton(
isDense: true,
isExpanded: true,
hint: Text(
'Select Category',
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
textAlign: TextAlign.center,
),
value: selectedCategory,
items: categoryDropDownList.map<DropdownMenuItem<String>>(
(value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value.toString(),
style: TextStyle(
fontSize: 17,
),
),
);
},
).toList(),
onChanged: (var value) {
setState(
() {
selectedCategory = value;
},
);
},
),
Your result Screen->
I have tried to use the same style as you are using and managed to get that done with the following code. I hope that works for you. I am attaching the screenshot as well of the output.
Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
DropdownButton<String>(
itemHeight: 50,
isExpanded: true,
underline: null,
value: dropdownValue,
hint: const Text('Honorific', style: TextStyle(color: Colors.grey)),
icon: const Icon(Icons.arrow_drop_down),
iconSize: 24,
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>['Honorific']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
TextFormField(
controller: controller,
validator: (value) {
if (value!.isEmpty || !value.contains('#')) {
return 'Please enter a valid email address';
}
return null;
},
textInputAction: TextInputAction.next,
keyboardType: TextInputType.emailAddress,
),
],
),
),
output
I want to set the index of RadioListTile inside the listview.builder but i can't do that how to do it which I want to get the value of this index here is my code
int _value=0;
List valueList=[];
ListView.Builder(itemBuilder:(context,index){
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: RadioListTile<int>(
dense: true,
activeColor: colorsCheck(),
contentPadding:
EdgeInsets.symmetric(horizontal: 1.0),
title: Text(
'Present',
style: TextStyle(
color: Colors.white, fontSize: 12.0),
),
value: 1,
groupValue: _value,
onChanged: (value) {
setState(() {
_value=value;
valueList.add(value);
print('radio button value present ${valueList.toList().toString()}');
});
},
),
),
Expanded(
child: RadioListTile<int>(
contentPadding:
EdgeInsets.symmetric(horizontal: 1.0),
dense: true,
activeColor: colorsCheck(),
title: Text(
'Absent',
style: TextStyle(
color: Colors.white, fontSize: 12.0),
),
value: 2,
groupValue: _value,
onChanged: (value) {
setState(() {
_value=value;
valueList.add(value);
print('radio button value absent ${valueList.toList().toString()}');
});
},
),
),
Expanded(
child: RadioListTile<int>(
dense: true,
activeColor: colorsCheck(),
contentPadding:
EdgeInsets.symmetric(horizontal: 1.0),
title: Text(
'Leave',
style: TextStyle(
color: Colors.white, fontSize: 12.0),
),
value: 3,
groupValue:_value,
onChanged: (value) {
setState(() {
_value=value;
valueList.add(value);
print('radio button value leave ${valueList.toList().toString()}');
});
},
),
),
],
),
}
Row is inside card where 3 radio button is set (present, absent, leave) but when I click it changes all item builder value. I just want to change the value of that radio inside the card which it clicks. other not. here is an image ...
look inside the picture where the leave radio button is set only top value but it set all.
set index in radiotilelist inside listview.builder
currentStatus = List<int>.filled(data.length, initialValue);
groupValue: currentStatus[index];
currentStatus[index] = newStatus
I'm making a Terms and Conditions agreement and I want this sentence to be highlighted and clickable, when clicked it should take the user to another page in the app where they can read the agreement. I'm having trouble creating something that's both clickable and highlighted.
Here is my code:
CheckboxListTile(
value: checkboxValue,
onChanged: (val) {
if (checkboxValue == false) {
setState(() {
checkboxValue = true;
});
} else if (checkboxValue == true) {
setState(() {
checkboxValue = false;
});
}
},
subtitle: !checkboxValue
? Text(
'Required.',
style: TextStyle(color: Colors.red),
)
: null,
title: new Text(
'I agree to the Terms and Conditions.',
style: TextStyle(fontSize: 14.0),
),
controlAffinity: ListTileControlAffinity.leading,
activeColor: Colors.green,
),
```
Wrap your Text widget with a GestureDetector(). See code below
CheckboxListTile(
value: checkboxValue,
onChanged: (val) {
setState(() {
checkboxValue = !checkboxValue;
});
},
subtitle: !checkboxValue
? Text(
'Required.',
style: TextStyle(color: Colors.red),
)
: null,
title: GestureDetector(
onTap: (){
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context){
return Page();
},
),
);
},
child: Text(
'I agree to the Terms and Conditions.',
style: TextStyle(fontSize: 14.0),
),
),
controlAffinity: ListTileControlAffinity.leading,
activeColor: Colors.green,
)
Wrap your text with Inkwell or GestureDetector.
Sample code here:
GestureDetector(
onTap: () { },
child: Text(
"Sample Text",
style: TextStyle(
fontWeight: FontWeight.w800, color: Colors.blue
),
),
)