CODEWITHSUNDEEP
flutterflutter-layoutflutter-dependenciesflutter-animation
Kathir vtv
Kathir vtv

Reputation: 435

Flutter increase height and width of Switch?

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

            )
          ],
        )           ,
     ),
    )

enter image description here

Upvotes: 31

Views: 45808

Answers (6)

P.J.Radadiya
P.J.Radadiya

Reputation: 1541

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

Upvotes: 3

diegoveloper
diegoveloper

Reputation: 103491

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

Upvotes: 114

Ajay Prabhakar
Ajay Prabhakar

Reputation: 101

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

Upvotes: 2

Nitin0310
Nitin0310

Reputation: 23

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

                }),
              )

Upvotes: -6

Dongsheng Sun Noah
Dongsheng Sun Noah

Reputation: 41

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

Upvotes: 0

Parth Mandalia
Parth Mandalia

Reputation: 109

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

Upvotes: -5

Related Questions