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: (){
}),
)
Related
I'd like to use slidable_button found here to set a bar happy hour on or off in my app. It doesn't have an initial position so I need to use two buttons, one to set happy hour on and another to turn it off. Ideally I'd like to have it initialize in either the left position or the right position depending on the current state. Unfortunately the package is very new and the author is not contactable.
Is there a way I could modify this code to set an initial button position left or right?
Here is the code I have so far. I have two buttons in separate rows in a column but have only shown the code for one as they are similar.
Center(
child: SlidableButton(
width: MediaQuery.of(context).size.width / 3,
buttonWidth: 60.0,
color: Colors.green,
buttonColor: Colors.blue,
dismissible: true,
label: Center(child: Text(_user.turnOnString!)),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(''),
Text('Start'),
],
),
),
onChanged: (position) {
if (position == SlidableButtonPosition.right) {_startHappyHour(context, _user);}
},
),
),
switch button would be more suitable for your situation, like lite_rolling_switch, you can set initial value(on/off):
LiteRollingSwitch(
//initial value
value: true,
textOn: 'disponible',
textOff: 'ocupado',
colorOn: Colors.greenAccent[700],
colorOff: Colors.redAccent[700],
iconOn: Icons.done,
iconOff: Icons.remove_circle_outline,
textSize: 16.0,
onChanged: (bool state) {
//Use it to manage the different states
print('Current State of SWITCH IS: $state');
},
),
I want to make my switch look like this:
But i haven't found a way to increase the size of track. Is there any?
It looks like you want to use a CupertinoSwitch.
Cupertino switches are the iOS style switches where the track is larger than the node.
To increase the height of track we have to use constraints and FittedBox.
check this
Container(
// color: Colors.cyanAccent,
constraints: BoxConstraints(
minHeight: 170,
maxHeight: 170,
minWidth: 200,
maxWidth: 200,
),
child: FittedBox(
child: CupertinoSwitch(
value: _on,
onChanged: (value) {
setState(() {
_on = value;
});
print(value);
},
),
),
),
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
This might be just a simple problem but I can't figure it out somehow right now. I am using the Flutter xslider https://pub.dev/packages/flutter_xlider vertically with values from 0 to 90. When I am dragging the slider it repaints a line depending on the value of the slider and simultaneously it changes the numeric value in a TextField. This once worked but after adding the TextField and updating all the components (Flutter. Dart. Packages. AndroidStudio) I have the following problem:
because of the line setState(() { }); in onDragging the value of the slider always remains 0 and snaps back after the dragging is finished. if I leave out the setState method the slider works however my line gets of course not painted. what am I doing wrong? does it has something to do with the surrounding components while building? or is there another reason?
UPDATE: i found the solution. I now update the values property by myself such as values: [sliderValue] whereas sliderValue is a double initialized once and then updated within the onDragging. its strange that this is never suggested inside the documentation
body: Column(
children: [
new Padding(
padding: new EdgeInsets.all(15.0),
),
angleTextQuestion,
new Padding(
child: Column(children:[ TextField( controller: txtAngleC,
keyboardType: TextInputType.number,
onChanged: (text) {
double angle = double.parse(text);
if(angle >= 0 && angle <= 90) {
_angleAirplane = double.parse(text);
setState(() {});
}
},),
Text("(type in a value between 0 - 90)")
]),
padding: new EdgeInsets.all(15.0),
),
Expanded( child: new Row( children: [
new Padding(
padding: new EdgeInsets.all(20.0),
),
Expanded( child: new SizedBox(
height: 250,
width: 50,
child: FlutterSlider(
values: [0],
rangeSlider: false,
max: 90,
min: 0,
rtl: true,
step: FlutterSliderStep(step: 1.0),
axis: Axis.vertical,
tooltip: FlutterSliderTooltip(
textStyle: TextStyle(fontSize: 14, color: Colors.lightBlue),
),
onDragging: (handlerIndex, lowerValue, upperValue) {
_angleAirplane = lowerValue;
txtAngleC.text = _angleAirplane.toString();
setState(() { });
},
))),
Text(_angleAirplane.toString()),
new Padding(
padding: new EdgeInsets.all(10.0),
),
Expanded( child: new CustomPaint(
foregroundPainter: new AnglePainter(
angle: _angleAirplane
)))
]
)),
]
),
```
change values:[0] to this
values: [_angleAirplane]
this happens because there is a setState inside your onDragging method and redraw the slider with 0 value.
We have a list with 20+ elements that we have to show in a dropdown. The problem is that when we deploy the dropdown, the list covers all the screen. We want to reduce the number of shown elements to about 5 or 6 and be able to scroll down the rest of the list.
We would also like to know if it's possible that the dropDownMenuItems deploy under the dropDownButton.
We have tryed doing ".toList().sublist(0,5)," but this way didn´t allow us to scroll.
Widget _dropdown() {
return new Container(
width: MediaQuery.of(context).size.width * 35 / 100,
height: MediaQuery.of(context).size.height * 6 / 100,
decoration: BoxDecoration(
backgroundBlendMode: BlendMode.darken,
),
child: Theme(
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: new DropdownButton(
hint: Text(
'HINT TEXT',
),
value: selected_item,
onChanged: (newValue) {
setState(
() {
selected_item = newValue;
},
);
},
isDense: false,
isExpanded: true,
items: data.map((location) {
return new DropdownMenuItem<String>(
child: new Container(
child: Align(
alignment: Alignment.centerLeft,
child: new Text(
location.toUpperCase(),
),
),
),
value: location,
);
}).toList(),
),
),
),
),
);
}
Look into this custom DropDown Button. It is the normal Dropdown Button with the possibility to give height to the widget. If you set height = 5* 48.0 (which is the _menuItemHeight) you should only see 5 elements.