Flutter increase height and width of Switch?

Question

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"),

            )
          ],
        )           ,
     ),
    )

I'm also looking for ways to update the active and inactive images to use a canvas/picuture/image instead of having to use a local asset image or a network image, do you know how? — Eradicatore, May 06 '19 at 21:18
Hey Kathir! I think you should mark the answer by diegoveloper as correct, it's very helpful — OlegBezr, Jun 11 '23 at 18:09

diegoveloper · Answer 1 · 2022-03-10T14:28:53.710

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 :)

The solution is good. I was using `SwitchListTile` and there this solution does magnify the title too and makes the UI weird. Anyways +1 because it solved the question asked. — CopsOnRoad, Sep 30 '18 at 07:35

score 1 · Answer 2 · answered Apr 12 '20 at 06:49

1

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
    }
  )
)

answered Apr 12 '20 at 06:49

Dongsheng Sun Noah

43
2

score 1 · Answer 3 · answered Feb 03 '22 at 07:00

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) {
                },
              ),
            ),
          )

score 1 · Answer 4 · answered Dec 22 '22 at 06:01

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;
      });
    },
  ),
)

score -2 · Answer 5 · edited Oct 26 '19 at 11:20

-2

You should put your switch inside a container and give it both a height and a width as per your requirement.

edited Oct 26 '19 at 11:20

Stphane

3,368
5
32
47

answered Oct 26 '19 at 10:54

Parth Mandalia

117
5

score -4 · Answer 6 · answered Apr 12 '20 at 07:01

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: (){

                }),
              )

Flutter increase height and width of Switch?

6 Answers6

Linked