After searching and several attempts, I did not find a way to increase the RadioListTile Radio(icon) Size in width, height and thickness
Is there a way to do that?
you could use the dense property like this:
RadioListTile(
dense: false, // Set to true for a smaller widget
contentPadding: EdgeInsets.symmetric(horizontal: 24.0, vertical: 8.0), // Increase or decrease the padding as needed
title: Text('RadioListTile'),
value: 1,
groupValue: 1,
onChanged: (value) {},
);
You can use ListTile instead of RadioListTile for increase size of Radio button as below code
ListTile(
leading: Transform.scale(
scale: 1.5,
child: Radio(
value: false,
groupValue: 0,
onChanged: (value) {},
),
),
title: Text('RadioListTile'),
),
Otherwise you have to make custom Radio button as per your requirement
Related
I'm building a Flutter Web App and am hacking the appbar for my navigation. I'm creating a dropdown menu to give some more options, only I want the arrow icons to be uniform and not change the spacing. This is an example of what I want:
And this is what I have:
It's subtle but also annoying me. This is the code I have for each dropdownbutton:
return DropdownButtonHideUnderline(
child: DropdownButton<String>(
isExpanded: false,
alignment: Alignment.center,
iconSize: 15,
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
// elevation: 16,
style: TextStyle(
color: Theme.of(context).colorScheme.primary,
fontFamily: GoogleFonts.lora().fontFamily,
),
onChanged: (String? value) {
// This is called when the user selects an item.
setState(() {
dropdownValue = value!;
});
},
I tried wrapping them in a sized box with equal height and width, but that also didn't work, this is the closest I've gotten them.
So I have two SwitchListTiles on my modal Page, and the problem is that the text doesn't fit into it. (it takes 3 lines, but should 1)
How can I make it to be in one single line, without decreasing it's font size
child: SwitchListTile(
value: state.filter.flagId == null ? false : true,
onChanged: (newValue) =>
context.read<FilterBloc>().add(HotPressed(newValue)),
title: Text(
AppLocalizations.of(context)!.hotAdds.capitalize(),
style: FlutterFlowTheme.dark50016.copyWith(),
),
tileColor: FlutterFlowTheme.white,
activeColor: FlutterFlowTheme.primaryColor,
dense: true,
controlAffinity: ListTileControlAffinity.trailing,
),
I was thinking that the possible answer could be to decrease the distance between tile, but don't know how to do it
Just add "maxLines: 1" to Text widget
title: Text(
AppLocalizations.of(context)!.hotAdds.capitalize(),
style: FlutterFlowTheme.dark50016.copyWith(),
maxLines: 1,
),
There is default padding on the outer edges and also between the text and the switch. From what I can see the outer padding (the padding to the right of the switch and to the left of the text) defaults to 16. You can change this by adding contentPadding as an input to SwitchListTile and set the value to something smaller than 16:
contentPadding: EdgeInsets.symmetric(horizontal: 5),
But I'm not sure if you can change the padding between the text and the switch.
wrap your text widget to Flexible and trim() your text to avoid enter(\n) as string. maxLines =1.
title: Flexible(
child: Text(
AppLocalizations.of(context)!.hotAdds.capitalize().trim(),
style: FlutterFlowTheme.dark50016.copyWith(),
maxLines: 1,
),
),
I need to remove the space between checkbox and title but i cant able to reduce the space
here is my code
Expanded(
//width: 30,
child: CheckboxListTile(
checkColor: Colors.white,
activeColor: PRIMARY_COLOR,
title: Text('Select All',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.black)),
value: _selectAll,
dense: true,
contentPadding: EdgeInsets.fromLTRB(0, 0, 0, 0),
controlAffinity: ListTileControlAffinity.leading,
onChanged: (bool value) {
}
}
setState(() {});
}),
),
here is the image how it is coming
How to reduce the space
You need to create a custom widget in order to resolve your problem, because if you're using the CheckboxListTile the way it is, you're gonna have to add more contentPadding to your widget in order to make the gap smaller and by default, I see that it has a default padding between the actual checkbox and the text widget ... I personally, don't know why you're trying to squeeze more space from this thing, because in documentation it says clearly that CheckboxListTile acts just like a ListTile, which in my knowledge it takes all the space available in a row and the padding between items in your widget will be a little bit bigger. Also your widget is wrapped in an Expanded widget which also take the whole space available. So in conclusion you either use it as the way it is intended, or you can create a custom widget that will bennefit your problems.
This is strange, the Wrap widget, containing FilterChips, is centering inside it's parent a ExpansionPanel. I've tried wrapping the Wrap Widget in a Flexible widget, no reaction, I've tried wrapping in an Expanded widget, no reaction.
There doesn't appear to be a property on the Expansion panel to left align body: Widgets. It's important because some of the ExpansionPanels are aligning to the left, when the Wrap widget has been forced to full width, but others, like pictured, center. Ultimately I'm going to wrap all the children widgets in the ExpansionPanel in a Padding widget, but I need the child Wrap widgets aligning left first.
bool travelSack;
ExpansionPanelRadio backpackingPanel = ExpansionPanelRadio(
value: "Backpacking",
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
leading: FaIcon(
FontAwesomeIcons.globeEurope,
size: 19,
),
title: Text("Backpacking"),
);
},
body: Expanded(child:
Wrap(spacing: 4, children: [
FilterChip(
showCheckmark: false,
label: Text('Travel rucksack'),
labelStyle: TextStyle(
color: travelSack ? Colors.black : Colors.white,
),
selected: travelSack,
onSelected: (bool selected) {
setState(() {
travelSack = !travelSack;
});
},
selectedColor: Colors.green.shade500,
backgroundColor: Colors.grey.shade500,
),
])
);
I'm Scoobied, help appreciated.
I solved this by nesting the Wrap widget inside an Align widget:
Align(
alignment: Alignment.topLeft,
child: Wrap(....
I do not like my solution, I'm wary of so much nestings effect on performance and sprawling code harms legibility, so if you have a better solution I'm all eyes. x Sam.
Wrap has an alignment property that you can use to align the children.
https://api.flutter.dev/flutter/widgets/Wrap/Wrap.html
Wrap(
...
alignment: WrapAlignment.center,
children: [],
),
I had the same problem and resolve with SizedBox:
ExpansionPanelRadio backpackingPanel = ExpansionPanelRadio(
value: "Backpacking",
headerBuilder: (BuildContext context, bool isExpanded) {},
body: SizedBox(
width: double.infinity, // Use when direction: Axis.horizontal
height: double.infinity, // Use when direction: Axis.vertical
child: Wrap(
spacing: 4,
children: [
FilterChip(
showCheckmark: false,
label: Text('Travel rucksack'),
labelStyle: TextStyle(
color: travelSack ? Colors.black : Colors.white,
),
selected: travelSack,
onSelected: (bool selected) {
setState(() {
travelSack = !travelSack;
});
},
selectedColor: Colors.green.shade500,
backgroundColor: Colors.grey.shade500,
),
],
),
),
);
Remember to not use width and height SizedBox property at same time, only one for each Wrap.direction.
Reference
I creating game with single and two players. for selection i want slide look so i have tried with switch method but its look very small. how to increase height and width of switch? is there any way creating look like this is welcome?
new Center(
child:
new Padding(padding:EdgeInsets.all(50.00),
child:
new Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Switch(value: _value, onChanged: (bool value1)
{
_value=value1;
},
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
activeThumbImage: new AssetImage("assets/Images/1.png"),
inactiveThumbImage: new AssetImage("assets/Images/1.png"),
)
],
) ,
),
)
You could wrap your Switch inside a Transform widget and change the scale.
Transform.scale(scale: 2.0,
child: Switch(
value: true,
onChanged: (bool value1){},
),
)
Scale = 1 is the default size , 0.5 half size , 2.0 double size, you can play with the values :)
UPDATE
Now you can also do it using SizedBox + FittedBox
SizedBox(
width: 150,
height: 40,
child: FittedBox(
fit: BoxFit.fill,
child: Switch(
value: true,
onChanged: (bool value1) {},
),
),
),
Don't forget the BoxFit.fill value :)
You can wrapper your Switch widget inside a SizedBox and set width and height to it.
SizedBox(
width: 80,
height: 40,
child: Switch(
value: isChecked,
onChanged: (value) {
//Do you things
}
)
)
The accepted answer using a scale will increase both height and width, if you want to control both height and width
Use it like this
SizedBox(
width: 50,
height: 30,
child: FittedBox(
fit: BoxFit.fill,
child: Switch(
onChanged: (bool value) {
},
),
),
)
Try to CupertinoSwitch, You can copy paste run full code below
You can use Transform.scale and set scale, 1 means normal size, 0.8 means smaller size
Transform.scale(
scale: 0.8,
child: CupertinoSwitch(
value: _switchValue,
onChanged: (bool value) {
setState(() {
switchValue = value;
});
},
),
)
You should put your switch inside a container and give it both a height and a width as per your requirement.
You can simply use Container that are more compatible everywhere.
flutter
Container(
height: //whatever you want
widget: //whatever you want
child: Switch(
value: true,
onChanged: (){
}),
)